body{
    /* background-color:  #f0f0f0; */
    background-color: lightgray;
}
.lgray{
    background-color: #4a4ad3;
}
.lcoral{
    background-color: lightcoral;
}   
.lgreen{
    background-color: lightgreen;
}
.plum{
    background-color: plum;
}
.cyan{
    background-color: cyan;
}


.ovning1, .ovning2, .ovning3, .ovning4, .ovning5,.ovning6{
    background-color: white;
    padding: 20px;
    text-align: center;
    margin: 5px;
    margin-bottom: 30px;
    border-radius: 10px;
}
/************* .container ******************/
.container{
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 10px;   
}
.container .titel{
    grid-column: span 2;
   text-align: left;
}

.container .lgray{
    /* background-color: rgb(142, 49, 49); */
    padding: 20px;
    text-align: center;
    margin: 5px;
    border-radius: 10px;
}
/* .container2 */
.container2 h2{
    background-color: white;
    padding: 20px;
    text-align: center;
    margin: 5px;
    border-radius: 10px;
}
.container2 div{
    /* background-color: white; */
    padding: 20px;
    text-align: center;
    margin: 5px;
    border-radius: 10px;
}
.container2{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
   

}

.container2 .titel2{
    grid-column: span 3;
   text-align: left;
}


.ovning3 div{
    /*background-color: white;*/
    padding: 20px;
    text-align: center;
    margin: 5px;
    border-radius: 10px;
}
.container3{
display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
}
.container3 .titel3{
    background-color: white;
    grid-column: span 4;
   text-align: left;
}
.span1{
    grid-column: span 1;
}
.span2{
    grid-column: span 2;
}
.span3{
    grid-column: span 3;
}
.span4{
    grid-column: span 4;

}
.rowspan2{
    grid-row: span 2;
}
.rowspan3{
    grid-row: span 3;
}
.ovning4 div{
 /*   background-color: white;*/
    padding: 20px;
    text-align: center;
    margin: 5px;
    border-radius: 10px;
} 
.container4{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1px;
}
.container4 .titel4{
    grid-column: span 4;
   text-align: left;
   background-color: white;
}  
.ovning5 div{
   /* background-color: white;*/
    padding: 20px;
    text-align: center;
    margin: 5px;
    border-radius: 10px;
}
.container5{
    display: grid;
    grid-template-areas: repeat(4, 1fr);
    gap: 10px;
}   
.container5 .titel5{
    grid-column: span 4;
   text-align: left;
} 
/* .container5sub div{
    background-color: white;
    padding: 20px;
    text-align: center;
    margin: 5px;
    border-radius: 10px;
    grid-template-columns: repeat(4,1fr);
}   */
.o5span4{
    grid-column: span 4;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    background-color: cyan;
}
.span1 
{
    background-color: orange;
}
.sidebar{
    background-color: orange;
}
.ovning6
    div{
        /* background-color: white;*/
        padding: 20px;
        text-align: center;
        margin: 5px;
        border-radius: 10px;
    }
.container6{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
    background-color: white;
}
.container6 .titel6{
    grid-column: span 2;
   text-align: left;
}