*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
}
/* Containers Started*/
.container{
    display: grid;
    gap: 10px;
    padding: 10px;
    height:36vh;
    margin: 3px 30px;
    grid-template-columns: repeat(3, 10rem);
    grid-template-rows: repeat(3, 10rem);
    background-color: #2c3043;

}
.container2{
    display: grid;
    gap: 10px;
    padding: 10px;
    /* height: 80vh; */
    margin: 3px 30px;
    grid-template-columns: repeat(3, 10rem);
    grid-template-rows: repeat(4, 4.6rem);
    background-color: #2c3043;
}
.container3{
    display: grid;
    gap: 10px;
    padding: 10px;
    /* height: 80vh; */
    margin: 3px 30px;
    grid-template-columns: repeat(6, 4.5rem);
    grid-template-rows: repeat(3, 6rem);
    background-color: #2c3043;
}
.container4{
    display: grid;
    gap: 10px;
    padding: 10px;
    /* height: 80vh; */
    margin: 3px 30px;
    grid-template-columns: repeat(4, 7.2rem);
    grid-template-rows: repeat(5, 3rem);
    background-color: #2c3043;
}
.container5{
    display: grid;
    gap: 10px;
    padding: 10px;
    /* height: 80vh; */
    margin: 3px 30px;
    grid-template-columns: repeat(2, 15.5rem);
    grid-template-rows: repeat(3, 5rem);
    background-color: #2c3043;
}
.container5-1{
    display: grid;
    gap: 5px;
    padding: 10px;
    /* height: 80vh; */
    grid-template-columns: repeat(2, 6.8rem);
    grid-template-rows: repeat(2, 4.5rem);
}
.container7{
    display: grid;
    gap: 10px;
    padding: 10px;
    /* height: 80vh; */
    margin: 3px 30px;
    grid-template-columns: repeat(5, 5.6rem);
    grid-template-rows: repeat(3, 5rem);
    background-color: #2c3043;
}
.container8{
    display: grid;
    gap: 10px;
    padding: 10px;
    /* height: 80vh; */
    margin: 3px 30px;
    grid-template-columns: repeat(3, 9.9rem);
    grid-template-rows: 4rem 5.5rem 5.5rem;
    background-color: #2c3043;
}

/* Containers Ended */
.children{
    background-color: #02a787;
}
/* Grid 2 Started */
#grid2-1{
    grid-column: 1/3;
}
#grid2-2{
    grid-column: 4/3;
    grid-row : 1/3;
}
/* Grid 2 Ended */
.sabkabap{
    display: flex;
    flex-wrap : wrap;
}
/* Grid 3 Started */
#grid3-1{
    grid-column: 1/4;
}
#grid3-2{
    grid-row: 2/4;
}
#grid3-3{
    grid-column: 2/4;
    grid-row: 2/4;
}
#grid3-4{
    grid-column: 1/4;
}
/* Grid 3 Ended */
/* grid 5 started */
#grid5-1{
  grid-column: 1/3;  
}
#grid5-2{
    grid-column: 3/4;
}
#grid5-3{
    grid-column: 4/5;
}
#grid5-4{
    grid-column: 1/2;
}
#grid5-5{
    grid-column: 2/3;
}
#grid5-6{
    grid-column: 3/4;
}
#grid5-7{
grid-column: 1/3;
  grid-row: 3/5;  
}
#grid5-8{
  grid-row: 3/4;  
}
#grid5-9{
  grid-row: 3/4;  
}
#grid5-10{
  grid-row: 4/5;  
}
#grid5-11{
  grid-row: 5/6;
  grid-column: 1/4;  
}
#grid5-12{
  grid-row: 5/6;  
}
/* Grid 5 Ended */ 
/* Grid 6 started */
#grid6-3{
    grid-row: 2/4;
}
#grid6-4{
    grid-row: 2/4;
}
#grid6-1-1{
    grid-column : 1/3;
}
/* Grid 6 Ended */
/* Grid 7 Started */
#grid7-8{
    grid-column: 3/6;
}
#grid7-9{
    grid-column : 1/6;
}
/* Grid 7 Ended */
/* Grid 8 Started */
#grid8-1{
    grid-column: 1/4;
}
#grid8-2{
    grid-row: 2/4;
}
#grid8-3{
    grid-column: 2/4;
}
/* Grid 8 Ended */
/* BG Colors */
.yellow{
        background-color:  #fd815b;
}
.tomato{
    background-color: #fd6057;
}
.orange{
    background-color: #fea062;
}
.blue{
    background-color:#02a787;
}
.blue2{
    background-color:#1cc1a1;
}
.blue3{
    background-color:#35daba;
}
/* BG Colors */