/* ================ BASE SETUP ================ */



/* root / html / body */

:root{

    /* Light theme dataset */
    --light-color-shell-background: whitesmoke;
    --light-color-frame-background: whitesmoke;
    --light-color-frame-border: black;
    --light-color-text: black;
    --light-color-text-hover: rgb(82, 82, 82);
    --light-sync-background-img: url(../images/SyncBackground_Icon_Dark.png);

    /* Dark theme dataset */
    --dark-color-shell-background: black;
    --dark-color-frame-background: black;
    --dark-color-frame-border: whitesmoke;
    --dark-color-text: whitesmoke;
    --dark-color-text-hover: rgb(82, 82, 82);
    --dark-sync-background-img: url(../images/SyncBackground_Icon_Light.png);

    /* Active variables set */ /* Default is dark */
    --active-color-shell-background: var(--dark-color-shell-background);
    --active-color-frame-background: var(--dark-color-frame-background);
    --active-color-frame-border: var(--dark-color-frame-border);
    --active-color-text: var(--dark-color-text);
    --active-color-text-hover: var(--dark-color-text-hover);
    --active-sync-background-img: var(--dark-sync-background-img);

}




body{

    height: 100vh;
    width: 100vw;

    overflow: hidden;

    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    line-height: 1.5;
}





/* ================ GENERIC AND RE-USABLE RULES ================ */

/* HTML ELEMENTS */

/* Width include padding and border */
*,
*::before,
*::after{
    box-sizing: border-box;
}

/* Images default setup */
img{
    max-width: 100%;
    display: block;
}

/* Anchors default setup (global) */
a{
    color: inherit;
    text-decoration: none;
}



/* MY OWN ELEMENTS */


.references-links{

    display: inline-block;
    text-transform: none;
    transition: 
        color 0.25s ease, 
        transform 0.25s ease;
        
}

.references-links:hover,
.references-links:focus-visible{

    color: var(--active-color-text-hover);
    transform: translateX(3px);

}

.image-link{
    display: inline-block;
    transition: 
        transform 0.25s ease,
        filter 0.25s ease;
}

.image-link:hover,
.image-link:focus-visible{
    transform: scale(1.01);
    filter: brightness(1.05);
}


/*  List Custom Anchors */
.nav-list a,
.projectslist a{ 

    display: inline-block; /* Allow translate movement */
    text-transform: none;

    transition: 
        color 0.25s ease, 
        transform 0.25s ease;

}

.projectslist p{
    font-size: 1.2rem;
    margin-top: 0;
}

.nav-list a:hover,
.nav-list a:focus-visible,
.projectslist a:hover,
.projectslist a:focus-visible{
    /*text-transform: uppercase;*/

    color: var(--active-color-text-hover);
    transform: translateX(-6px);
}



/* Small easter egg ok each SUNDER in text */
/* Idea from 2:44 am  night coding :') */
.SUNDER-text{

    display: inline-block;
    text-transform: none;
    transition: 
        color 0.25s ease, 
        transform 0.25s ease;
}

.SUNDER-text:hover,
.SUNDER-text:focus-visible{

    color:#d4af8c;
    transform: translateX(3px);
    /* Add a cool animation later */
}

.disclaimer{
    text-align: center;
    font-style: italic;
    margin: 3rem 0;
}

.figure-default-style{
    margin: 2.5rem;
}

.figure-default-style img:not(.source-img), /* Used for case when the figcaption is a image maybe I will do better later */
.figure-default-style video{
    width: 100%;
    border: 2px solid var(--active-color-frame-border);
}
/* Figcaption elements should be in figure elements so it's perfect (for me ;)  */
.figcaption-default-style{
    font-style: italic;
    text-align: right;
    margin-top: 0.5rem;
}

/* Using 2 image dark/light superposed so img adapt to the theme*/
/* Did this bc I only had the .png format no JS wanted*/

.superposed-images{
    display: grid;
}


.superposed-images img{ 
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
}


/* THEME SWITCH */

.page-shell:has(#theme-light:checked){
    --active-color-shell-background: var(--light-color-shell-background);
    --active-color-frame-background: var(--light-color-frame-background);
    --active-color-frame-border: var(--light-color-frame-border);
    --active-color-text: var(--light-color-text);
    --active-color-text-hover: var(--light-color-text-hover);
    --active-sync-background-img: var(--light-sync-background-img);
}

.page-shell:has(#theme-light:checked) .dark-theme-img{
    display: none;
}

.page-shell:has(#theme-dark:checked) .light-theme-img{
    display: none;
}






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


/* SHELL */
.page-shell{

    
    height: 100%;
    width: 100%;


    background-color: var(--active-color-shell-background);
    color: var(--active-color-text);

    /*display: flex;
    flex-direction: column;
    align-items: center;*/

    display: grid;
    grid-template-columns: 5% 90% 5%;
    grid-template-rows: 5% 90% 5%;

    grid-template-areas:
    "top-left-corner top-box top-right-corner"
    "left-box main-box right-box"
    "bot-left-corner bot-box bot-right-corner";

    position: fixed;


}

.top-box{
    grid-area: top-box;
}

.bottom-box{
    grid-area: bot-box;
}

.left-box{
    grid-area: left-box;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    position: relative; /*For mask fill */
}

.right-box{
    grid-area: right-box;
}


/* FRAME */
.page-frame{ 

    /*width: 90vw;
    height: calc(100svh - 50px - 50px - 30px); 
    /* 100svh - padding top - padding bottom - height footer approx */

    background-color: var(--active-color-frame-background);
    /*border-color: var(--active-color-frame-border);
    border-style: solid;*/

    /* Left and Right Sides */
    /*display: flex;
    flex: 0 0 auto;*/

    grid-area: main-box;

    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 100%;
    grid-template-areas: 
    "header content";

    padding: 2%;

    position: relative;
    
}

/* INTRO LOADER */

#intro-loader{
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: black;

    opacity: 1;
    visibility: visible;
}


/* Hidding intro element */
#intro-loader.hide{
  animation: hideIntroLoader 1.1s ease forwards;
}

@keyframes hideIntroLoader{
    100%{
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

.intro-content{
    text-align: center;
}

.intro-title{
    opacity: 0;
    transform: translateY(-20px);
    animation: introTitleAnim 3s ease forwards;
    color: white;
    font-size: 2.5rem;
}

@keyframes introTitleAnim{
    70%{
        opacity: 1;
        transform: translateY(0);
    }

    100%{
        transform: translateY(20px);
    }
}


/* PAGE TRANSITION */

/*Fade Out*/
#page-fade-out{
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    justify-content: center;
    align-items: center;


    opacity: 0;
    background-color: black;
    visibility: visible;
    pointer-events: none;
}

#page-fade-out.active{
   animation: transitionFadeOut 0.5s ease forwards;
}

@keyframes transitionFadeIn{
    to{
        opacity: 0;
    }
}

@keyframes transitionFadeOut{
    to{
        opacity: 1;
    } 
}


/* Header animation on transition */
.page-header {
    transform: translateX(-150%);
    transition: transform 0.4s,
                opacity 0.5s;

    opacity: 0;
}

.page-header.open{
    transform: translateX(0%);
    opacity: 1;

}

/* Content animation on transition */

.content-mask{

    position: absolute;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    background-color: var(--active-color-frame-background);

    opacity: 1;
    

}

.content-mask.fade-in{
    animation: transitionFadeIn 0.8s ease forwards;
}

/* Left box animation on transition */

.left-box-mask{
    position: absolute;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    background-color: var(--active-color-frame-background);

    opacity: 1;
    
}

.left-box-mask.fade-in{
    animation: transitionFadeIn 0.8s ease forwards;
}






/*Frame Drawing*/
.frame-overlay{
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    box-sizing: border-box;
    
}

.frame-line {
  fill: none;
  stroke: var(--active-color-frame-border);
  stroke-width: 8;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}







/* Box background for later ... */
/*.visual-background-area{
    z-index: 0;
    width: 100%;
    height: 100%;
}*/




/*---- PAGE HEADER ZONE ( LEFT )---- */

/* Header and Left Box*/
.page-header{ 

    grid-area: header;

    /*Vertical Structure*/
    display: flex;
    flex-direction: column;

    overflow-y: auto;
    scrollbar-width: none;

}

/* Header Title and Subtitle */
.page-title{
    /* Margin & Padding */
    margin: 0;
    padding: 0;

    /* Font */
    font-size: 3rem;
    
}

.page-subtitle{
    /* Margin & Padding */
    margin: 0;
    padding: 0;

    /* Font */
    font-size: 1.3rem;
}

/* Navigation List */
.nav-list{
    list-style: none;
    margin-top: 5vh;
    padding: 0;   

    /* Spacing between nav list elements */
    display: flex;
    flex-direction: column;
    gap: 1.2rem;

    /* Font */
    font-size: 1.5rem;
}





/*---- PAGE CONTENT ZONE ( RIGHT )---- */

/* Right Box */
.page-content{ 
    grid-area: content;
    height: 100%;

    position: relative;
}



/* SUNDER PAGE CONTENT AREA */
.sunder-page-content{
    /* Fit the all page-content space */
    height: 100%;
    width: 100%;

    overflow-y: auto;
    overflow-x: hidden;

    scroll-behavior: smooth;
    scrollbar-width: none;
}

/* -------- PROJECTS CONTENT PARTS --------*/

/* Generic parts */

.project-section{
    margin-bottom: 2rem;
    border-bottom: 0.2rem solid var(--active-color-frame-border);
    text-align: justify;
    overflow-wrap: anywhere;
    word-break: normal;
    padding: 8px;
}

.project-section h2{
    font-style: italic;
    margin-bottom: 40px;
}

.info-box{

    border-width: 2px;
    border-color: var(--active-color-frame-border);
    border-style: solid;
    padding: 4px;

    display: grid;
    grid-template-columns: max-content max-content;
    gap: 0.4rem 1.5rem;

    /*overflow:hidden; /* JS Event scaling the font when overflowing later ? */
    overflow-x: auto;

}






/*=============== SUNDER PAGE SECTIONS ==============*/

/* Overview section */

.overview-grid{
    display: grid;
    gap: 0.8rem;

    grid-template-columns: 1.2fr 0.8fr;
    grid-template-areas:
        "hero hero"
        "quickthemes quickfacts"
        "pitch pitch"
        "context context";
}

.hero{
    grid-area: hero;
    margin-top: 4rem;
    margin-bottom: 6rem;
}

.pitch{
    grid-area: pitch; 
}

.quickthemes{
    grid-area: quickthemes;
}

.quickfacts{
    grid-area: quickfacts;
}

.context{
    grid-area: context;
}


/* My Role section */ 

.contributions-grid{
    display: grid;
    gap: 0.8rem;

    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "server archi"
        "version techart"
}

.server{
    grid-area: server;
}

.archi{
    grid-area: archi;
}

.version{
    grid-area: version;
}

.techart{
    grid-area: techart;
}

.contributions-parts h3{
    text-align: center;
    margin: 0;
}

.contributions-parts p{
    text-align: center;
}


/* Programming & Production Section */

/* Dedicated server part */

.dedicated-server{
    margin: 2rem 0;
    text-align: justify;
}


/* Intro */

/* Grid 1 Start*/
.Miyagi-Intro{
    display: grid;
    grid-template-columns: 100px 0.8fr;
    gap: 20px;
}

/* Grid 2 Start */
.Miyagi-Images{
    display: grid;
    grid-area: 1 / 1;
}

.Miyagi-Images img{
    grid-area: 1 / 1;
}
/* Grid 2 End */

section h2.Miyagi-Sentence{
    grid-area: 1 / 2;
    margin: 0;
    align-self: flex-end;
    justify-self: start;
}
/* Grid 1 End */


/* Transition */

hr{
    margin: 3rem 0;
}



/* Source build part */


.image-and-sourcelogo{
    height: fit-content;

    display: flex;
    flex-direction: column;
}

.short-answer-source-img-superposedbox{
    display: grid;

    align-self: flex-end;
}
.short-answer-source-img{
    grid-area: 1/1;
    justify-self: end;
    
    width: calc(100% / 2);
}

/* Synchronisation part */
.synchronization-sub-part-one{
    background-image: var(--active-sync-background-img);
    background-repeat: no-repeat;
    background-position-y:bottom ;
    background-position-x: right;
}

/* Replication */
.replication-img{
    display: grid;

    grid-template-columns: 0.5fr 0.5fr;

    grid-template-areas: 
    "a b"
    "c b";

    gap: 0.5rem;
}

.replicated-var-img{
    grid-area: a;
}

.rpc-overview-img{
    grid-area: b;
}

.repnotify-img{
    grid-area: c;
}

.replication-img img{
    width: 100%;
    height: 100%;
}

.first-archi-figure{
    max-width: 50%;
    margin-inline: auto;
}



.side-to-side-images{
    display: grid;
    grid-template-columns: 0.5fr 0.5fr;
    grid-template-areas: 
    "a b"
    "c d";
    gap: 0.5rem;
}

.side-to-side-images :nth-child(1){
    grid-area: a;
    height: 100%;
}

.side-to-side-images :nth-child(2){
    grid-area: b;
    height: 100%;
}

.side-to-side-images figcaption{
    grid-area: d;
}




.learning-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "a b"
    "c d"
    "e f";
    gap: 0.5rem;
}

.learning-part{
    text-align: center;

}

.learning-part img{
    width: 25%;
    margin-left: 38%;
}

/* Point on the first child and all elements inside*/
/*.learning-part > :first-child * */

/* Resize the icons images */
/*.learning-part > :nth-child(2){
   width: 25%;
   
}*/


.learning-grid :nth-child(1){
    grid-area: a;

}

.learning-grid :nth-child(2){
    grid-area: b;
    
}

.learning-grid :nth-child(3){
    grid-area: c;
   
}

.learning-grid :nth-child(4){
    grid-area: d;
    
}

.learning-grid :nth-child(5){
    grid-area: e;
   
}

.learning-grid :nth-child(6){
    grid-area: f;

}

.game-poster{
    max-height: 399px;
    max-width: 282px;
    text-align: center;
}


#some-media{
    display: grid;
    grid-template-columns: 1fr 2fr ;
}

.game-images{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.link-box{
    display: flex;
    justify-content: space-evenly;
    gap: 2%;
    align-items: center;

    padding: 4%;
}

.link-box a{
    width: 150px;
    display: inline-block;
    transition: 
        transform 0.5s ease,
        filter 0.25s ease;
}

.link-box a:hover,
.link-box a:focus-visible{
    transform: scale(1.1);
    filter: brightness(0.2);
}






/*=============== HOME PAGE SECTIONS ==============*/

/*---- ABOUT ME SECTION ---- */

.section-aboutme{

    font-size: 1.3rem;
    text-align: justify;

    display: flex;
    align-items: end;
    justify-content: end;

    height: 100%;

}

#aboutme-scroll-box{
    width: 30%;
    height: 100%;

    overflow-y: auto;

    overscroll-behavior: contain;
    scrollbar-width: none;
}

#aboutme-scroll-box:first-child{
        padding-top: 43%;
    }



/*---- PROJECTS SECTION ---- */

/* Projects list content section*/
.section-projectslist{

    height: 100%;
    width: 100%;

    /*position: absolute; /*Relative to page-content box */ /* WTFFFFF*/

}



/* Project list element <ol> */
.projectslist{
    list-style: none;
    font-size: 5rem;
    text-align: right;
    
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/* Project list scroll */
.projects-scroll{
    max-height: 80vh;
    min-height: 75vh;
    
    overflow-y: auto;
    overflow-x: auto;

    overscroll-behavior: contain;
    scrollbar-width: none;
    padding-right: 20px;
}

/*---- INFOS SECTION ---- */


.section-infos{
    height: 100%;
}

.infos-links{

    height: 100%;
    

    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: end;

    scrollbar-width: none;
    overflow-y: auto;
    overscroll-behavior: contain;

    padding-right: 20px;

    gap: 2%;

}

.infos-links a{
    display: flex;
    align-items: end;
    justify-content: end;

    width: 20%;

    transition: 
        transform 0.5s ease,
        filter 0.25s ease;
}

.infos-links a img{
    width: fit-content;
}


.infos-links a:hover,
.infos-links a:focus-visible{
    transform: translateX(-12px);
    filter: brightness(0.4);
}


/*---- CONTACT SECTION ---- */


#contact{
    height: 100%;
}


.contact-links{
    height: 100%;
    

    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: end;

    scrollbar-width: none;
    overflow-y: auto;
    overscroll-behavior: contain;

    padding-right: 20px;

    gap: 2%;
}

.contact-links a{
    font-size: 1.5rem;
    padding-bottom: 2%;

    transition: 
        color 0.25s ease, 
        transform 0.25s ease;
}

.contact-links a:hover,
.contact-links a:focus-visible{
    color: var(--active-color-text-hover);
    transform: translateX(-6px);
}




/*---- HOMEPAGE CONTENT NAVIGATION SETUP ---- */
/* Make section display or hide when 
using the links / targets in the nav header */

/* Base Setup for each content section */
.homepage-content{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /*scroll-margin-top: 70px;*/
    position: absolute;

    transform: translateY(6px);
    transition:
        opacity 250ms ease,
        transform 250ms ease,
        visibility 0s linear 250ms;
}

/* Avoid image link weird hidding movement*/
.homepage-content img{
    visibility: hidden;
}

.homepage-content:target img{
    visibility: visible;
}


/* Content display on target */
.homepage-content:target{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    position: static;

    transform: translateY(0);
    transition:
        opacity 250ms ease,
        transform 250ms ease,
        visibility 0s;
}



/* Display Aboutme by default */
#aboutme{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    position: static;
    transform: translateY(0);
}

/* Hide the aboutme section when traget another one */
.homepage-content:target ~ #aboutme{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
}







/*---- OUTSIDE PAGE CONTENT BOX ---- */


/* Footer */
.page-footer{
    align-self: flex-start; /* Allow to be self align ( normaly align by shell ) */
    margin-left: 1vw;
}

.page-footer p{
    font-size: 0.9rem;
    font-weight: 400;

    margin-top: 0.5rem;
    margin-bottom: 0;
}




#theme-toggle-box{
    /*height: 100%;*/
    display: flex;
    justify-content: end;

}



/* Theme toggle buttons*/
.theme-toggle{
    font-size: 2rem; 

    z-index: 1;
    /*transform: rotate(0.75turn);*/
    writing-mode: sideways-lr;

    /*position: absolute;
    left: calc((100vw - 90vw)/2 - 170px);
    bottom: calc((100vh - 90vh)/2 + 140px);*/

    display: flex;
    justify-content: end;
    gap: 8px;

    /*outline: 1px dashed red;*/
}

.theme-toggle input,
.theme-toggle label{
    cursor: pointer;
}

.theme-toggle input{
    /*position: absolute;*/
    opacity: 0;
}

.theme-toggle label{
    display:flex;
    align-items: center;
    gap: 8px;
    /*user-select: none;*/
}

/* Toggle square ( not real input )*/
.theme-toggle label::before{
    content: "";
    width: 20px;
    height: 20px;
    border: 2px solid currentColor;
    border-radius: 0px;
    display: inline-block;
    box-sizing: border-box;
}

#theme-dark:checked + label::before,
#theme-light:checked + label::before{
  background: currentColor;
}



/* Home link */

.home-link-box{
    font-size: 2rem;

    z-index: 1;

    display: flex;
    align-items: end;
    writing-mode: sideways-lr;
    padding-top: 8%;
}

/*Hide an Display Home button to keep layout in homepage*/
.page-home .page-shell .left-box .home-link-box {
    opacity: 0;
    pointer-events: none;
}

.page-sunder .page-shell .left-box .home-link-box{
    opacity: 1;
    pointer-events: all;
}


.return-home-link{
    transition: 
        color 0.25s ease, 
        transform 0.25s ease;
}

.return-home-link:hover{

    color: var(--active-color-text-hover);
    transform: translateX(-6px);
}

/*Hide the header open button ( MENU ) button for the desktop version */
.header-button-box{
    opacity: 0;
    pointer-events: none;
}


/* @ MEDIA QUERYS */


/* Mobile */ /* Yeah I didn't respected the mobile first approach :'( I was learning, I will do it one day */

@media (max-width: 768px){

    .figure-default-style{
        margin: 0.1rem;
    }   

    



    .page-shell{
        grid-template-columns: 8% 84% 8%;
        grid-template-rows: 5% 90% 5%;
        font-size: 0.8rem;
    }
    
    .page-frame{ 

        grid-area: main-box;

        display: block;
        padding: 4%;

    
    }

    .page-content{
        height: 100%;
    }
   
    .page-header{
        position: fixed;
        background-color:transparent;
        z-index: 5;

        width: min-content;

        /*transform: translateX(-150%);*/
    }

    .header-button-box{
        font-size: 1.2rem;

        z-index: 1;

        display: flex;
        align-items: end;
        writing-mode: sideways-lr;

        transition: 
        color 0.25s ease, 
        transform 0.25s ease;
        cursor: pointer;

        opacity: 1;
        pointer-events: auto;
    }

    #title{
        scroll-margin-top: 600px;
    }


    .header-button-box:hover,
    .header-button-box:focus-visible{
        color: var(--active-color-text-hover);
        transform: translateX(-6px);
    }


    .page-title{
        /* Margin & Padding */
        margin: 0;
        padding: 0;

        font-size: 1.4rem;
        
    }

    .page-subtitle{
        font-size: 0.8rem;
    }

    .nav-list{  
        gap: 0.8rem;
        font-size: 1.2rem;
    }

   


    .theme-toggle{
        font-size: 1.2rem; 
        gap: 4px;
    }

    .theme-toggle label::before{
        width: 15px;
        height: 15px;
    }

        
    /* Home link */

    .home-link-box{
        font-size: 1.2rem;
        margin-top: 20px;
    }

    /* Header animation */
    .page-header {
        transform: translateX(0);
        transition: transform 0.4s,
                    opacity 0.5s;

        opacity: 1;
    }

    .page-header.closed{
        transform: translateX(-150%);
        opacity: 0;

    }





    .page-footer{
        margin-left: 2vw;
    }

    .page-footer p{
        font-size: 0.6rem;
        font-weight: 400;
        margin-top: 0.2rem;
    }

    /*---- ABOUT ME SECTION ---- */

    .section-aboutme{

        font-size: 0.9rem;
        text-align: justify;

        display: flex;
        align-items: end;
        justify-content: end;

        height: 100%;

    }

    #aboutme-scroll-box{
        width: 70%;
        height: 100%;

        overflow-y: auto;

        overscroll-behavior: contain;
        scrollbar-width: none;

    }

    #aboutme-scroll-box:first-child{
        padding-top: 150%;
    }




    /*---- PROJECTS SECTION ---- */

    /* Projects list content section*/
    /*.section-projectslist{

    }*/



    /* Project list element <ol> */
    .projectslist{
        list-style: none;
        font-size: 3rem;
        text-align: right;
        
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
    }

    .projectslist:first-child{
        padding-top: 180%;
    }

    /* Project list scroll */
    .projects-scroll{
        max-height: 100%;
        min-height: 0;
        padding-right: 2%;
    }

    .infos-links a{
        width: 50%;
    }


    .learning-part img{
        width: 50%;
        margin-left: 25%;
    }

    .overview-grid{
        display: grid;
        gap: 0.8rem;

        grid-template-columns: 1.2fr 0.8fr;
        grid-template-areas:
            "hero hero"
            "quickthemes quickthemes"
            "quickfacts quickfacts"
            "pitch pitch"
            "context context";
    }

    .sunder-page-content:first-child{
        padding-top: 180%;
    }

    .intro-title{
        font-size: 1.5rem;
    }


    /* Header animation on transition */
    
    .page-header {
        z-index: 999999; /* Need to fix theses values later xD*/

        transform: translateX(-150%);
        transition: transform 0.4s,
                    opacity 0.5s;

        opacity: 0;
    }

    .page-header.open{
        z-index: 999999; /* Need to fix theses values later xD*/
        
        transform: translateX(0%);
        opacity: 1;

    }
    

    /* Content animation on transition */

    .content-mask{
        padding-top: 180%;
    }

    


}