@font-face {
    font-family: "Fedra";
    src: url("https://levinsfi23.llmp.spse-net.cz/fonts/FedraBook.woff") format("woff");
}

body {
    font-family: "Fedra", sans-serif;
    color: white;
}

article {
    background-color: rgb(2, 166, 168);
    padding: 15px;
}

h1 {
    margin: 0;
}

section {
    padding: 10px 8%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 8px;
    grid-auto-flow: row;
}

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

.b1 {
    background-color: #074F57;
}

.b2 {
    background-color: #077187;
}

.b3 {
    background-color: #74A57F;
}

@media(max-width:900px) {
    section {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}

@media (min-width:900px) {

    #p1,
    #p2,
    #p3 {
        grid-column: span 1;
    }

    #p4 {
        grid-column: 2 / span 2;
        grid-row: 2 / span 2;
    }

    #p5 {
        grid-column: 5 / span 1;
        grid-row: 2;
    }

    #p6 {
        grid-column: 4 / span 1;
        grid-row: 3;
    }

    #p7 {
        grid-column: 5 / span 1;
        grid-row: 3;
    }

    #p8 {
        grid-column: 2 / span 1;
        grid-row: 4;
    }

    #p9 {
        grid-column: 3 / span 1;
        grid-row: 4;
    }

    #p10 {
        grid-column: 4 / span 2;
        grid-row: 4 / span 2;
    }

    #p11 {
        grid-column: 2 / span 1;
        grid-row: 5;
    }

    #p12 {
        grid-column: 3 / span 1;
        grid-row: 5;
    }

    #p13 {
        grid-column: 2 / span 1;
        grid-row: 6;
    }

    #p14 {
        grid-column: 3 / span 2;
        grid-row: 6 / span 2;
    }

    #p15 {
        grid-column: 5 / span 1;
        grid-row: 6;
    }

    #p16 {
        grid-column: 6 / span 1;
        grid-row: 6;
    }

    #p17 {
        grid-column: 5 / span 1;
        grid-row: 7;
    }

    #p18 {
        grid-column: 4 / span 1;
        grid-row: 8;
    }
}