/*---------------------------- GLOBALS ----------------------------*/

:root {
    --main-bgc: beige;
    --secondary-bgc: #f4efe6;
    --dividing-color: #e6dfd3;

    --title-color: #1a1a1a;
    --secondary-title-color: #4b4a47;
    --main-text: #605f5b;

    --accent: rgb(200, 107, 75);

    /*change font size with screen size*/
    font-family: "Merriweather", serif;

    box-sizing: border-box;
}

body { 
    /*background-color:  var(--main-bgc);*/
    background-image: linear-gradient(to bottom, var(--main-bgc), var(--secondary-bgc));
    margin: 0;
}

button {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    font-size: 2rem;
    
    color: var(--main-text);

    transition: color 0.3s, scale 0.3s;
}

a:hover {
    scale: 1.2;
    color: var(--accent);
}

/*
    headers, titles and such :) 
*/
h {
    font-family: "Merriweather", serif;
    font-size: 4rem;

    color: var(--title-color);
    text-shadow: var(--dividing-color) 2px 2px;
    
    padding: 0;

    transition: color 0.3s;
}

h:hover {
    color: var(--accent);
}

/* 
    sub-headers
*/
h2 {
    font-size: 2rem;
    
    color: var(--title-color);

    font-weight: 600;
    padding: 0;
    margin: 0;

    transition: color 0.3s;
}

h2:hover {
    color: var(--accent);
}


/* 
    teeny tiny sub-headers!
*/
h3 {
    font-size: 1.6rem;
    
    color: var(--secondary-title-color);

    font-weight: 200;
    padding: 0;
    margin: 0;

    transition: color 0.3s;
}

h3:hover {
    color: var(--accent);
}


/*
    subtext, descriptors, paragraphs
*/
p {
    font-size: 1.5rem;
    color: var(--main-text);

    letter-spacing: 1px;
    word-spacing: 2px;

    margin: 0;
    padding: 0;
}

/*
    object classes
*/

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

.hbox {
    display: flex;
    flex-direction: row;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*---------------------------- APPEAR SLIDER ----------------------------*/

.slider {
    overflow: hidden;
    height: fit-content;
    width: fit-content;

    .slider-item {
        transition: transform 0.8s ease-out;
        
        &.left {
            transform: translateX(-100%);
        }
        &.right {
            transform: translateX(100%)
        }
        &.up {
            transform: translateY(-100%)
        }
        &.down {
            transform: translateY(100%)
        }
    }
    
    &.is-active {
        .slider-item{
            transform: translateX(0%)
        }
    }
}

/*---------------------------- APPEAR SLIDER END ----------------------------*/


/*---------------------------- CAROUSEL SHOWCASE ----------------------------*/

.carousel {
    position: relative;
    display: flex;
    justify-content: space-between;
    overflow: hidden;

    .content {
        left: 0; right: 0; top: 0; bottom: 0;
        height: auto;

        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 100%;
        overflow-x: auto;

        position: absolute;
        overflow: visible;
        
        transition: transform 0.4s ease-out;


        * {
            min-width: 0;
            min-height: 0;
            max-width: 100%;
            max-height: 100%;

            position: relative;
            justify-self: center;
            align-self: center;
            object-fit: contain;

            color: white;
        }
    }

    button {
        height: 100%;
        width: 12rem;

        position: relative;
        
        cursor: pointer;

        &::before {
            content: '';
            position: absolute;
            left: 0; right: 0; top: 0; bottom: 0;
            z-index: 1;
            
            transition: 
                backdrop-filter 0.4s ease-out,
                background-color 0.25s ease-out;
        }

        &::after {
            content: '';
            position: absolute;
            left: 0; right: 0; top: 0; bottom: 0;
            z-index: 2;
            opacity: 0;

            background-repeat: no-repeat;
            background-size: 20%;
            background-position-y: center;

            transition: opacity 0.4s ease-out;
        }
        
        &:hover::before { 
            backdrop-filter: blur(16px); 
            background-color: rgba(245, 245, 220, 0.5);
        }
        &:hover::after { opacity: 1; }

        &.left {
            &::after { 
                background-position-x: left;
                background-image: url('../svgs/arrow-left-335-svgrepo-com.svg'); 
            }
            &::before { mask: linear-gradient(to right, black, transparent); }
        }
        
        &.right {
            &::after { 
                background-position-x: right;
                background-image: url('../svgs/arrow-right-336-svgrepo-com.svg'); 
            }
            &::before { mask: linear-gradient(to left, black, transparent); }
        }
    }

    .dot-container {
        position: absolute;
        left: 0; right: 0; top: 0; bottom: 0;
        justify-self: center;
        align-self: end;

        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: fit-content;

        gap: 4px;
        margin-bottom: 1rem;
        
        .slide-dot {
            border-radius: 14px;
            height: 0.25rem;
            width: 0.25rem;

            background-color: rgba(255, 255, 255, 0.5);
            transition: background-color ease-out 0.5s;
            
            &.is-active {
                background-color: rgba(255, 255, 255);
            }
        }
    }
}

/*---------------------------- CAROUSEL SHOWCASE END ----------------------------*/


/*---------------------------- GLOBALS END ----------------------------*/


/*---------------------------- HEADER ----------------------------*/

header {
    position: fixed;
    width: 97.5vw;
    padding-left: 1vw;
    padding-right: 1.5vw; /*accounting for scrollbar*/
    
    background-color: #f5f5dcbe;
    z-index: 15;

    justify-content: space-between;
    align-items: center;

    backdrop-filter: blur(7px);
    
    border-bottom: 0px solid #e6dfd300;
    transition: border-bottom 0.4s;

    a { 
        font-size: 1.5rem;
        margin: 1rem 2rem;
        text-wrap: nowrap;
    }
    div { user-select: none; }
    .divider { flex-grow: 1; }
}

.is-active header{
    border-bottom: 3px solid var(--dividing-color);
}

/*---------------------------- HEADER END ----------------------------*/


/*---------------------------- SECTIONS ----------------------------*/

.section-container {
    width: 64rem;
    justify-self: center;
}

/*---------------------------- INTRO ----------------------------*/


@keyframes blinking {
    0% { border-color: var(--accent); }
    50% { border-color: transparent; }
}

section#intro {
    height: 100vh;
    padding-bottom: 20vh;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: default;

    .intro-image {
        border-radius: 50%;
        margin-right: 2vw;
    }

    .title-container:hover *{ color: var(--accent); }
    .title-label {
        margin-right: 2px;
        padding-right: 2px;
        border-right: 3px solid var(--accent);
        animation: blinking 1000ms infinite;    
    }
}

/*---------------------------- INTRO END ----------------------------*/


/*---------------------------- OVERVIEW ----------------------------*/

section#overview {
    height: 100vh;
    scroll-snap-align: start;
}

/*---------------------------- OVERVIEW END ----------------------------*/


/*---------------------------- PROJECTS ----------------------------*/

section#projects {
    gap: 5rem;

    .project-showcase {
        background-color: var(--secondary-bgc);
        border-top: var(--dividing-color) 2px solid;
        border-bottom: var(--dividing-color) 3px solid;        
            
        box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.15),
                    0 0.5rem 1rem 0 rgba(0, 0, 0, 0.15);
        transition: box-shadow 0.6s ease-out;

        &:hover {
            box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.4),
                        0 1rem 2rem 0 rgba(0, 0, 0, 0.4);
        }

        .carousel {
            height: 34rem;
            width: 100%;
            background-image: linear-gradient(135deg, var(--accent), black, var(--accent));
        }

        .project-poster {
            top: 0;
            width: 100%;
            min-height: 25rem;
            max-height: 50rem;
            object-fit: cover;
        }

        .project-info {
            border-top: 0.5rem solid var(--accent);
            padding: 1rem 2rem;
            cursor: pointer;

            .slider {
                border-bottom: var(--dividing-color) 4px solid;
                padding-bottom: 0.5rem;
            }

            .project-tag-container {
                padding-top: 0.5rem;
                flex-wrap: wrap;
                width: 100%;
                justify-content: flex-start;
                gap: 0.5rem;

                 span {
                    padding: 0.5rem 1rem;
                    
                    user-select: none;

                    font-weight: lighter;
                    
                    background-color: #f2ebe2;
                    border-top-right-radius: 0.5rem;
                    border-bottom: 2px solid var(--accent);
                    border-right: 2px solid var(--dividing-color);

                    transition: color 0.3s;
                    &:hover {
                        color: var(--accent);
                    }
                }
            }

            p {
                padding-top: 0.5rem;
            }
            
        }
    }
}

/*---------------------------- PROJECTS END ----------------------------*/


/*---------------------------- SECTIONS END ----------------------------*/


/*---------------------------- FOOTER ----------------------------*/

footer {
    height: 80vh;
    width: 100%;
    
    background-color: var(--accent);
    z-index: 1;

    border-top: var(--dividing-color) 3px solid;

    position: relative;

    * {
        color: var(--title-color);
    }

    .higher-footer {
        background-color: var(--accent);
        height: 40%;
    }

    .footer-bar-wrapper {
        position: relative;
        padding: 1rem 24rem;
        justify-content: space-between;
        align-items: center;
    }

    .contact-wrapper *{
        margin: 0;
        font-size: 1.2rem;
        font-weight: 100;
        height: fit-content;
        flex-shrink: 1;
    }

    .to-top {
        position: absolute;
        left: 0;
        overflow: hidden;
        align-items: center;
        justify-content: center;

        height: 150%;
        width: 5rem;
        padding: 1rem 0.6rem;
        margin-left: 1rem;
        margin-bottom: 5rem;

        border: none;
        border-top: var(--accent) 5px solid;
        border-left: var(--accent) 2px solid;
        border-right: var(--accent) 2px solid;


        border-radius: 1rem;
        background-color: var(--dividing-color);



        svg {
            position: absolute;
            transform: translateY(10rem);
            transition: transform 0.3s;
            transition-delay: 0.1s;
        }

        p {
            position: absolute;
            color: var(--title-color);
            font-size: 1rem;
            font-weight: 600;

            transition: 
                color 0.1s,
                transform 0.3s;
        }
    }

    .to-top:hover {
        cursor: pointer;

        svg {
            transform: translateY(0);
        }

        p {
            color: var(--accent);
            transform: translateY(-10rem);
        } 
    }

    .socials-bar {
        height: auto;
        justify-content: flex-end;
        align-items: center;

        gap: 1rem;

        a {
            width: 4rem;
            height: 4rem;

            background-color: rgba(255, 255, 255, 0.507);
        }

        a:hover {
            background-color: white;
            cursor: pointer;
        }
    }

    .lower-footer {
        background-color: #a7593f;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        flex-grow: 1;

        img {
            max-height: 24rem;
            object-fit: contain;
        }
    }
}

/*---------------------------- FOOTER END ----------------------------*/


/*---------------------------- TEMP / OLD ----------------------------*/

.sep {
    height: 150vh;
}

.side-menu {
    flex-direction: column;
}

.side-menu .side-menu-header {
    transform: translateX(-50px);
    transition: transform, 0.6s;
}
.side-menu.is-active .side-menu-header {
    transform: translateX(0px);
}


.side-menu .side-menu-item {
    transform: translateX(-50px);
    
    transition: transform, 0.6s, ease-out;
    transition-delay: 0.2s;
}

.side-menu.is-active .side-menu-item {
    transform: translateX(0px);
}