/* Main Configuration */
@layer configuration {
*,*::before,*::after {
    box-sizing      : border-box;
    padding         : 0;
    margin          : 0;
    background      : none;
    text-decoration : none;
    outline         : none;
    font-family     : inherit;
    font-size       : inherit;
    line-height     : inherit;
    font-weight     : inherit;
    color           : inherit;

    /* Disable double tap to zoom */
    touch-action : manipulation;

    /* Fix the antialias when needed */
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
    font-feature-settings   : "onum", "kern", "liga", "clig", "calt";

    /* Global Transitions */
    transition-delay           : 0ms;
    transition-duration        : 150ms;
    transition-property        : none;
    transition-timing-function : ease-out ;
}
}
@layer configuration {

@font-face {
    font-family : "G";
    src         : url('fonts/Geist[wght].woff2') format("woff2");
    font-weight : 100 900;
    font-style  : normal;
}

@font-face {
    font-family : "GM";
    src         : url('fonts/GeistMono[wght].woff2') format("woff2");
    font-weight : 100 900;
    font-style  : normal;
}


:root {
    
    /* Colors */
    --bg       : #111;
    --text     : #ccc;
    --text-alt : #666;
    --border   : #222;
    --brand    : aqua;

    /* Font Settings */
    --font-family : GM, sans-serif;
    --font-size   : 12px;
    --font-height : 20px;
    --font-weight : 450;

    /* Set the defaults */
    font-size   : var(--font-size);
    line-height : var(--font-height);
    font-family : var(--font-family);
    font-weight : var(--font-weight);
    background  : var(--bg);
    color       : var(--text);
}

body {
    display               : grid;
    grid-template-columns : 1fr;
    grid-template-areas   : "opening" "header" "about" "portfolio" "footer";

    @media (width > 750px) {
        grid-template-columns : 1fr 1fr;
        grid-template-areas   : "opening opening" "header about" "footer about" "portfolio portfolio";
    }

    @media (width > 1000px) {
        grid-template-columns : auto 2fr 2fr;
        grid-template-areas   : "opening opening opening" "header about portfolio" "footer about portfolio" ". about portfolio";
    }

    @media (width > 1300px) {
         grid-template-columns : 1fr 2fr 3fr;
    }

    @media (width > 1600px) {
        grid-template-columns : 2fr 3fr 5fr;
    }

}
}
@layer configuration {
/* Content Goes Here */
}/* Global Settings *//* Content Goes Here */
.column {
    border-top : 1px solid var(--border);
    border-right : 1px solid var(--border);
    background : var(--bg);
    z-index: 10;
    transform: translate3d(0px, 0px, 0px);
}
.column.portfolio {
    border-right : unset;
}/* UI Elements *//* The Opening background video */
.opening {
    grid-area    : opening;
    position     : sticky;
    top          : 0;
    aspect-ratio : 1;
    width        : 100%;

    @media (width > 750px) {
        aspect-ratio : unset;
        height       : 50svh;
    }

    &::after {
        content : "";
        position : absolute;
        inset : 0;
        background: var(--bg);
        backdrop-filter: blur(999px);
        opacity: .90;
    }

}
.opening-video {
    object-fit      : cover;
    object-position : top center;
    width           : 100%;
    height          : 100%;
    display         : block;
}/* Header Section */
.header {
    display      : block;
    padding      : 1.5rlh;
    grid-area    : header;
    aspect-ratio : 1;

    @media (width > 750px) {
        aspect-ratio: unset;
    }

    @media (width > 1000px) {
        height   : 50svh;
        position : sticky;
        top      : 0;
    }

    a {
        color : var(--text-alt);
        &:hover {
            color : var(--brand);
        }
    }

}
h1 {
    font-weight : 650;
    color : white;
}
.about {
    position   : relative;
    border-top : 1px solid var(--border);
    padding : 1.5rlh;
    grid-area : about;
    min-height : 50svh;

    @media (width > 1000px) { 
        height     : 100svh;
        position   : sticky;
        top        : 0;
        overflow: auto;
    }

    p:not(:last-child) {
        margin-bottom : 1rlh;
    }

    a {
        font-weight : 550;
        color : white;
        text-decoration: underline;
        &:hover {
            color : var(--brand);
        }
    }
}
.portfolio {
    border-top : 1px solid var(--border);
    padding    : 0;
    grid-area  : portfolio;

    @media (width > 1800px) {
         display : grid;
         grid-template-columns: 1fr 1fr;
    }
}
.project {
    padding       : 1.5rlh;
    border-bottom : 1px solid var(--border);
}
@media (width > 1800px) {
    .project:nth-child(odd) {
        border-right : 1px solid var(--border);
    }
}
.project-url {
    display : block;
    position : relative;
    aspect-ratio: 1680/1050;
    &:hover::after {
        opacity: 0.75;
    }

    &::after {
        content: "VISIT [ → ]";
        position : absolute;
        inset : -1.5rlh;
        place-content: center;
        text-align: center;
        background: #111;
        transition: opacity 500ms;
        opacity: 0;
        color : white;
        font-weight: 550;

    }

}
.project-screenshot {
    display    : block;
    width      : 100%;
    height     : auto;
    margin     : auto;
    transition : filter 500ms ease-in-out;
}
.project-info {
    margin-top : 1.5rlh;
    a {
        font-weight : 550;
        color : white;
        text-decoration: underline;
        &:hover {
            color : var(--brand);
        }
    }
}/* Silence is golden *//* Footer */
.footer {
    grid-area : footer;
    border-top : 1px solid var(--border);
    padding : 1.5rlh;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    aspect-ratio: 1;
    color: var(--text-alt);

    @media (width > 750px) {
        aspect-ratio: unset;
        justify-content: flex-start;
    }

    @media (width > 1000px) { 
        position : sticky;
        top      : 50svh;
        height   : 50svh;
    }
}/* Reusable Components *//* Content Goes Here */
.img {
    display : block;
    width   : 100%;
}