body {
    background-color: lightblue;
    color: #000;
    font-family: 'Verdana';
    font-size: 15px;
    text-align: justify;
}

header {
    display: grid;
    width: 100%;
    text-align: center;
    padding-bottom: 20px;
}

h3 {
    text-align: center;
}

img {
    width: 320px;
}

#dolt {
    font-style: italic;
}

.kicsi {
    list-style-type: lower-alpha;
}

.grid-container {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(5, minmax(150px, auto));
    gap: 10px 10px;
    grid-template-areas:
        "egy ket har"
        "negy ot hat"
        "het nyo kil"
        "tiz tegy tket"
        "thar nteszt nteszt";
}

.egy {
    grid-area: egy;
}

.ket {
    grid-area: ket;
}

.har {
    grid-area: har;
}

.negy {
    grid-area: negy;
}

.ot {
    grid-area: ot;
}

.hat {
    grid-area: hat;
}

.het {
    grid-area: het;
}

.nyo {
    grid-area: nyo;
}

.kil {
    grid-area: kil;
}

.tiz {
    grid-area: tiz;
}

.tegy {
    grid-area: tegy;
}

.tket {
    grid-area: tket;
}

.thar {
    grid-area: thar;
}

.nteszt {
    grid-area: nteszt;
}

.grid-container div {
    background: rgba(255, 255, 189, 0.986);
    padding: 10px;
}

.grid-container div:nth-child(even) {
    background: rgb(225, 246, 253);
    padding: 10px;
}

@media only screen and (max-width:800px) {

    /* For tablets: */
    .grid-container {
        width: 100%;
        font-size: 80%;
    }

}

@media only screen and (max-width:500px) {

    /* For mobile phones: */
    .grid-container {
        width: 100%;
        padding: 0;
        font-size: 70%;
    }
}