* {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
}

body {
    background-color: #D7B520;

}

nav {
    padding-left: 24;
}

nav li {
    padding-top: 20px;
    padding-left: 24px;
    margin-top: 8px;
}

nav ul {
    list-style-type: none;

}

nav li a {
    text-decoration: none;
    width: 80%;
    padding: 8px;
    margin: -32px;
    background-color: rgb(14, 113, 206);
    color: white;

}

nav li a:hover {
    background-color: rgb(192, 208, 223);
    color: black;
}

nav li a:visited {
    background-color: rgb(255, 242, 204);
    color: darkblue;
}

h3 {
    padding-top: 40px;
    padding-bottom: 30px;
    text-align: center;

}

.sz_kep {
    width: 40%;
    padding: 32px 32px 16px 32px;
    float: left;
    vertical-align: top;
}

.sz_kep p {
    padding-top: 60px;
    padding-right: 32px;
    padding-bottom: 60px;
    width: 50%;
    text-align: justify;
}

form {
    padding-left: 24px;
}

#dolt {
    font-size: 1.2em;
    font-style: italic;
    padding-top: 8px;
}

.mezok input {
    width: 80%;
    height: 32px;
    margin-top: 8px;
    margin-bottom: 8px;
    padding-top: 6px;
}

textarea {
    margin-bottom: 16px;
}

button[type=submit] {
    background-color: rgb(50, 102, 150);
    width: 100px;
    padding: 8px;
    margin-right: 24px;
    font-size: 16px;
    color: white;
    border: 2px solid rgb(9, 51, 9);
    border-radius: 3px;
    float: right;
}

button[type=submit]:hover {
    background-color: rgb(190, 217, 243);
    color: darkblue;
}
.hazi {
    background-color: rgb(24, 172, 221);
    display: inline-block;
    text-align: center;
    color: rgb(1, 1, 83);
    text-decoration: none;
    width: 180px;
    padding: 6px;
    margin-top: 8px;
    border: 1px solid black;
    
}
.hazi:hover {
background-color: rgb(150, 174, 196);
color: black;
}

.grid-container {
    display: grid;
    width: 80%;
    height: auto;
    background-color: #fff;
    border: 2px solid rgb(83, 71, 71);
    margin: 0 auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 0.5fr;
    gap: 16px 16px;
    grid-template-areas:
        "header header header"
        "aside section_1 section_1"
        "aside section_2 section_2"
        "aside section_3 section_3"
        "footer footer footer";
}

.header {
    grid-area: header;
    background-color: rgb(231, 230, 230);
    background-image: url(../img/strand.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border: 3px solid blue;
    border-radius: 16px;
    margin: 16px 24px 0px 24px;
}

ul li {
    text-decoration: none;
}

.text {
    margin: 0 32px 0 32px;
    text-align: justify;
    padding: 32px 0;

}

.aside {
    grid-area: aside;
    background-color: rgb(91, 155, 213);
    border: 3px solid blue;
    border-radius: 16px;
    margin: 0 0 0 24px;
}

.section_1 {
    grid-area: section_1;
    background-color: rgb(251, 229, 214);
    border: 3px solid blue;
    border-radius: 16px;
    margin: 0 24px 0 0;
}

.section_2 {
    grid-area: section_2;
    background-color: rgb(255, 242, 204);
    border: 3px solid blue;
    border-radius: 16px;
    margin: 0 24px 0 0;
}

.section_3 {
    grid-area: section_3;
    background-color: rgb(222, 235, 247);
    border: 3px solid blue;
    border-radius: 16px;
    margin: 0 24px 0 0;
}

.footer {
    grid-area: footer;
    background-color: rgb(231, 230, 230);
    border: 3px solid blue;
    border-radius: 16px;
    margin: 0 24px 0px 24px;
    /*grid-template-rows: minmax(150px, 300px);*/
    height: 200px;
}

#lablec {
    text-align: center;
    padding-top: 60px;
    padding-bottom: 16px;
}

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

    /* For tablets: */
    body {
        width: 100%;
    }
}

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

    /* For mobile phones: */
    body {
        width: 100%;
        padding: 0;
    }

    .header {
        background-image: url(../img/vitorlazas.jpg);
        background-repeat: no-repeat;
        background-size: contain;
    }

    .grid-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr;
        gap: 16px 16px;
        grid-template-areas:
            "header"
            "aside"
            "section_1"
            "section_2"
            "section_3"
            "footer";
    }

    .header {
        grid-area: header;
    }

    .aside {
        grid-area: aside;
    }

    .section_1 {
        grid-area: section_1;
    }

    .section_2 {
        grid-area: section_2;
    }

    .section_3 {
        grid-area: section_3;
    }

    .footer {
        grid-area: footer;
    }

    .header {
        margin: 16px 24px 0 24px;
    }

    .aside,
    .section_1,
    .section_2,
    .section_3 {
        margin: 0 24px;
    }

    .footer {
        margin: 0 24px 16px 24px;
    }
}