@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body {
    margin: 0px;
    font-family: 'Open Sans', sans-serif;
}
div#hlavni {
    padding: 10px 10%;
    background-color: rgb(255, 255, 255);
    display: grid;
    grid-template-columns: repeat(7, 180px);
    grid-template-rows: repeat(5 , 100px);
}
div#hlavni div {
    padding: 15px;
    margin: 5px;
    font-size: 1.2em;
}
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body {
    margin: 0px;
    font-family: 'Open Sans', sans-serif;
}
div#hlavni {
    padding: 10px 10%;
    background-color: rgb(212, 212, 212);
    display: grid;
    grid-template-columns: repeat(6 , 1fr);
    grid-template-rows: repeat(6 , 1fr);
}
div#hlavni div {
    padding: 15px;
    margin: 5px;
    font-size: 1.2em;
}
#d1 {
    background-color: #329FB9;
    grid-area: 1/2/2/3;
}
#d2 {
    background-color: #60E1FF;
    grid-area: 3/1/4/2;
}
#d3 {
    background-color: #2EB2BE;
    grid-area: 2/2/4/3;
}
#d4 {
    background-color: #009CC0;
    grid-area: 4/2/5/3;
}
#d5 {
    background-color: #C2F3FF;
    grid-area: 2/6/4/7;
}
#d6 {
    background-color: #01CFFF;
    grid-area: 4/1/6/2;
}
#d7 {
    background-color: #60E1FF;
    grid-area: 2/3/3/4;
}
#d8 {
    background-color: #329FB9;
    grid-area: 3/3/5/5;
}
#d9{
    background-color: #2EB2BE;
    grid-area: 4/5/5/7;
}
#d10 {
    background-color: #009CC0;
    grid-area: 5/5/6/6;
}
#d11 {
    background-color: #C2F3FF;
    grid-area: 2/4/3/5;
}
#d12 {
    background-color: #01CFFF;
    grid-area: 5/4/6/5;
}
@media (max-width: 700px) {
    div#hlavni {
        padding: 5%;
        grid-template-columns: repeat(3 , 1fr);
        grid-template-rows: repeat(12 , 1fr);
    }
    div#hlavni div {
        padding: 15px;
        margin: 5px;
        font-size: 1.2em;
    }
    #d1 {
        grid-area: 1/2/2/3;
    }
    #d2 {
        grid-area: 3/1/4/2;
    }
    #d3 {
        grid-area: 2/2/4/3;
    }
    #d4 {
        grid-area: 4/2/5/3;
    }
    #d5 {
        grid-area: 8/2/9/4;
    }
    #d6 {
        grid-area: 4/1/6/2;
    }
    #d7 {
        grid-area: 2/3/3/4;
    }
    #d8 {
        grid-area: 6/1/8/3;
    }
    #d9{
        grid-area: 4/3/7/4;
    }
    #d10 {
        grid-area: 9/3/11/4;
    }
    #d11 {
        grid-area: 8/1/10/2;
    }
    #d12 {
        grid-area: 10/2/11/3;
    }
}
#d1 {
    background-color: #32b94d;
    
}
#d2 {
    background-color: #32b94d;
    
}
#d3 {
    background-color: #32b94d;
    
}
#d4 {
    background-color: #c00000;
    
}
#d5 {
    background-color: #00ccff;
    
}
#d6 {
    background-color: #c00000;
    
}
#d7 {
    background-color: #00d0ff;
   
}
#d8 {
    background-color: #00ccff;
    
    
}
#d9{
    background-color: #00eaff;

    ;
}
#d10 {
    background-color: #c00000;
   
}
#d11 {
    background-color: #C2F3FF;
    
}
#d12 {
    background-color: #c00000;
    
}
@media (max-width: 700px) {
    div#hlavni {
        padding: 5%;
        grid-template-columns: repeat(3 , 1fr);
        grid-template-rows: repeat(12 , 1fr);
    }
    div#hlavni div {
        padding: 15px;
        margin: 5px;
        font-size: 1.2em;
    }
    #d1 {
        grid-area: 1/2/2/3;
    }
    #d2 {
        grid-area: 3/1/4/2;
    }
    #d3 {
        grid-area: 2/2/4/3;
    }
    #d4 {
        grid-area: 4/2/5/3;
    }
    #d5 {
        grid-area: 8/2/9/4;
    }
    #d6 {
        grid-area: 4/1/6/2;
    }
    #d7 {
        grid-area: 2/3/3/4;
    }
    #d8 {
        grid-area: 6/1/8/3;
    }
    #d9{
        grid-area: 4/3/7/4;
    }
    #d10 {
        grid-area: 9/3/11/4;
    }
    #d11 {
        grid-area: 8/2/10/2;
    }
    #d12 {
        grid-area: 10/3/11/3;
    }
}