@font-face {
    font-family: Montserrat;
    src: url("Resources/Fonts/Montserrat/Montserrat-VariableFont_wght.ttf");
}

@font-face {
    font-family: GeneralSans;
    src: url("Resources/Fonts/GeneralSans_Complete/GeneralSans-Variable.ttf");
}

@font-face {
    font-family: Zodiak;
    src: url("Resources/Fonts/Zodiak_Complete/Zodiak-Variable.ttf");
}

@font-face {
    font-family: Boska;
    src: url("Resources/Fonts/Boska_Complete/Boska-Variable.ttf");
}

:root {
    --bar-width: 60px;
    --bar-height: 8px;
    --hamburger-gap: 8px;
    --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
    --foreground-dark: #101010;
    --background-dark: white;
    --foreground-light: #d9d9d9;
    --background-light: #000000;
    --animation-timing: 200ms ease-in-out;
    --toggle-button-size: 40px;

    --transition-time: 1s;
}

body {
    transition: background var(--transition-time), color var(--transition-time);
}
.hamburger-menu {
    --x-width: calc(var(--hamburger-height) * 1.4142135624);

    position: fixed;
    top: 10px;
    right: 10px;
    width: max-content;
    opacity: 50%;
    z-index: 100;
    cursor: pointer;

    display: flex;
    flex-direction: column;
    gap: var(--hamburger-gap);
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
    content: "";
    width: var(--bar-width);
    height: var(--bar-height);
    background-color: var(--background-dark);
    transition: opacity var(--animation-timing), width var(--animation-timing), rotate var(--animation-timing), translate var(--animation-timing), background-color var(--transition-time);

    transform-origin: left center;
}

.hamburger-menu input {
    appearance: none;
    padding: 0;
    margin: 0;
    outline: none;
    pointer-events: none;
}

.sidebar {
    position: fixed;
    top: 0;
    right: -400px;
    transition: right var(--animation-timing), background var(--transition-time), color var(--transition-time);
    width: 400px;
    height: 100vh;
    padding: 0.5rem 2rem;
    padding-top: calc(var(--hamburger-height) + 10px + 1rem);
    z-index: 99;

    background: var(--foreground-dark);
}

.sidebar ul {
    list-style-type: none;
    font-family: GeneralSans;
    font-weight: 200;
    font-size: 1.5em;
    line-height: 70px;
}

.sidebar .dark-mode-btn {
    height: var(--toggle-button-size); 
    width: var(--toggle-button-size); 
    background-color: var(--foreground-dark);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-time), color var(--transition-time);
}

.sidebar i {
    font-size: var(--toggle-button-size); 
    color: var(--background-dark);
}

.hamburger-menu:has(input:checked) + .sidebar {
    right: 0px;
}

.name-section {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    transition: color var(--transition-time);
}

.name-section h1 {
    font-family: Boska;
    letter-spacing: 0.2vw;

    opacity: 100%;
    position: fixed;
    z-index: 90;

    -webkit-animation: name-text linear forwards;
    animation: name-text linear forwards;
    animation-timeline: view();
    animation-range: exit -500px;
}


@keyframes name-text {
    from {opacity: 100%;}
    to {opacity: 15%;}
}

.hide-section {
    -webkit-animation: hide-section linear forwards;
    animation: hide-section linear forwards;
    animation-timeline: view();
}

@keyframes hide-section {
    from {opacity: 15%;}
    to {opacity: 0;}
}

.profile-picture {
    display: flex;
    flex-direction: row;
    position: relative;
    height: 200vh;
}

.profile-picture .prof-pic {
    height: 50%;
    width: 50%;
    max-width: 100%;
    padding: 5px;

    opacity: 10%;
    position: sticky;
    top: 0;
    translate: -100%;
    z-index: 10;

    animation: prof-pic-slide linear forwards;
    animation-timeline: view();
    animation-range-start: cover -300px;
    animation-range-end: contain -600px;
}

@keyframes prof-pic-slide {
    from {translate: -100%; opacity: 0;}
    to {translate: 0%; opacity: 100%;}
}

@keyframes prof-pic-show { /* For narrower devices */
    from {opacity: 10%;}
    to {opacity: 100%;}
}

.profile-picture .right-side {
    position: relative;
    width: 100%;
    height: 100%;
}

.profile-picture .right-side h1 {
    position: absolute;
    padding: 10px;
    transform: translateY(500%);
    opacity: 100%;
    
    font-size: 3.2em;
    font-family: Montserrat;
    letter-spacing: 0;
}

.profile-picture .right-side p {
    position: absolute;
    padding: 10px;
    transform: translateY(500%);
    opacity: 0%;

    font-size: 1.5em;
    font-family: GeneralSans;
    font-weight: 200;

    animation: slide-up-p ease-in forwards;
    animation-timeline: view();
    animation-range-start: cover;
    animation-range-end: 600px;
}

.profile-picture .right-side tr:hover {
    background-color: #0F0F0F;
    transition: background-color 1s;
}

@keyframes slide-up-h1 {
    from {transform: translateY(500%);}
    to {transform: translateY(0%);}
}

@keyframes slide-up-p {
    from {transform: translateY(500%); opacity: 0%;}
    to {transform: translateY(0%); opacity: 100%;}
}

@keyframes slide-up-table {
    from {transform: translateY(100%); opacity: 0%;}
    to {transform: translateY(0%); opacity: 100%;}
}


.profile-picture .right-side .about-yourself {
    height: 24%;
    position: relative;
}

.profile-picture .right-side .about-yourself h1 {
    top: 20px;
    left: 2vw;
    animation: slide-up-h1 ease-in forwards;
    animation-timeline: view();
    
    animation-range-start: cover;
    animation-range-end: 600px;
}

.profile-picture .right-side .about-yourself p {
    top: 25%;
    left: 2vw;
}

.profile-picture .right-side .education {
    position: relative;
    height: 35%;
}

.profile-picture .right-side .education h1 {
    top: 20px; 
    left: 2vw;

    animation: slide-up-h1 ease-in forwards;
    animation-timeline: view();
    animation-range-start: cover;
    animation-range-end: 500px;

}

.profile-picture .right-side .education table {
    position: absolute;
    text-align: left;
    border-collapse: collapse;

    top: 18%;
    left: 2vw;
    width: 90%;
    padding: 10%;
    height: 380px;
    opacity: 100%;

    animation: slide-up-table ease-in forwards;
    animation-timeline: view();
    animation-range-start: cover;
    animation-range-end: 450px;
    z-index: 0;

    font-size: 1.2em;
    font-family: GeneralSans;
    font-weight: 200;
}

.profile-picture .right-side .education tr {
    border: none;
    border-bottom: 0.5px solid #ddd;
    transition: border-bottom var(--transition-time);
}

.profile-picture .right-side .education th, td {
    padding: 2vh;
}

.profile-picture .right-side .achievements {
    position: relative;
    height: 27%;
}

.profile-picture .right-side .achievements h1 {
    top: 10px; 
    left: 2vw;

    animation: slide-up-h1 ease-in forwards;
    animation-timeline: view();
    animation-range-start: cover;
    animation-range-end: 500px;
}

.profile-picture .right-side .achievements p {
    animation: slide-up-p ease-in forwards;
    animation-timeline: view();
    animation-range-start: cover;
    animation-range-end: 500px;
}

.profile-picture .right-side .achievements .achievements-p1 {
    top: 15%;
    left: 2vw;
}

.profile-picture .right-side .achievements .achievements-p2 {
    top: 35%;
    left: 2vw;
}

.profile-picture .right-side .achievements .achievements-p3 {
    top: 60%;
    left: 2vw;
}

.profile-picture .right-side .skills {
    position: relative;
    height: 14%;
}

.profile-picture .right-side .skills h1 {
    top: 10px;
    left: 2vw;

    animation: slide-up-h1 ease-in forwards;
    animation-timeline: view();
    animation-range-start: cover;
    animation-range-end: 600px;
}

.profile-picture .right-side .skills-scroller .skill-list {
    margin: 0;
    padding-inline: 0;
    list-style: none;
}

.profile-picture .right-side .skills-scroller .skill-list li {
    padding: 1rem;
    border-radius: 9px;
    width: max-content;
    text-align: center;
    
    font-family: GeneralSans;
    font-size: 1.3em;
    box-shadow: 0 0.5rem 1rem -0.25rem #090909;
    transition: box-shadow var(--transition-time);
}

.profile-picture .right-side .skills-scroller {
    max-width: 90%;
    left: 5%;
    /* border: 3px solid red; */
    position: absolute;
    transform: translateY(200%);
    opacity: 0%;

    top: 40%;

    animation: slide-up-list ease-in forwards;
    animation-timeline: view();
    animation-range-start: cover;
    animation-range-end: 550px;
}

@keyframes slide-up-list {
    from {transform: translateY(200%); opacity: 0%;}
    to {transform: translateY(0%); opacity: 100%;}
}

.profile-picture .right-side .skills-scroller .scroller__inner {
    padding-block: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.profile-picture .right-side .skills-scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.profile-picture .right-side .skills-scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: skill-scroll 60s linear infinite;
}

@keyframes skill-scroll {
    to {
        transform: translate(-50%);
    }
}

.socials {
    position: relative;
}

.socials h1 {
    position: relative;
    top: 10%;
    margin: auto;
    animation: slide-up-h1 ease-in forwards;
    animation-timeline: view();
    
    animation-range-start: cover;
    animation-range-end: 600px;
}

.socials button {
    position: absolute;
    height: 10vmin;
    width: 10vmin;
    background-color: #161616;
    transition: background-color var(--transition-time);
    border: none;
    cursor: pointer;
}

.socials i {
    font-size: 10vmin;
    color: white;
    transition: color var(--transition-time);
}

.socials .socials-buttons {
    position: relative;
    top: 30%;
    margin: auto;
    height: 11vmin;
    width: 90vmin;
}

.socials .socials-buttons button {
    animation: slide-up-button ease-in forwards;
    animation-timeline: view();
    animation-range-start: cover;
}

.socials .socials-buttons .instagram {
    left: 0%;
    animation-range-end: 350px;
}

.socials .socials-buttons .github {
    left: 22%;
    animation-range-end: 400px;
}

.socials .socials-buttons .email {
    left: 45%;
    animation-range-end: 450px;
}

.socials .socials-buttons .resume {
    right: 22%;
    animation-range-end: 500px;
}

.socials .socials-buttons .linkedin {
    right: 0%;
    animation-range-end: 550px;
}


@keyframes slide-up-button {
    from {transform: translateY(200%); opacity: 0%;}
    to {transform: translateY(0%); opacity: 100%;}
}

/* Light Mode stuff */

.light-mode {
    background-color: #e6e6e6;
    color: black;
}

.light-mode .hamburger-menu::before,
.light-mode .hamburger-menu::after,
.light-mode .hamburger-menu input {
    background-color: var(--background-light);
}

.light-mode .sidebar {
    background: var(--foreground-light);
}

.light-mode .name-section {
    color: #000000;
}

.light-mode .profile-picture .right-side tr {
    border-bottom: 0.5px solid #333333;
}

.light-mode .profile-picture .right-side tr:hover {
    background-color: #d9d9d9;
}

.light-mode .profile-picture .right-side .skills-scroller .skill-list li {
    box-shadow: 0 0.5rem 1rem -0.25rem #c7c7c7;
}

.light-mode a {
    color: black;
}

.light-mode .sidebar .dark-mode-btn {
    background-color: var(--foreground-light);
}

.light-mode .sidebar i {
    color: var(--background-light);
    font-size: calc(var(--toggle-button-size) - 5px);
}

.light-mode .socials button {
    background-color: #e6e6e6;
}

.light-mode .socials i {
    color: black;
}

/* Media sizing stuff */

@media screen and (max-width: 1200px) { /* For narrower devices */
    .profile-picture {
        flex-direction: column;
        height: 300vh;
    }

    .profile-picture .prof-pic {
        position: relative;
        width: 100%;
        height: 50%;
        translate: 0%;

        animation: prof-pic-show linear forwards;
        animation-timeline: view();
        animation-range-start: cover;
        animation-range-end: contain;
    }

    .profile-picture .right-side p {
        font-size: 1.4em;
    }

    .profile-picture .right-side .education table {
        font-size: 1.2em;
    }
    
    .profile-picture .right-side .skills-scroller .skill-list li {
        font-size: 1.2em;
    }

    .socials {
        height: 75vh;
    }
}

@media screen and (max-width: 800px) { /* For even narrower devices */
    .profile-picture .right-side p {
        font-size: 1.2em;
    }

    .profile-picture .right-side .education table {
        font-size: 1em;
    }
    
    .profile-picture .right-side .skills-scroller .skill-list li {
        font-size: 1em;
    }

    .profile-picture .right-side h1 {
        font-size: 2em;
    }
}

@media screen and (max-width: 550px) { /* For even narrower devices */
    .profile-picture .right-side p {
        font-size: 0.9em;
    }

    .profile-picture .right-side .education table {
        font-size: 0.7em;
    }
    
    .profile-picture .right-side .skills-scroller .skill-list li {
        font-size: 0.8em;
    }
    
    .profile-picture .right-side h1 {
        font-size: 1.6em;
    }
}

@media screen and (max-height: 900px) { /* For wide devices */
    .profile-picture .right-side p {
        font-size: 1em;
    }

    .profile-picture .right-side .about-yourself {
        height: 18%;
    }

    .profile-picture .right-side .education {
        height: 45%;
    }

    .profile-picture .right-side .achievements {
        height: 25%;
    }

    .profile-picture .right-side .skills {
        height: 12%;
    }

    .profile-picture .right-side .education table {
        font-size: 0.8em;
    }

    .profile-picture .right-side .education table tr {
        height: 1em;
        padding: 0;
    }

    .profile-picture .right-side .top-row {
        height: 5px;
        padding: 0;

    }
      
    .profile-picture .right-side h1 {
        font-size: 1.6em;
    }
}

@media screen and (max-height: 700px) { /* For wide devices */
    .profile-picture .right-side p {
        font-size: 0.8em;
    }

    .socials .socials-buttons .instagram {
        left: 0%;
        animation-range-end: 300px;
    }
    
    .socials .socials-buttons .github {
        animation-range-end: 350px;
    }
    
    .socials .socials-buttons .email {
        animation-range-end: 400px;
    }
    
    .socials .socials-buttons .resume {
        animation-range-end: 450px;
    }
    
    
    .socials .socials-buttons .linkedin {
        animation-range-end: 500px;
    }
}