@font-face {
    font-family: Roboto Mono;
    letter-spacing: -10px;
    src: url('RobotoMono-Regular.ttf');
}
:root{
    color-scheme: light dark;
    overscroll-behavior: none;
    font-family: 'Roboto Mono', Helvetica, Calibri, sans-serif;
    --page-header-height: 8rem;
    --nav-bar-height: 3rem;

    --nav-bar-margin: 6rem;
    --about-section-min-height: 10rem;
    --about-img-width: 30%;
    --about-img-vertical-height: 14rem;

    /*COLORS*/
    color: light-dark(black, white);
    --body-background: #222222;
    --main-background: light-dark(#f5f5f5, #222222);
    --header-background: linear-gradient(90deg, #2a7b9b 0%, #57c785 70%, #53edaa 100%);
    --nav-bar-background: light-dark(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5));
    
    --about-section-background: light-dark(#e9e4ff, #29253a);
    --about-section-img-background: light-dark(#cfc4ff, #201e3b);

    --project-background: light-dark(#e4f3ff, #3d3d3d);
    --project-border-hover: light-dark(#3d3d3d, #727272);
    --project-img-background-color: light-dark(#a4c4d1,#226580);
    --nav-bar-link-color: light-dark(#0000FF, #b3e7ff);
    --link-color: light-dark(#0000FF, #58c9fd);
}
#nav-bar a {color: var(--nav-bar-link-color)}
a {color: var(--link-color)}

@media (prefers-color-scheme: light) {
    .icon, .project-waveform {filter: invert(1);}
}

@media screen and (max-width: 800px) {
    #about-wrapper {
        flex-flow: column-reverse;
    }
    #about-img {
        height: var(--about-img-vertical-height) !important;
        min-height: var(--about-img-vertical-height) !important;
    }
    .project {
        flex-flow: column-reverse;
    }
    .project-img-wrapper {
        width: 100% !important;
        height: 20rem;
    }
}

body {
    font-size: 0.9rem;
    letter-spacing: -0.02rem;
    background-color: var(--body-background);
    margin: 0;
    overscroll-behavior: none;
}
body > * {
    margin: 0 1rem !important;
    
}
#page-header {
    position: relative;
    height: var(--page-header-height);
    background: var(--header-background);
    display: flex; align-items: flex-end;
    border-bottom: 3px solid black;
}
#name {
    position: absolute;
    width: 100%;
    bottom: var(--nav-bar-height);
    height: calc(var(--page-header-height) - var(--nav-bar-height));
    line-height: calc(var(--page-header-height) - var(--nav-bar-height));
    font-size: max(1.6vw, 1.4rem);
    font-weight: bold;
    text-align: center;
    color: white;
    background-color: #2222223f;
}
#nav-bar {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: 0.5rem 7%;
    height: var(--nav-bar-height);
    background-color: var(--nav-bar-background);
    display: flex; align-items: center;
}   
    #nav-path {
        display: flex; align-items: center; gap: 1rem;
    }
    .nav-location {
        letter-spacing: normal;
        opacity: 0.7;
    }
    .current-page {
        font-weight: 600;
        opacity: 1;
    }
        #home-button {
            height: 2rem;
            display: flex; align-items: center;
            gap: 0.5rem
        }
            #home-button-img {
                height: 1.8rem;
                object-fit: contain;
            }
    #contact-info-box {
        margin-left: auto;
        display: flex; gap: 3vw;
    }   
        #contact-info-box > * {
            display: flex; align-items: center; gap: 0.4rem;
        }
        #contact-info-box img {
            height: 1.5rem;
            object-fit: contain;
        }

#main-wrapper {
    height: calc(100vh - var(--page-header-height));
    background-color: var(--main-background);
    overflow: scroll;
    display: flex; flex-flow: column; align-items: center;
}
#main {
    width: 100%;
    max-width: 1100px;
    min-height: 120vh;
    padding: 1rem 0;
}
    #about-wrapper {
        height: fit-content;
        min-height: var(--about-section-min-height);
        background-color: var(--about-section-background);
        display: flex;
    }
        #about{
            display: flex; flex-flow: column;
        }   
        #about-animation {
            height: 1rem;
        }
            #about-text{
                margin-top: auto;
                padding: 1rem 2rem;
                flex-grow: 1;
                line-height: 1.4rem;
            }
        #about-img { 
            flex-basis: var(--about-img-width);
            min-width: 15rem;
            min-height: var(--about-section-min-height);
            background-color: var(--about-section-img-background);
        }
    #project-list {
        margin: 4rem 2rem;
        padding-bottom: 10rem;
        display: flex; flex-flow: column;
        gap: 3rem;
    }
        .project {
            height: fit-content;
            width: 100%;
            background-color: var(--project-background);
            display: flex;
            box-shadow: -0.3rem 0.3rem black;
            border: 0.18rem solid var(--project-background);
            transition: 0.3s box-shadow, 0.3s translate, 0.3s border-color;
        }
        .project:hover {
            border-color: var(--project-border-hover);
            box-shadow: -0.5rem 0.5rem black;
            translate: 1px 1px;
            transition: 0.1s box-shadow, 0.1s translate, 0.1s border-color;
        }
            .project-info {
                position: relative;
                display: flex; flex-direction: column;
                flex-grow: 1;
                padding: 0.6rem;
                line-height: 1.4rem;
            }
            .project-info ul {
                margin-top: 1.2rem;
            }
            .project-info li {
                line-height: normal;
                margin-bottom: 0.8rem;
            }
                .project-title-wrapper{
                    display: flex; gap: 1rem; align-items: baseline;
                    margin-bottom: 0.5rem;
                }
                    .project-title {
                        font-size: 1.4rem;
                        font-weight: 600;
                        letter-spacing: -0.04rem;
                    }
                    .project-date-range {
                        opacity: 0.65;
                        font-size: 0.88rem;
                    }
                .project-description {
                    padding: 0.8rem 1.2rem;
                }
                .project-links {
                    margin-top: auto;
                    margin-left: 1.2rem;
                    margin-right: 1.2rem;
                    display: flex; align-items: center;
                    gap: 2rem;
                }
                    .project-read-more {
                        margin-left: auto !important;
                    }
                        .project-waveform {
                            visibility: hidden;
                            height: 2.2rem;
                            object-fit: contain;
                        }
                        .project:hover .project-waveform {
                            visibility: visible;
                        }
            .project-img-wrapper {
                position: relative;
                flex-shrink: 0;
                width: 30%;
                min-height: 11rem;
                background-color: var(--project-img-background-color);
                overflow: none;
            }
            .project-img {
                width:100%; height:100%;
                object-fit: cover;
                box-sizing: border-box;
                border: 2px solid var(--main-background);
            }