:root{
    --body-ff: Quicksand, sans-serif;
    --heading-ff: Blinker; 
    --body-background: hsl(0, 0%, 7%);
    --halfpart-background: linear-gradient(
        167deg,
        hsl(0, 0%, 7%) 33%,
        transparent 33%,
        transparent 100% 
        );
    --url-background: url('data:image/svg+xml;utf8,<svg width="80" height="80" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><polygon points="30,0 60,60 0,60" stroke="rgba(114, 92, 173, 0.087)" stroke-width="1.3" fill="none"/><polygon points="0,0 60,0 30,60" stroke="rgba(114, 92, 173, 0.087)" stroke-width="1.3" fill="none"/></svg>');
    --burger-background: rgba(38, 38, 38, 0.67);
    --burger-gap: 7px;
    --burger-width: 35px;
    --burger-height: 2px;
    --burger-marginTop: 32px;
    --burger-marginRight: 40px;
    --burger-animation-timing: 200ms ease-in-out;
    --section-border-color: hsl(0, 0%, 100%); 
    --main-fcolor: hsl(0, 0%, 100%);
    --secondary-fcolor: rgb(228, 222, 215);
    --tertiary-fcolor: rgb(190, 177, 161);
    --quaternary-fcolor: hsl(0, 0%, 62%);
    --navbar-border-bottom: linear-gradient(
        to right, 
        #456882 0%,
        #578FCA 100%
        );
    --main-half-background: linear-gradient(
        to top, 
        #456882 50%,
        transparent 50%
        );
    --projects-background: hsl(228, 10%, 10%);
    --footer-fcolor: #578FCA;
    --fontSizes-3xs: 0.45rem;
    --fontSizes-2xs: 0.62rem;
    --fontSizes-xs: 0.75rem;
    --fontSizes-s: 0.87rem;
    --fontSizes-m: 1rem;
    --fontSizes-l: 1.25rem;
    --fontSizes-xl: 1.50rem;
    --fontSizes-2xl: 1.75rem;
    --fontSizes-3xl: 1.87rem;
    --fontSizes-4xl: 2.25rem;
    --fontSizes-5xl: 2.50rem;
    --fontSizes-6xl: 2.75rem;
    --fontSizes-7xl: 2.87rem;
    --fontSizes-8xl: 3rem;
    --fontWeight-hairline: 100;
    --fontWeight-thin: 200;
    --fontWeight-light: 300;
    --fontWeight-medium: 400;
    --fontWeight-normal: 500;
    --fontWeight-semibold: 600;
    --fontWeight-bold: 700;
    --fontWeight-extrabold: 800;
    --fontWeight-arnold: 900;
    --letterSpacing-tight: -0.05rem;
    --letterSpacing-normal: 0;
    --letterSpacing-wide: 0.1rem;
    --letterSpacing-wider: 0.2rem;
    --letterSpacing-widest: 0.6rem;
    --lineHeight-none: 1;
    --lineHeight-short: 1.25em;
    --lineHeight-normal: normal;
    --lineHeight-tall: 1.50em;
    --lineHeight-taller: 2em;
    --email-icon-color: rgb(226, 80, 75);
    --email-icon-color-hover: rgb(199, 22, 16);
    --linkedin-icon-color: rgb(231, 231, 122);
    --linkedin-icon-color-hover: rgb(202, 202, 95);
    --facebook-icon-color: rgb(71, 140, 230);
    --facebook-icon-color-hover: rgb(24, 119, 242);
    --instagram-icon-color: rgb(241, 172, 241);
    --instagram-icon-color-hover: rgb(238, 130, 238);
    --github-icon-color: rgb(116, 194, 134);
    --github-icon-color-hover: rgb(45, 186, 78);
}

.lightmode{
    --body-background: hsl(0, 0%, 100%);
    --navbar-border-bottom: linear-gradient(
    to right, 
    #EA2F14 0%,
    #FB9E3A 100%);
    --halfpart-background: linear-gradient(
        167deg,
        hsl(0, 0%, 100%) 33%,
        transparent 33%,
        transparent 100% 
        );
    --url-background: url('data:image/svg+xml;utf8,<svg width="80" height="80" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><polygon points="30,0 60,60 0,60" stroke="rgba(114, 92, 173, 0.087)" stroke-width="1.3" fill="none"/><polygon points="0,0 60,0 30,60" stroke="rgba(114, 92, 173, 0.087)" stroke-width="1.3" fill="none"/></svg>');
    --burger-background: rgba(207, 207, 207, 0.67);
    --section-border-color: hsl(0, 0%, 7%);
    --main-half-background: linear-gradient(
    to top, 
    #FB9E3A 50%,
    transparent 50%);
    --footer-fcolor: #EA2F14;
    --email-icon-color: rgb(199, 22, 16); 
    --email-icon-color-hover: rgb(226, 80, 75);
    --linkedin-icon-color: rgb(202, 202, 95);
    --linkedin-icon-color-hover: rgb(231, 231, 122);
    --facebook-icon-color: rgb(24, 119, 242);
    --facebook-icon-color-hover: rgb(71, 140, 230);
    --instagram-icon-color: rgb(238, 130, 238);
    --instagram-icon-color-hover: rgb(241, 172, 241);
    --github-icon-color: rgb(45, 186, 78);
    --github-icon-color-hover: rgb(116, 194, 134);
}

.lightmode > *:not(#projects){
    --main-fcolor: hsl(0, 0%, 7%);
    --secondary-fcolor: hsl(206, 41%, 23%);
    --tertiary-fcolor: hsl(208, 100%, 8%);
}

.lightmode .media-link-white{
    --main-fcolor: hsl(0, 0%, 100%);
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html{
    scroll-behavior: smooth;
}

body{
    background:var(--body-background);
    font-family: var(--body-ff);
    color: var(--main-fcolor);
}

html, body{
    overflow-x: hidden;
}

.site{
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: minmax(0, 1fr);
    background: var(--url-background);
}

#gif-cursor {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: -1;
}

/***** HEADER *****/
.header{
    font-family: var(--heading-ff);
    font-size: var(--fontSizes-l);
    font-weight: var(--fontWeight-normal);
    letter-spacing: var(--letterSpacing-wide);
}

#navbar{
    max-width: 75rem;
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0 auto;
    padding: 30px 0;
    position: fixed;
    left: 0;
    right: 0;
    transition: 0.3s;
    z-index: 999;
}

@media screen and (max-width: 850px){
    .main-contain{
        text-align: start; /* Make navbar responsive */
    }
}

@media screen and (max-width: 770px){
    #navbar{
        flex-direction: row-reverse;
        justify-content: end; /* Create burger navbar */
        align-items: start;
        padding: 0;
    }
}

.navbar-hidden{
    transform: translateY(calc(-1 * 60px));
}

#navbar a{
    color: var(--main-fcolor);
}

.nav-title{
    margin-left: 15px;
}

@media screen and (max-width: 770px){
    .nav-title{
        display: none;
    }
}


@media screen and (max-width: 770px){
    .small-screen{
        transition: translate var(--burger-animation-timing);
        translate: 100%;
        padding-top: calc(var(--burger-width) + var(--burger-height) + 1rem);
        opacity: 0;
    }

    .modal-back{
        transition: translate var(--burger-animation-timing);
        translate: 0;
        padding-top: calc(var(--burger-width) + var(--burger-height) + 1rem);
        opacity: 1;
    }
}

.nav-text ul{
    display: flex;
    flex-direction: row;
}

@media screen and (max-width: 770px){
    .nav-text ul{
        flex-direction: column;
        padding-left: 30px;
        padding-right: 5.2rem;
        padding-top: 20px;
        height: 100vh;
    }

    .nav-text{
        min-height: 100vh;
        background: var(--burger-background);
    }
}

.nav-text li{
    margin-left: 30px;
    list-style: none;
}

@media screen and (max-width: 770px){
    .nav-text li{
        margin-left: 0;
        margin-bottom: 30px;
        margin-right: 30px;
    }
}

label.burger-icon:has(input:checked){
    display: flex;
    width: 35px;
    height: 35px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    padding-bottom: 12px;
    margin-right: 5px;

}

.burger-icon{
    display: flex;
    width: 35px;
    height: 35px;
    cursor: pointer;
    flex-direction: column;
    gap: var(--burger-gap);
    position: absolute;
    top: var(--burger-marginTop);
    right: var(--burger-marginRight);
    width: max-content;
    opacity: 0;
}

@media screen and (max-width: 770px){
    .burger-icon{
        width: 35px;
        opacity: 1;
    }
}

.burger-icon input{
    width: 100%;
    height: 100%;
    appearance: none;
    padding: 0;
    margin: 0;
}

.burger-icon:has(input:checked)::before{
    background: var(--footer-fcolor);
    rotate: 45deg;
}

.burger-icon input:checked{
    opacity: 0;
}

.burger-icon:has(input:checked)::after{
    background: var(--footer-fcolor);
    rotate: -45deg;
}

.burger-icon::before,
.burger-icon::after,
.burger-icon input{
    content: "";
    width: var(--burger-width);
    height: var(--burger-height);
    background: var(--main-fcolor);
    transform-origin: left center;
    transition: opacity var(--burger-animation-timing), width var(--burger-animation-timing), rotate var(--burger-animation-timing), translate var(--burger-animation-timing);
}

.burger-icon::before{
    animation: burgerSlide 1s infinite ease-in-out alternate forwards 200ms;
}

.burger-icon input{
    animation: burgerSlide 1s infinite ease-in-out alternate forwards 400ms;
}

.burger-icon::after{
    animation: burgerSlide 1s infinite ease-in-out alternate forwards 600ms;
}

@keyframes burgerSlide {
    0%{
        width: 100%;
    }
    50%{
        width: 50%;
    }
    100%{
        width: 100%;
    }
}

.nav-options{
    display: flex;
    flex-direction: row;
    gap: 15px;
}

@media screen and (max-width: 770px){
    .nav-options{
        position: absolute;
        top: 30px;
        right: calc(var(--burger-marginRight) + 4rem);
    }
}

.nav-title a,
.nav-text a,
.nav-lang a {
    position: relative;
    text-decoration: none;
    cursor: pointer;
}

.nav-text a::after{
    content: "";
    display: block;
    position: absolute;
    left: 0; 
    bottom: -5px;
    right: 0; 
    height: 3px;
    background: var(--navbar-border-bottom);
    width: 0;
    transition: 0.3s;
    pointer-events: none;
}

.nav-text a:hover::after{
    width: 100%;
}

.nav-lang a.hidden{
    display: none;
}

.nav-btn{
    font-size: var(--fontSizes-xl);
    background: none;
    border: none;
    cursor: pointer;
    transition: 0.15s;
}

.nav-btn:hover{
    transform: scale(1.17);
}

.nav-btn svg{
    fill: var(--main-fcolor);
    margin-right: 15px;
}

.nav-btn svg:last-child{
    display: none;
}

.lightmode .nav-btn svg:first-child{
    display: none;
}

.lightmode .nav-btn svg:last-child{
    display: block;
}
/* */



/***** START - SECTION *****/
#start{
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--main-fcolor);
    background: var(--halfpart-background);
    cursor: default;
    border-bottom: 3px solid var(--section-border-color);
}

.main-container{
    display: flex;
    flex-direction: row;
    gap: 3vw;
}

@media screen and (max-width: 850px) {
    .main-container{
        max-width: 314px;
        width: 100%;
        margin: 0;
        flex-direction: column-reverse;
    }
}

@media screen and (max-width: 375px) {
    .main-container{
        max-width: 280px;
    }
}

@media screen and (max-width: 289px) {
    .main-container{
        max-width: 250px;
    }
}

.author-img{ /* 351px x 496px */
    max-width: 351px;
    width: 100%;
    border: 5px solid var(--main-fcolor);
    border-radius: 25px;
    margin-right: 50px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.author-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
    border: none;
}

@media screen and (max-width: 850px) {
    .author-img{
        width: 85%;
        margin: 0 auto; 
    }
}

@media screen and (max-width: 375px) {
    .author-img{
        margin: 0 auto;
    }
}

@media screen and (max-width: 289px) {
    .author-img{
        width: 85%;
    }
}

.main-heading{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    text-align: center;
    line-height: var(--lineHeight-tall);
    font-size: var(--fontSizes-4xl);
    margin-left: 20px;
}

@media screen and (max-width: 1221px) {
    .main-heading{
        text-align: start;
        justify-content: center;
        font-size: var(--fontSizes-2xl);
    }
}

@media screen and (max-width: 850px) {
    .main-heading{
        font-size: var(--fontSizes-m);
    }
}

@media screen and (max-width: 375px) {
    .main-heading{
        font-size: var(--fontSizes-m);
    }
}

@media screen and (max-width: 289px) {
    .main-heading{
        font-size: var(--fontSizes-s);
        margin-left: 2em;
    }
}

@media screen and (max-width: 247px) {
    .main-heading{
        margin-left: 1.5em;
    }
}

@media screen and (max-width: 199px) {
    .main-heading{
        margin-left: 1em;
    }
}

.next-section-port a{
    color: var(--main-fcolor);
    text-decoration: none;
    font-weight: var(--fontWeight-semibold);
    background: var(--main-half-background);
    font-size: var(--fontSizes-xl);
}

.next-section-port a:last-child{
    background: none;
}

@media screen and (max-width: 375px) {
    .next-section-port a{
        font-size: var(--fontSizes-m);
    }
}
/* */



/***** PROJECTS - SECTION *****/
#projects{
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--body-background);
}

.all-projects-container{
    display: flex;
    flex-direction: column;
    gap: 75px;
    max-width: 1200px;
    width: 100%;
    margin-top: 13em;
    margin-bottom: 50px;
}

@media screen and (max-width: 599px){
    .all-projects-container{
       justify-content: center;
    }
}

.unfocused-fog{
    filter: blur(3px) brightness(80%);
    transform: scale(0.95);
    cursor: default;
}

.personal-project-container{
    display: flex;
    flex-direction: row;
    position: relative;
    background: var(--projects-background);
    border-radius: 25px;
    overflow: hidden;
    border: 1px solid #ffffff23;
    box-shadow: 0 -20px 80px -20px #ffffff1f inset;
    transition: 0.28s;
    margin: 0 15px;
}

@media screen and (max-width: 1003px){
    .personal-project-container{
        flex-direction: column-reverse;
        max-width: 600px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 599px){
    .personal-project-container{
        margin: 0;
    }
}

.justify-content\:space-between{
    justify-content: space-between;
}

.personal-project-container img{ /* 710px x 528px */
    width: 600px;
}

.project-links{
    display: flex;
    flex-direction: row;
    width: 0;
    height: 30px;
    position: absolute;
    gap: 1.3rem;
}

.project-links.numberEven{
    top: 2.5em;
}

@media screen and (max-width: 1003px){
    .project-links.numberEven{
        top: auto;
        bottom: 4em;
        right: 10em;
    }
}

.left-3{
    left: 3rem;
}

.right-8{
    right: 8rem;
}

.top-5{
    top: -5px;
}

.mt-3{
    margin-top: 3rem;
}

.mr-3{
    margin-right: 3rem;
}

.ml-3{
    margin-left: 3rem;
}



.media-link-white{
    color: var(--main-fcolor);
    text-decoration: none;
}

.project-links i{
    display: block;
}

.project-info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
}

@media screen and (max-width: 1003px){
    .project-info{
        margin: 3rem;
    }
}

.align-items\:start{
    align-items: start;
}

.project-info h2{
    font-size: var(--fontSizes-3xl);
}

.project-info p{
    color: var(--quaternary-fcolor);
    margin-right: 30px;
}

.project-programs{
    display: flex;
    flex-direction: row;
    margin-top: 2.5rem;
    gap: 1rem;
}

@media screen and (max-width: 1003px){
    .project-programs.numberEven{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
        gap: 1rem;
    }

    .project-programs.numberOdd{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: auto;
        gap: 1rem;
    }
}

.project-programs h2{
    font-size: var(--fontSizes-l);
    padding: 10px 15px;
    border: 1px solid #403b52;
    border-radius: 10px;
}
/* */



/***** ABOUT ME - SECTION *****/
#about{
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--body-background);
    border-bottom: 3px solid var(--section-border-color);
}

.inside-info-container{
    display: flex;
    flex-direction: column;
    max-width: 1212px;
    color: var(--secondary-fcolor);
    margin: 50px 20px;
}

.about-heading{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--secondary-fcolor);
    font-family: var(--heading-ff);
    letter-spacing: var(--letterSpacing-wide);
    font-size: var(--fontSizes-2xl);
    margin-bottom: 2em;
    font-size: var(--fontSizes-5xl);
}

@media screen and (max-width: 714px) {
    .about-heading{
        font-size: var(--fontSizes-xl);
    }
}

.about-paragraphs{
    display: flex;
    flex-direction: row;
    gap: 50px;
}

.leftsideparagraph{
    width: 70%;
    display: flex;
    flex-direction: column;
    text-align: start;
    font-size: var(--fontSizes-2xl);
    font-weight: var(--fontWeight-normal);
    gap: 1.5rem;
}

@media screen and (max-width: 861px) {
    .leftsideparagraph{
        font-size: var(--fontSizes-xl);
    }
}

@media screen and (max-width: 709px) {
    .leftsideparagraph{
        font-size: var(--fontSizes-l);
    }
}

.rightsideparagraph{
    width: 30%;
    display: flex;
    flex-direction: column;
    text-align: start;
    text-align: start;
    font-size: var(--fontSizes-l);
    color: var(--tertiary-fcolor);
}

@media screen and (max-width: 861px) {
    .rightsideparagraph{
        font-size: var(--fontSizes-m);
    }
}

@media screen and (max-width: 709px) {
    .rightsideparagraph{
        font-size: var(--fontSizes-s);
    }
}

.myTools{
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 30px;
}

.questionsAndAnswers{
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.pQuestion{
    font-weight: var(--fontWeight-normal);
    color: var(--secondary-fcolor);
}

/* */



/***** CONTACTS - SECTION *****/
#contact{
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contact-main-heading{
    width: 100%;
    display: flex;
    flex-direction: column;
    color: var(--secondary-fcolor);
    font-family: var(--heading-ff);
    letter-spacing: var(--letterSpacing-wide);
    font-size: var(--fontSizes-2xl);
    cursor: default;
    margin-bottom: 4em;
}

.contact-heading{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: var(--lineHeight-tall);
}

.heading-container{
    display: flex;
    flex-direction: row;
    gap: 0.2em;
    font-size: 200px;
}

@media screen and (max-width: 830px) {
    .heading-container{
        font-size: 150px;
    }
}

@media screen and (max-width: 640px) {
    .heading-container{
        font-size: 120px;
    }
}

@media screen and (max-width: 530px) {
    .heading-container{
        font-size: 100px;
    }
}

@media screen and (max-width: 445px) {
    .heading-container{
        font-size: 70px;
    }
}

.contact-heading h1{
    letter-spacing: var(--letterSpacing-wider);
    font-weight: var(--fontWeight-arnold);
    text-align: center;
}

.contact-heading-part{
    overflow: hidden;
    height: 16vh;
    display: flex;
}

.contact-heading-part span.first{
    transform: translateY(120%);
}

.contact-heading-part span.firstactive{
    transform: translateY(0%);
    transition: 0.4s ease-out;
}

.contact-heading-part span{
    display: flex;
    line-height: 16vh;
    transform: translateY(220%);
}

.contact-heading-part span.active{
    transform: translateY(0%);
    transition: 0.8s ease-out;
}

.contact-info{
    max-width: 1000px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0 auto;
    color: var(--secondary-fcolor);
    font-family: var(--heading-ff);
    letter-spacing: var(--letterSpacing-wide);
    font-size: var(--fontSizes-2xl);
    word-spacing: 0.25rem;
    cursor: default;
}

@media screen and (max-width: 770px){
    .contact-info{
        max-width: 233px;
        flex-direction: column;
        align-items: start;
        margin: 0 auto;
        gap: 50px;
    }
}

@media screen and (max-width: 707px) {
    .contact-info{
        font-size: var(--fontSizes-xl);
    }
}

.messageme{
    margin-left: 15px;
}

@media screen and (max-width: 770px){
    .messageme{
    margin-left: 0;
}
}

.findme{
    margin-right: 15px;
}

.media-text{
    display: flex;
    overflow: hidden;
    height: 6vh;
}

.media-text span{
    display: flex;
    height: 6vh;
    transform: translateY(100%);
}

.media-text span.active{
    display: flex;
    transform: translateY(0%);
    transition: 0.4s ease-out;
}

.contact-media{
    display: flex;
    flex-direction: row;
    margin-top: 8px;
    gap: 0.60vw;
}

@media screen and (max-width: 640px) {
    .contact-media{
        margin-top: 0;
    }
}

.email a{
    color: var(--email-icon-color);
}

.email a:hover,
.email a:active{
    color: var(--email-icon-color-hover);
}

.linkedin a{
    color: var(--linkedin-icon-color);
}

.linkedin a:hover,
.linkedin a:active{
    color: var(--linkedin-icon-color-hover);
}

.facebook a{
    color: var(--facebook-icon-color);
}

.facebook a:hover,
.facebook a:active{
    color: var(--facebook-icon-color-hover);
}

.instagram a{
    color: var(--instagram-icon-color);
}

.instagram a:hover,
.instagram a:active{
    color: var(--instagram-icon-color-hover);
}

.github a{
    color: var(--github-icon-color);
}

.github a:hover,
.github a:active{
    color: var(--github-icon-color-hover);
}


.contact-media i{
    cursor: pointer;
}
/* */



/***** FOOTER *****/
.footer-text{
    margin-top: 20px;
    padding: 15px 0;
    text-align: center;
    font-weight: var(--fontWeight-medium);
    font-size: var(--fontSizes-s);
    color: var(--main-fcolor);
    background: var(--body-background);
    border-top: 3px solid var(--section-border-color);;
}

.footer-text p{
    margin-top: 7px;
}

.footer-text a{
    color: var(--main-fcolor);
}

.footer-text a:hover,
.footer-text a:active{
    color: var(--footer-fcolor);
}