body{
    background-color: lightgray;
}
.up1{
    background-color: white;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 10px;
    border-radius: 10px;
}
.up1 h2{
    grid-column: 1/3;
    margin-top: 25px;
    margin-bottom: 0px;
}
.up1 p{
    padding: 15px ;
    background-color: lightblue;
    text-align: center;
    margin: 0px;
    gap: 10px;
    
}
.up1Cont div{
    background-color: lightblue;
}


/*Öving 2*/
.up2{
    background-color: white;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin: 10px;
    border-radius: 10px;
}
.up2 h2{
    grid-column: 1/3;
    margin-top: 25px;
    margin-bottom: 0px;
}
.up2 p{
    padding: 15px ;
    background-color: rgb(238, 189, 189);
    text-align: center;
    margin: 0px;
    gap: 10px;
}
.Sbox{
    grid-column: 1/3;
}
.Öv2Box4{
    grid-column: 2/4;
}

/*Öving 3 */
.up3{
    background-color: white;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
    margin: 10px;
    border-radius: 10px;
}
.up3 h2{
    grid-column: 1/5;
    margin-top: 25px;
    margin-bottom: 0px;
}
.up3 p{
    padding: 15px ;
    background-color: rgb(177, 233, 134);
    text-align: center;
    margin: 0px;
    gap: 10px;
}
.Sfeature{
    grid-column: 1/3;
    grid-row: 2/4;
}
.Öv3Box5{
grid-row: 3/5;
grid-column: 4/5;
}
.Öv3Box7{
grid-column: 2/4;
}


/*Övning 4*/
.up4{
    background-color: white;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
    margin: 10px;
    border-radius: 10px;
}
.up4 h2{
    grid-column: 1/5;
    margin-top: 25px;
    margin-bottom: 0px;
}
.up4 p{
    padding: 15px ;
    background-color: rgb(110, 110, 177);
    text-align: center;
    margin: 0px;
    gap: 10px;
}
.header{
    grid-column: 1/5;    
}
.maincontent{
    grid-column: 2/5;
}
.footer{
    grid-column: 1/5;
}

/* Övning 5 */
.up5{
    background-color: white;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr ;
    gap: 10px;
    margin: 10px;
    border-radius: 10px;
}
.up5 h2{
    grid-column: 1/4;
    margin-top: 25px;
    margin-bottom: 0px;
}
.up5p{
    padding: 15px ;
    background-color: rgb(157, 152, 141);
    text-align: center;
    margin: 0px;
    gap: 10px;
}
.header2{
    grid-column: 1/4;
}
.maincontent2{
    grid-column: 1/3;
    grid-row: 3/4;
}
.menugrid{
    grid-template-columns: auto;
}

.menu{
    background-color: rgb(238, 169, 42);
    border-radius: 5%;
    padding: 7px;
    margin: 5px;
}
.infogrid{
    
    grid-column: 1/-1;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    display: grid;
    
    
}
.info1{
    grid-column: 1/2;
}
.info2{
    grid-column: 2/3;
}
.info3{
    grid-column: 3/4;
}
.info4{
    grid-column: 4/5;
}
.info1, .info2, .info3, .info4{
    background-color: rgb(238, 169, 42);
    border-radius: 5%;
    padding: 10px;
    margin: -1px;
}
/* Övning 6 */
.up6{
    background-color: white;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 10px;
    margin: 10px;
    border-radius: 10px;
}
.up6 h2{
    grid-column: 1/5;
    margin-top: 25px;
    margin-bottom: 0px;
}
.up6 p{
    padding: 15px ;
    background-color: rgb(71, 211, 230);
    text-align: center;
    margin: 0px;
    gap: 10px;
}
.Header{
    grid-column: 1/5;
}
.Meny{
    grid-column: 1/2;
    grid-row: 3/8;
}
.Lorem{
grid-column: 2/5;
grid-row: 3/8;
}