* {
    box-sizing: border-box;
}


html{
    padding: 0px;
    margin: 0px;
    background-color: white;
}
body{
    padding: 0px;
    margin: 0px;
    font-family: 'Ghibli Regular', Georgia;
}


/* BETŰTÍPUS */
@font-face {
    font-family: 'Ghibli Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Ghibli Regular'), url('fonts/Eyad Al-Samman - Ghibli.woff') format('woff');
}



/* HEADER */
header{
    text-align: center;
}


.logo{
    width: 100%;
    max-width: 300px;
    height: auto;
}

/* MENÜ */

nav{
    display: flex;
    justify-content: center;
    padding: 10px;
}
nav ul {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav ul li {
    padding: 10px 30px;
    text-align: center;
}
nav li a{
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: black;
    padding: 10px;
}

nav li a#active {
    border: 1px solid black;
}

nav li a:hover, nav li a#active:hover {
    color: white;
    background-color: black;
}


/* GALLÉRIA */
.galleria-container{margin:auto;}

/* TÖRTÉNETE */
div#tortenete{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: justify;
    padding-top: 150px;
}
div#tortenete article{
    padding: 0px 30px;
}
div#tortenete figure{
    display: flex;
    align-self: center;

}
img.tortenete{
    width: 200px;
}

/* MIYAZAKI HAYAO */
div#miyazaki{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: justify;
    padding-top: 150px;
}
div#miyazaki article{
    padding: 0px 30px;
}
div#miyazaki figure{
    display: flex;
    align-self: center;
    order: 2;

}
img.miyazaki{
    width: 200px;
}

/* MÚZEUM és VIDEÓ*/
section.muzeum, section.video{
    text-align: center;
    padding-top: 150px;
}
div#muzeum{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
div#muzeum img{
    height: 250px;
}
p.video{
    padding-top: 30px;

}
video#video1{
    max-width: 400px;
    width: 100%;
    height: auto;
}
video#video2{
    max-width: 533px;
    width: 100%;
    height: auto;
}

/* KARAKTEREK */
figure#karakterek{
    text-align: center;
    padding-top: 100px;
}
img.karakterek{
    max-width: 800px;
    width: 100%;
    height: auto;
}

/* LÁBLÉC */
footer{
    text-align:center;
    padding: 10px;
}

/* KÉPEK */
img.nagyit:hover {
    transform: scale(1.2);
    transition: 0.5s;
}

/* FILMEK HTML */

div#filmkepek{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
div#filmkepek img{
    height: 250px;
}
div#filmkepek figure{
    width: 250px;
}


/* QUIZ HTML */
div#chihirokar{
    padding: 20px;
}
div#chihirokar img{
    width: 200px;
}
div#chihirokar p{
    padding-top: 30px;
}
div.lehetosegek{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
div.lehetosegek figure{
    padding: 0px;
    margin: 0px;
}
div.lehetosegek figure img{
    border-radius: 16px;
}
p.kozep{
    text-align: center;
}
h2#megoldas{
    text-align: center;
}
div#chihirokar figure{
    text-align: center;
}

/* KÉRDŐÍV */
h2#kerdoives{
    text-align: center;
    padding: 20px;
}
div#akerdoiv{
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-around;
}
img.urlapos{
    max-width: 500px;
    width: 100%;
    height: auto;
}
/* VALIDÁLÁS */
label.error{
    color: red;
}


/* RESZPONZIVITÁS */
@media all and (min-width: 600px) {
    /*tablet*/
    nav ul {
        flex-direction: row;
        align-items: center;
    }
    div#muzeum{
        flex-direction: row;
        flex-wrap: wrap;
    }
    div#filmkepek{
        flex-direction: row;
        flex-wrap: wrap;
    }
    div.lehetosegek{
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media all and (min-width: 768px) {
    /*számítógép*/
    div#tortenete{
        flex-direction: row;
    }
    div#miyazaki{
        flex-direction: row;
    }
    div#miyazaki article{
        order: 2;
    }
}