*{
    margin: 0;
    padding: 0;
}

.gridContainer{
    display: grid;
    min-height: 100vh;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto 1fr auto; 
    grid-template-areas: 
    "navbar navbar"
    "sidebar main"
    "sidebar footer";
    /* gap: 10vh; 
    background-color: gray; 
    color: white; */
}
.gridHeader{
    top: 0;
    grid-area: navbar;
    position:sticky;
    background-color: blue;
    color: white;
    padding: 1em;
    grid-auto-flow: column;
}
.gridAside{
    display: flex;
    flex-direction: column;
    height: calc(100vh-60.5px);
    top: 60.5px;
    grid-area: sidebar;
    background-color: gray;
    position:sticky;
    align-self: start;
    margin:  1em;
    gap: 60vh;
}
.gridMain{
    grid-area: main;
}
.gridFooter{
    grid-area: footer;
    background-color: black;
    color: white;
    padding: 2em;
    position: sticky;
    bottom: 0;
    /* align-self: start;
    top: 0; */
}
.gridNav{
    display: grid;
    grid-template-columns:repeat(auto-fit,150px);
    /* grid-row-start: 1; */
    gap: 1em;
    justify-content: right;
}
.mainItems{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    /* grid-template-rows: 0.5fr 1fr 0.5fr; */
    justify-content: space-around;
    /* margin: 1em; */
    background: linear-gradient(to right, green 25%,magenta 50%,yellow 75%,red 100%);
}

/* apply styles to the items on the grid */
.item1{
    display: grid;
    /* flex-direction: column; */
    background-color: lightcoral;
    gap: 1em;
    justify-content: center;
    transition: 0.3s ease;
    /* position: relative; */
    margin-top: 1em;
    margin-right: 1em;
    /* color: white;
    font-size: medium;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold; */
}
/* styling the rating */
.gridRate{
    /* margin-top: 1.5em; */
    /* margin-left: 1em; */
    background-color: white;
    height: 6vh;
    width: 20vh;
    text-align: center;
}
/* styling the price */
.gridPrice{
    font-size: x-large;
    height: 6vh;
    width: 20vh;
    text-align: center;
    background-color: lightgreen;
}

/* styling the buttons */
.gridButton{
    background-color: red;
    color: white;
    height: 6vh;
    width: 20vh;
    text-align: center;
    /* margin-left: 10em; */
}

.item1:hover{
    background-color: blue;
    color: white;
    cursor: pointer;
}
/* printing the documents */
@media print{
    body{
        background-color: white;
        color: black;
        padding: 10px;
    }
}
button{
    background-color: aqua;
    padding: 5px;
}

/* style the aside */
/* .darkMode{
    @media (prefers-color-scheme: dark);
} */