/* RESETS */

h1, h2, h3, p {
    margin: 0;
    padding: 0;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    width: 100%;
    transition: transform 500ms;
}

nav ul, nav ol {
    list-style-type: none;
}

* {
    box-sizing: border-box;
}

/* ----------------------------- */

/* BODY */

body {
    margin: auto;
    background: #200808;
    background: linear-gradient(180deg,rgba(32, 8, 8, 1) 0%, rgba(57, 19, 19, 1) 100%);
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* HEADER */

header {
    background: #130000;
    display: flex;
    padding: 20px 40px;
    font-family: "Heebo", sans-serif;
    align-items: center;
    justify-content: space-between;
}

header h3 {
    color: #FF6565;
    font-size: 1em;
}

header h3 a{
    color: #FF6565;
}

header ul {
    display: flex;
    gap: 10px;
}

header ul li a {
    color: #FFF2ED;
    text-decoration: none;
}

/* MAIN */

main {
    padding: 30px;
    margin: auto;
    height: 100%;
}

/* TOP */

#top {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
}

#top img {
    margin: auto;
}

#front {
    position: relative;
    min-width: 250px;
}

#speech-mobile {
    position: absolute;
    width: 20%;
    right: 50px;
}

#speech-desktop {
    position: absolute;
    display: none;
}

#lexi-front {
    height: 75%;
}

img:hover, img:focus {
    transform: scale(1.03);
}

/* TEXTBOX */

.textbox {
    background: #FFF2ED;
    font-family: "Lexend", sans-serif;
    border-radius: 60px;
    padding: 40px;
    text-align: center;
    line-height: 2em;
    margin: auto;
}

p a {
    color: #FF6565;
    font-family: "Lexend", sans-serif;
    text-align: center;
    border-radius: 30px;
    background: #FFF2ED;
    padding: 10px 20px;
}

p {
    text-align: center;
}

/* FOOTER */

footer {
    background: #130000;
    display: flex;
    padding: 20px 40px;
    font-family: "Heebo", sans-serif;
    align-items: center;
    justify-content: flex-end;
    color: #FFF2ED;
    font-size: 1em;
}

/* HOME DIRECTORY */

#directory {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#directory .container {
    background: #FFF2ED;
    height: 200px;
    padding: 20px;
    display: flex;
    flex-direction: column; 
    justify-content: flex-end;
    margin: 0;
}

#graphic.container {
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%), url(images/graphic.jpg) center;
    background-size: cover;
}

#illustration.container {
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%), url(images/illustration.jpg) center;
    background-size: cover;
}

#character.container {
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%), url(images/character.jpg) center;
    background-size: cover;
}

#animation.container {
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%), url(images/animation.jpg) center;
    background-size: cover;
}

#directory figure {
    margin: 0;
}

#directory figure a {
    text-decoration: none;
}

#directory div.label {
    color: #FFF2ED;
    font-family: "Heebo", sans-serif;
    font-weight: 900;
    font-size: 20px;
}

/* ABOUT */

#about {
    display: flex;
    justify-content: center;
    height: 100vh;
}

#about img {
    --_a: rotate 10s linear infinite;
    animation: var(--_a),var(--_a) paused;
    animation-composition: add;
    width: 300px;
}

#about img:hover {
    animation-play-state: running;
}

@keyframes rotate {
    to {rotate: 1turn}
}

/* GALLERY */

.gallery {
    display: flex;
    flex-direction: column;
}

.gallery div.container {
    background: #FFF2ED;
}

.gallery figure {
    margin: 0;
    margin-bottom: 20px;
}

/* PIECE */

.piece {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.info .textbox {
    margin: 0;
}

iframe {
    display: block;
    max-width: 100%;
    height: 500px;
    width: 100%;
}

/* WIDER SCREENS */

@media only screen and (min-width: 700px) {
    
    /* FRONT */

    #top {
        display: flex;
        flex-direction: row;
    }

    #top img {
        flex: 2;
        max-width: 400px;
    }
    
    #top div {
        flex: 3;
    }

    #front {
        max-width: 800px;
    }

    #speech-mobile {
        display: none;
    }

    #speech-desktop {
        position: absolute;
        display: block;
        width: 20%;
        left: -40px;
        bottom: 40%;
    }

    #directory {
        display: grid;
        grid-template-columns: 1fr 1fr;
        max-width: 1200px;
        margin: auto
    }

    #directory .container {
        height: 300px;
    }

    /* GALLERY */

    .gallery {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
        max-width: 1200px;
        margin: auto;
    }

    .gallery div {
        flex: 1;
    }

    /* PIECES */

    .piece {
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        gap: 40px;
        max-width: 1200px;
    }
}