@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap');

body {
    font-family: 'Nunito', sans-serif;
    margin: 0;
    background-color: white;
    color: #fff;
    background-image: url(../SEO/green-348346_1920.jpg);
}

.profil-mrizka {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 60px);  
    gap: 8px;
    padding: 15px;
}

.dovednost {
    padding: 8px;
    display: flex;
    align-items: flex-start;     
    justify-content: flex-start;
    font-size: 1.6em;            
    box-sizing: border-box;
}

.barva1 { background-color: #3498db; }
.barva2 { background-color: #e74c3c; }
.barva3 { background-color: #f1c40f; }

::selection {
    background-color: orange;
    color: black;
}

@media(min-width: 800px) {
    #d1 { grid-column: 1 / span 2; grid-row: 1 / span 2; }
    #d2 { grid-column: 3 / span 1; grid-row: 1; }
    #d3 { grid-column: 4 / span 2; grid-row: 1 / span 2; }
    #d4 { grid-column: 3 / span 1; grid-row: 2; }
    #d5 { grid-column: 1 / span 2; grid-row: 3 / span 2; }
    #d6 { grid-column: 3 / span 1; grid-row: 3; }
    #d7 { grid-column: 4 / span 1; grid-row: 3 / span 2; }
    #d8 { grid-column: 5 / span 2; grid-row: 3; }
    #d9 { grid-column: 3 / span 1; grid-row: 4; }
    #d10 { grid-column: 5 / span 2; grid-row: 4 / span 2; }
}

@media(max-width: 800px) {
    .profil-mrizka {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}