/* ===================================== GLOBAL ===================================== */

:root{
    --text-color:rgb(244, 243, 240);

    --ts-color: rgba(229, 229, 226, 0.2);
    --text-shadow: 0.12rem 0.12rem 0.1rem var(--ts-color); /* offset-x | offset-y | blur-radius | color */
    /*
    --ts-pos: 0.3rem;
    --ts-neg: -0.3rem;
    --ts-blur: 0.5rem;
    --text-shadow: var(--ts-pos) var(--ts-pos) var(--ts-blur) var(--ts-color), var(--ts-pos) var(--ts-neg) var(--ts-blur) var(--ts-color), var(--ts-neg) var(--ts-pos) var(--ts-blur) var(--ts-color), var(--ts-neg) var(--ts-neg) var(--ts-blur) var(--ts-color), 0rem var(--ts-pos) var(--ts-blur) var(--ts-color), 0rem var(--ts-neg) var(--ts-blur) var(--ts-color), var(--ts-pos) 0rem var(--ts-blur) var(--ts-color), var(--ts-neg) 0rem var(--ts-blur) var(--ts-color);
    */

    --wi-color: rgba(1, 1, 1, 0.2);
    --wi-pos: 0.3rem;
    --wi-neg: -0.3rem;
    --wi-blur: 0.8rem;
    --work-item-link-text-shadow: var(--wi-pos) var(--wi-pos) var(--wi-blur) var(--wi-color), var(--wi-pos) var(--wi-neg) var(--wi-blur) var(--wi-color), var(--wi-neg) var(--wi-pos) var(--wi-blur) var(--wi-color), var(--wi-neg) var(--wi-neg) var(--wi-blur) var(--wi-color), 0rem var(--wi-pos) var(--wi-blur) var(--wi-color), 0rem var(--wi-neg) var(--wi-blur) var(--wi-color), var(--wi-pos) 0rem var(--wi-blur) var(--wi-color), var(--wi-neg) 0rem var(--wi-blur) var(--wi-color);

    --box-shadow-color: rgba(59, 59, 59, 0.238);
    --box-shadow: 0.1rem 0.1rem 0.8rem 0rem var(--box-shadow-color); /* HORIZONTAL VERTICAL BLUR SPREAD COLOR */

    --background-color-1: #434343;
    --background-color-2: #000000;
    --background-gradient-1: linear-gradient(180deg, var(--background-color-1) 0%, var(--background-color-2) 100%);

    --border-width: 0.1rem;
    
    --download-color: rgb(25, 33, 126);
    --download-hover-color: rgb(9, 15, 79);

    --link-color: var(--text-color);
    --link-hovor-color: rgb(111, 113, 235);
    --link-active-color: rgb(52, 53, 144);
    
    --name-font-size: 5.2rem;
    --career-font-size: 2.2rem;
    --resume-font-size: 2.2rem;
    --title-font-size: 2rem;
    --description-font-size: 1.7rem;
    --work-item-font-size: 1.6rem;
    --download-button-font-size: 1.5rem;
    --photography-title-font-size: 2.2rem;

    /* [Weight: "wght" 1-1000] [Width: "wdth" >0%] [Italic: "ital" 0-1] [Slant: "slnt" -90-90] [Optical Size: "opsz" 8-144] [Grade: "GRAD" 88-150]  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide */
    --font-variation-regular: "wght" 400, "opsz" 0;
    --font-variation-bold: "wght" 700, "opsz" 0;
    --font-family-regular: "Font-Regular", Arial, sans-serif;
    --font-family-bold: "Font-Bold", Arial, sans-serif;
}

@font-face {
    font-family: "Font-Regular";
    src: url("../fonts/Avenir/AvenirLTStd-Roman.otf") format("opentype"), url("../fonts/Google_Sans/ProductSans-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Font-Bold";
    src: url("../fonts/Avenir/AvenirLTStd-Heavy.otf") format("opentype"), url("../fonts/Google_Sans/ProductSans-Bold.ttf") format("truetype");
}

html{
    font-size: 62.5%;
    scrollbar-width: thin;
}

body{
    width: 100%;
    height: min-content;
    min-height: 100vh;
    margin: 0rem;
    border: 0rem;
    padding: 0rem;
    display: flex;
    box-sizing: border-box;
}

p{
    display: inline;
    text-align: center;
    margin: 0rem;
    border: 0rem;
    padding: 0rem;
}

a:link, a:visited, a:hover, a:active{
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.title{
    font-size: var(--title-font-size);
    font-family: var(--font-family-bold);
    font-variation-settings: var(--font-variation-bold);
    text-shadow: var(--text-shadow);
}

.description{
    line-height: 2.2rem;
    font-size: var(--description-font-size);
    font-family: var(--font-family-regular);
    font-variation-settings: var(--font-variation-regular);
    text-shadow: var(--text-shadow);
}

.link{
    width: min-content;
    text-wrap: nowrap;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.link:link{
    color: var(--link-color);
}

.link:hover{
    color: var(--link-hovor-color);
}

.link:active{
    color: var(--link-active-color);
}







/*===================================== BACKGROUND =====================================*/

html, .specific-popup-page{
    /*   https://www.toptal.com/designers/subtlepatterns/   http://backgroundhost.com/   https://heropatterns.com/   */
    /*   https://webgradients.com/   */
    /*   background: var(--background-gradient-1);   */
    background-image: url("../images/backgrounds/mamba_brightest.png");
    background-size: auto;
    background-attachment: fixed;
    background-color: rgb(0, 0, 0);
}







/* ===================================== DESKTOP/MOBILE ===================================== */

@media screen and (min-aspect-ratio: 1/1) /* DESKTOP */
{
    body{
        flex-direction: row;
    }

    .nameplate{
        width: 40%;
        padding: 0rem 8vw 0rem 22vw;
        align-items: center;
        position: sticky;
        z-index: 1;
        top: 0;
    }

    .introduction{
        width: 60%;
        padding: 10vh 22vw 10vh 8vw;
        align-items: baseline;
    }
    
    .description{
        text-align: left;
    }

    .contact-row{
        justify-content: baseline;
    }

    .programming-item{
        align-items: baseline;
    }

    .art-item{
        align-items: baseline;
    }

    .electronics-item{
        align-items: baseline;
    }

    .specific-popup-page{
        width: min(100%, 100rem);
        height: 90%;
    }

}


@media screen and (max-aspect-ratio: 1/1) /* MOBILE */
{
    body{
        flex-direction: column;
    }
    
    .nameplate{
        padding: 30vh 2rem 20vh 2rem;
        align-items: center;
    }

    .introduction{
        padding: 0rem 2rem 20vh 2rem;
        align-items: center;
    }
    
    .description{
        text-align: center;
    }

    .contact-row{
        justify-content: center;
    }

    .programming-item{
        align-items: center;
    }

    .art-item{
        align-items: center;
    }

    .electronics-item{
        align-items: center;
    }

    .specific-popup-page{
        width: 100%;
        height: 80%;
    }

}