main {
    margin-top: 0;
}


/* Landing Page Carousel */

#carousel_container {
    position: relative;
    top: 0;
    display: block;
    
    width: 100vw;
    height: 100dvh;
    
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

#carousel_image_container {
    position: relative;
    
    height: 100%;
    width: 100%;
    
    overflow-y: hidden;
    
    background-color: black;
}

.carousel_image {
    position: absolute;
    
    opacity: 100%;
    transition: opacity 0.7s ease-in-out;
    
    display: flex;
    flex-shrink: 0;
    
    width: 100vw;
    overflow: hidden;
    
    justify-content: center;
    
    img {
        object-fit: cover;
        height: 100dvh;
        width: auto;

        pointer-events: none;
    }
}

/* Sizes images to fill width on wider (i.e. desktop) aspect ratios */
@media (min-aspect-ratio: 3/2) {
    .carousel_image img {
        width: 100vw;
        height: auto;
    }
}

#carousel_indicator_container {
    position: absolute;
    bottom: 0;
    width: 100%;
    
    display: flex;
    flex-direction: row;
    
    justify-content: center;
    align-items: center;
    /* padding-bottom: 0.5em; */
    
    background-image: linear-gradient(to top, rgba(0,0,0,0.3), rgba(0,0,0,0));
    
    .carousel_indicator {
        display: flex;
        flex-direction: column;
        align-items: center;

        container-type: inline-size;

        width: 100%;
        padding-left: 0.1em;
        padding-right: 0.1em;

        cursor: pointer;
        
        span {
            color: white;
            font-family: Antonio, sans-serif;
            font-weight: 800;
            font-size: 2.5cqb;
            /* font-size: clamp(1.5em, 4vh, 3em); */
            text-shadow: 0.1em 0.1em 12px rgba(0,0,0,0.5);
            
            padding: 0.25em;

            transition: opacity 0.3s ease-in-out;
        }
        
        .carousel_indicator_bar {
            position: relative;

            width: 100%;
            height: 0.25em;
            background-color: rgba(255,255,255,0.4);

            div {
                position: absolute;
                inset: 0;

                transform: scaleX(0);
                transform-origin: left;

                background-color: white;
            }
        }
    }
}

/* subsections */

.subsection {
    display: flex;
    
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    width: 100%;
    
    /* box-shadow: 0 10px 20px rgba(0,0,0,0.3); */
}


/* basic info */

#basic_info_container {
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 100%;
    
    background-color: #0A090C;
    
    h1 {
        margin: 3em;
        
        color: white;
        font-family: Lexend, sans-serif;
        font-weight: 200;
        
        b {
            font-weight: 500;
        }

        a {
            color: inherit;
        }
    }
}


/* works */

#works_container {
    display: flex;
    flex-direction: row;
    
    gap: 1em;
    padding: 1em;
    
    width: calc(100% - 2em);
    overflow-x: scroll;
    
    .work_cover {
        position: relative;
        container-type: inline-size;
        flex: 1 0 16em;
        display: flex;
        
        overflow: hidden;
        
        box-shadow: 2px 2px 3px rgba(0,0,0,0.3);

        a {
            position: absolute;
            inset: 0;

            display: block;
            z-index: 1;
        }
        
        .work_cover_header {
            position: absolute;
            bottom: 0;
            width: 100%;
            
            display: flex;
            flex-direction: column;
            align-items: center;
            
            padding-top: 1cqh;
            padding-bottom: 5cqh;
            
            z-index: 1;
            background-image: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0));
            
            .work_cover_header_textbox {
                width: fit-content;
                
                font-family: PlayfairDisplay, serif;
                
                h1,h3 {
                    color: white;
                    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
                    margin: 0;
                }
                
                h1 {
                    font-size: 16cqi;
                    line-height: 80%;
                }
                
                h3 {
                    font-size: 8cqi;
                }
            }
        }
        
        img {
            width: 100%;
            height: auto;
            aspect-ratio: 2/3;
            
            transition: transform 0.1s ease-in-out;
        }
    }
    
    .work_cover:hover {
        img {
            transform: scale(1.05);
        }
    }
}