/*
PROJECTS
*/

p {
    font: 1rem/1.5em "Fira Sans", sans-serif;
    text-align: justify;
}

#scene3D {
    box-shadow: 0 8px 10px rgba(0,0,0,.05);
    transform-origin: bottom;
    transform: rotateX(7deg);
    transition: transform .3s ease;
}

main {
    background: white;
}

#innerProjects {
    aspect-ratio: 1.4142 / 1;
    display: flex;
    gap: 2rem;
    flex-direction: column;
    height: 80vh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1rem 3rem 3rem 3rem;
}

nav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5%;
    padding: 2rem;
    position: relative;
}

nav h1 {
    font-size: 4rem;
    letter-spacing: .01rem;
    text-decoration: double underline;
    transform: rotate(2deg);
}

nav p {
    transform: rotate(-3deg);
}

#logo {
    width: 80%;
    transform: rotate(-5deg);
}

#logo:hover {
    transform: rotate(5deg);
    transition: transform .3s ease;
}

section {
    border: 1px lightgray solid;
    border-radius: 5px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1.5rem;
}

details {
    margin-bottom: 3rem;
}

summary {
    font-size: 1.2rem;
    font-weight: bold;
}

.detailsContent {
    align-items: center;
    display: flex;
    flex-direction: row;
}

.thumb {
    border: 1px lightgray solid;
    border-radius: 3px;
    margin: 0 .75rem 0 2rem;
    height: 10rem;
    padding: 1rem 1rem 2rem 1rem;
    position: relative;
    transform: rotate(2deg);
}

.thumb:hover {
    transform: rotate(-5deg);
    transition: transform .3s ease;
}

@media screen and (max-width: 1200px) {
    body {
        height: 94vh;
    }

    #scene3D, #scene3D:hover {
        transform: rotateX(10deg) rotateY(0) rotateZ(0);
        width: 90%;
    }
    
    #innerProjects {
        aspect-ratio: revert;
        align-self: revert;
        padding: 1rem 1.5rem 1.5rem 1.5rem;
    }
    
    nav {
        padding: 1rem;
    }
    
    nav h1 {
        font-size: 2rem;
    }

    .detailsContent {
        flex-direction: column;
    }
}