/* -------------------------------------------------------------*/
/* -------------------------------------------------------------*/
/* -------------------------------------------------------------*/
/* ------------------------ PROPERTIES -------------------------*/
/* -------------------------------------------------------------*/
/* -------------------------------------------------------------*/
/* -------------------------------------------------------------*/


*,
*::before,
*::after 
{
    box-sizing: border-box;
    /*Border-box: Changing how padding is calculated, within a width instead of adding it to a total width*/
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

:root 
{
    /*--ff-primary: 'Poppins', sans-serif;*/
    --ff-primary: 'Helvetica Neue', sans-serif;
    --ff-secondary: 'Helvetica Neue', sans-serif;

    --fw-reg: 300;
    --fw-bold: 900;

    --clr-bg: #FFF;
    --clr-main: rgb(0, 147, 255);


    --fs-tiny: 0.8rem;
    --fs-small: 1rem;
    --fs-body: 1.2rem;
    --fs-heading: 3.5vw;
    --fs-heading-small: 2vw;
    --fs-heading-tiny: 1.2rem;

    --grid-margin: 24px;

}

@media (max-width: 1000px) {
    :root 
    {
    
    
    }
}




















/* -------------------------------------------------------------*/
/* -------------------------------------------------------------*/
/* -------------------------------------------------------------*/
/* ------------------------ GENERAL ----------------------------*/
/* -------------------------------------------------------------*/
/* -------------------------------------------------------------*/
/* -------------------------------------------------------------*/










/* -------------------------------------------------------------*/
/* ------------------------ GENERAL STYLING --------------------*/
/* -------------------------------------------------------------*/


html 
{
    scroll-behavior: smooth;
}


body 
{
    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;

    overflow-x: hidden;
    margin: 0; 
    padding: 0;

    font-family: var(--ff-primary);
    font-size: var(--fs-body);
    font-weight: var(--ff-regular);
    color: var(--clr-main);

    margin: 0;
    line-height: 1.5;
}


img 
{
    display: block;
    max-width: 100%;
    width: 100%;
}


p
{
    margin-top: 0px;
}


h1, h2, h3
{
    font-family: var(--ff-primary);
    font-size: var(--fs-heading);
    font-weight: var(--fw-regular);
    color: var(--clr-main);

    margin: 0;
    line-height: 1.1;
}


h4
{
    font-family: var(--ff-primary);
    font-size: var(--fs-heading-small);
    font-weight: var(--fw-regular);
    color: var(--clr-main);
    
    margin: 0;
    line-height: 1.1;
}


h5
{
    font-family: var(--ff-primary);
    font-size: var(--fs-heading-tiny);
    font-weight: var(--fw-regular);
    color: var(--clr-main);
    
    margin: 0;
    line-height: 1.5;
}


small
{
    opacity: 100%;
}


mark
{
    background-color: var(--clr-bg);
}


strong 
{ 
    font-weight: var(--fw-bold) 
}


.white-mark
{
    color: var(--clr-main);
    background-color: rgba(255, 255, 255, 0.9);
}











/* -------------------------------------------------------------*/
/* ------------------------ GENERAL GRID ------------------------*/
/* -------------------------------------------------------------*/


.columns-2
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 24px;
}

.columns-4
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 24px;
}

.columns-6
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 24px;
}

.columns-8
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 24px;
}

.columns-10
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 24px;
}

.columns-16
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 24px;
}


.columns-45
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 24px;
}

.columns-65
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 24px;
}




/* -------------------------------------------------------------*/
/* ---------------------- GENERAL SPACERS ----------------------*/
/* -------------------------------------------------------------*/

.spacer-xxxxs
{
    height: 3px;
}

.spacer-xxxs
{
    height: 8px;
}

.spacer-xxs
{
    height: 16px;
}

.spacer-xs
{
    height: 20px;
}

.spacer-s
{
    height: 24px;
}

.spacer-m
{
    height: 48px;
}

.spacer-l
{
    height: 96px;
}

.spacer-xl
{
    height: 192px;
}

.spacer-xxl
{
    height: 288px;
}

.spacer-xxxl
{
    height: 384px;
}




/* -------------------------------------------------------------*/
/* ------------------- GENERAL POSITIONING ---------------------*/
/* -------------------------------------------------------------*/


.clip-overflow-x
{
    overflow-x: clip;
}

.page-margin
{
    margin-left: var(--grid-margin);
    margin-right: var(--grid-margin);
}

.padding-left-right
{
    padding-left: var(--grid-margin);
    padding-right: var(--grid-margin);
}

.no-margin
{
    margin: 0px;
}

.no-bottom-margin
{
    margin-bottom: 0px;
}

.hide-overflow
{
    width: 100%;
    overflow: hidden;
}

.position-relative
{
    position: relative;
}

.position-static
{
    position: static;
}








/* -------------------------------------------------------------*/
/* -------------------- GENERAL TYPOGRAPHY ---------------------*/
/* -------------------------------------------------------------*/


.tiny-text
{
    font-size: var(--fs-tiny);
    font-weight: var(--ff-regular);
    color: var(--clr-main);

    margin: 0;
    line-height: 1.5;
}

.small-text
{
    font-size: var(--fs-small);
    font-weight: var(--ff-regular);
    color: var(--clr-main);

    margin: 0;
    line-height: 1.5;
}


.link-no-decoration
{
    text-decoration: none;
    color:var(--clr-main);
}


.link-no-decoration:hover
{
    text-decoration: underline;
}


.no-list-style 
{
    list-style-type: none;
}






/* -------------------------------------------------------------*/
/* --------------------- GENERAL CLASSES -----------------------*/
/* -------------------------------------------------------------*/


.bg-white
{
    background-color: var(--clr-bg);
}



@keyframes fadeInAnimation 
{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.divider
{
    background-repeat: repeat;
    background-position: center center;
    width: 100vw;
    height: 10px;
    z-index: 5;
}

.outline-dotted-top
{
    background-repeat: repeat-x;
    width: 100vw;
    height: 50px;
    z-index: 5;
}

.outline-dotted-middle
{
    background-repeat: repeat-x;
    width: 100vw;
    height: 139px;
    z-index: 5;
}

.outline-dotted-bottom
{
    background-repeat: repeat-x;
    width: 100vw;
    height: 50px;
    z-index: 5;
}




















/* -------------------------------------------------------------*/
/* -------------------------------------------------------------*/
/* -------------------------------------------------------------*/
/* ------------------------ NAVIGATION -------------------------*/
/* -------------------------------------------------------------*/
/* -------------------------------------------------------------*/
/* -------------------------------------------------------------*/


.sticky-nav 
{
    position: sticky;
    width: 100%;
    top: 0;
    padding-top: 16px;
    z-index: 10;
}


.fixed-nav 
{
    position: fixed;
    width: 100%;
    top: 0;
    padding-top: 16px;
    z-index: 10;
}

.nav-left-column
{
    margin-left: 5px;
}


.nav-right-column
{
    margin-left: auto;
    right: 0px;
    height: 28px;
    margin-right: 5px;
}


.nav-item
{
    text-decoration: none;
    outline: var(--clr-main) solid 5px;
    background-color: var(--clr-main);
    color: var(--clr-bg);
    padding: 0 5px;
    transition: outline 0.3s ease, background-color 0.3s ease, color 0.3s ease, padding 0.3s ease;
    border-radius: 3px;
}


.nav-item:hover
{
    outline: rgb(0, 109, 188) solid 5px;
    background-color: rgb(0, 109, 188);
    color: var(--clr-bg);
    padding: 0 5px;
    text-decoration: none;
}


.text-padding-align-with-nav
{
    margin: 0 5px;
}



















/* -------------------------------------------------------------*/
/* -------------------------------------------------------------*/
/* -------------------------------------------------------------*/
/* ----------------------- MAIN PAGE ---------------------------*/
/* -------------------------------------------------------------*/
/* -------------------------------------------------------------*/
/* -------------------------------------------------------------*/










/* -------------------------------------------------------------*/
/* ----------------------- HERO --------------------------------*/
/* -------------------------------------------------------------*/



#hero-pattern-image
{
    position: absolute;
    height: 110vh;
}

#hero-wrapper
{
    position: relative;
    width: 100%;
}


#hero-top-id 
{
    width: 100%;
}



/* Hero image container - outside of content */

#hero-images-outer 
{
    position: absolute;
    overflow: hidden; /* clip wide transforms so no horizontal scroll */
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
}



/* Hero blob image BG */


#hero-image-bg-container
{
    position: absolute;
    z-index: 1;
    margin-top: 24px;
    width: 160%;
    justify-content: center;
    align-items: center;
    display: flex;
  
    background-size: cover;
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: center;

    transition: transform 0.5s ease-out; /* Smooth movement */
    
    opacity: 0;
    animation: scroll-bg 1200s linear infinite, fadeInHeroImageBg 1.5s ease forwards;
}



/* Fade in hero image bg */


@keyframes fadeInHeroImageBg
{
    0%   { opacity: 0; }
    40%   { opacity: 0; }
    100% { opacity: 1; }
}



/* Hero blob image Front */


#hero-image-container
{
    position: absolute;
    z-index: 1;
    margin-top: 24px;
    width: 160%;
    justify-content: center;
    align-items: center;
    display: flex;
  
    background-size: cover;
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: center;

    transition: transform 0.9s ease-out; 

    animation: scroll-bg 1200s linear infinite;

    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}



/* Fade in hero blob image front when loaded */


#hero-image-container.hero-loaded 
{
    opacity: 1;
}



/* Left scroll of hero blob image */


@keyframes scroll-bg {
    0% { background-position: 0 0; }
    100% { background-position: -200vw 0; } /* Moves background left */
}



/* Hero bottom part */


#hero-bottom 
{
    padding-left: var(--grid-margin);
    padding-right: var(--grid-margin);
    padding-top: var(--grid-margin);
    padding-bottom: 96px;
    display: flex;
}


#hero-heading
{
    color: var(--clr-main);
    z-index: 2;
    cursor: default;
}



/* Scrollig text */


#hero-scrolling-container
{
    padding: 24px;
    width: 5000vw;
    cursor: default;
}


#hero-scrolling-background
{
    width: 100vw;
    height: 30px;
    background-color: var(--clr-main);
    position: absolute;
    left: 0px;
    outline: 10px solid var(--clr-main);
}


#hero-scrolling-text > * 
{
    color: var(--clr-bg);
    display: flex;
    flex-wrap: nowrap;
    display: inline-block;
    animation: textScrollAnimation 100s infinite linear;
}


@keyframes textScrollAnimation
{
    to {transform: translateX(-100%); -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%);}
}


@keyframes textScrollAnimationRight
{
    to {transform: translateX(100%); -webkit-transform: translateX(100%); -ms-transform: translateX(-100%);}
}










/* -------------------------------------------------------------*/
/* ------------------ SECTION SCROLLING HEADING ----------------*/
/* -------------------------------------------------------------*/




.row-of-text
{
    position: relative;
    width: 250%;
    height: 28px; 
}


.project-page-row-of-text
{
    position: relative;
    width: max-content;
    height: 28px; 
}


@keyframes textScrollAnimationLeft50
{
    to {transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);}
}


@keyframes textScrollAnimationRight50
{
    to {transform: translateX(50%); -webkit-transform: translateX(50%); -ms-transform: translateX(50%);}
}










/* ----------------------------------------------------------------*/
/* --------------------------- WORK -------------------------------*/
/* ----------------------------------------------------------------*/




#section-work-window
{
    position: relative;
    clip-path: inset(0px 0px 0px 0px);
}


#section-work-content
{
    position: absolute;
    overflow: hidden;
    left: 0;
    z-index: -3;
}










/* ----------------------------------------------------------------*/
/* --------------------- BIG PROJECT CARD -------------------------*/
/* ----------------------------------------------------------------*/




/* Card container */


.big-project-card
{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-color: var(--clr-bg);
    cursor: pointer;

    position: relative;
    overflow: hidden;
}



/* Image on project card */


.big-project-card-image
{
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    top: 50%;
    -ms-transform: translate(-4vw, -50%);
    transform: translate(-4vw, -50%);
    padding-right: 50px;
    transition: transform 0.5s ease-in-out;
}


.big-project-card-image-bg
{
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    top: 50%;
    -ms-transform: translate(-4vw, -50%);
    transform: translate(-4vw, -50%);
    padding-right: 50px;
    transition: transform 0.5s ease-in-out;
}



/* Hover animations */


.big-project-card:hover .big-project-card-image 
{
    transform: translate(0vw, -50%);
}

.big-project-card:hover .big-project-card-image-bg 
{
    transform: translate(1.5vw, -50%);
}

.big-project-card:hover .big-project-card-info-container 
{
    transform: translate(1vw, -50%);
}



/* Text on card */


.big-project-card-info-container
{
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);

    transition: transform 0.5s ease-in-out;
}


.details-on-big-project
{
    position: relative;
    z-index: 3;
}


.project-heading
{
    line-height: 1.16;
    position: relative; 
}



/* Clickable area on card */


.link-area
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 6;
}



/* Scrolling text on card */


.project-card-scroll-container
{
    transform-origin: 0% 0%;
    position: absolute;
    right: var(--grid-margin);
    transform-origin: right top;
    transform: rotate(90deg);
    white-space: nowrap;
}


.project-card-scroll-text  > * 
{
    color: var(--clr-main);
    display: flex;
    flex-wrap: nowrap;
    display: inline-block;
    overflow-x: hidden;

    animation: textScrollAnimation 60s infinite linear;
}








/* -------------------------------------------------------------*/
/* ---------------------- ARTICLES -----------------------------*/
/* -------------------------------------------------------------*/



#article-section
{
    height: 63vw;
    min-height: 1400px;
    background-position: center center;
    background-repeat: repeat;
    background-size: auto;
    position: relative;
}


/* Article card position */


#article-card-1
{
    top: 22vh;
    left: 7vw;
    transform: rotate(-3deg);
}


#article-card-2
{
    top: 33vh;
    left: 40vw;
    transform: rotate(7deg);
}


#article-card-3
{
    top: 37vh;
    right: 7vw;
    transform: rotate(-4deg);
}



/* Hover effect */


#article-card-1:hover 
{
    transform: rotate(-2deg) translateY(-10px);
    filter: drop-shadow(42px 66px var(--clr-main));
}


#article-card-2:hover 
{
    transform: rotate(5deg) translateY(-10px);
    filter: drop-shadow(42px 66px var(--clr-main));
}


#article-card-3:hover 
{
    transform: rotate(-2deg) translateY(-10px);
    filter: drop-shadow(42px 66px var(--clr-main));
}



/* General article card styling */


.article-card
{
    position: absolute;
    text-decoration: none;
    color: inherit;
    background-size: 100% 100%;

    width: 18vw;
    aspect-ratio: 210 / 297;
    min-width: 330px;
    max-width: 6000px;

    filter: drop-shadow(24px 36px var(--clr-main));
    transition: filter 0.4s ease-in-out, transform 0.4s ease-in-out;
}


.article-card h5 {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Elipses for card text beyond 3 rows */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


.article-card-masked-container 
{
    position: relative;
    background-size: 100% 100%;

    padding: 32px;
    background-color: #FFF;
    aspect-ratio: 210 / 297;

    -webkit-mask-image: url('../img/svg/article-card-bg.svg');
    mask-image: url('../img/svg/article-card-bg.svg');
    mask-size: 100% 100%;
}


.article-card-overlay
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}


.small-article-card-image-container
{
    width: 100%; 
    aspect-ratio: 1 / 1;
}


.article-card-image
{
    object-fit: cover; 
    width: 100%; 
    height: 100%
}



/* Link box - more articles */


#article-more-link
{
    bottom: 12vh;
    right: 5vw;
    transform: rotate(3deg);

    position: absolute;
    color: inherit;
    background-color: #FFF;

    padding: 16px;
    outline-style: solid;
    outline-width: 1px;
    outline-color: (--clr-main);

    filter: drop-shadow(18px 24px var(--clr-main));
    transition: filter 0.4s ease-in-out, transform 0.4s ease-in-out;
}


#article-more-link:hover 
{
    filter: drop-shadow(32px 48px var(--clr-main));
    transform: rotate(4deg) translateY(-10px);
}



/* Blob shapes hover effect */


.blob-shape
{
    transition: transform 0.5s ease-in-out;
}


#blob-shape-3:hover 
{
    transform: rotate(1deg) translateY(-10px) translatex(20px);
}


#blob-shape-4:hover 
{
    transform: rotate(1deg) translateY(10px) translatex(-60px);
}


#blob-shape-1:hover 
{
    transform: rotate(1deg) translateY(20px) translatex(-100px);
}


#blob-shape-2:hover 
{
    transform: rotate(1deg) translateY(-20px) translatex(100px);
}



















/* -------------------------------------------------------------*/
/* ------------------------ RESUME -----------------------------*/
/* -------------------------------------------------------------*/



/* Download link */


.download-resume-link
{
    position: absolute;
    right: 0;
    top: 0;
    color: var(--clr-main);
}










/* -------------------------------------------------------------*/
/* ------------------------ FOOTER -----------------------------*/
/* -------------------------------------------------------------*/




.footer-link
{
    color:var(--clr-main);
    text-decoration: none;
}


.footer-link:hover
{
    text-decoration: underline;
}










/* -------------------------------------------------------------*/
/* ------------------------ OVERLAY ----------------------------*/
/* -------------------------------------------------------------*/




#small-screen-overlay
{
    display:none;
    background-color: var(--clr-bg); 
    position: fixed; 
    width: 100vw; 
    height: 100vh; 
    top: 0; 
    left: 0; 
    z-index: 20
}


#small-screen-overlay-info
{
    
    margin-left: 24px; 
    margin-top: 24px;
}




















/* -------------------------------------------------------------*/
/* -------------------------------------------------------------*/
/* -------------------------------------------------------------*/
/* ----------------------- PROJECT PAGE ------------------------*/
/* -------------------------------------------------------------*/
/* -------------------------------------------------------------*/
/* -------------------------------------------------------------*/










/* -------------------------------------------------------------*/
/* ------------------------ HERO -------------------------------*/
/* -------------------------------------------------------------*/




.project-page-hero-media
{
    margin-top: 0px;
    margin-right: 0px;
    height: 90vh;
    background-position: center center;
    background-repeat: repeat;
    background-size: auto;
    position: relative;
}




/* Hero blob images */


#project-blob-1
{
    position: absolute;
    top: 12vh;
    left: 2vw;
    /* Size (width) is set in JS */
    animation: float1 27s infinite ease-in-out;
}


#project-blob-2
{
    position: absolute;
    top: 22vh;
    left: 21vw;
    animation: float2 32s infinite ease-in-out;
}


#project-blob-3
{
    position: absolute;
    top: 1vh;
    right: 30vw;
    animation: float3 38s infinite ease-in-out;
}



/* Animations for hero blob images */


#project-blob-4
{
    position: absolute;
    top: 36vh;
    right: 10vw;
    animation: float4 20s infinite ease-in-out;
}


@keyframes float1 
{
    0% { transform: translate(0, 0); }
    50% { transform: translate(50px, -10px); }
    100% { transform: translate(0, 0); }
}

@keyframes float2 
{
    0% { transform: translate(0, 0); }
    50% { transform: translate(-30px, 20px); }
    100% { transform: translate(0, 0); }
}

@keyframes float3 
{
    0% { transform: translate(0, 0); }
    50% { transform: translate(-66px, -16px); }
    100% { transform: translate(0, 0); }
}

@keyframes float4 
{
    0% { transform: translate(0, 0); }
    40% { transform: translate(30px, -64px); }
    100% { transform: translate(0, 0); }
}



/* Text on top of hero */


.project-page-over-hero-info-section
{
    position: absolute;
    bottom: 16px;
    width: 100%;
}


.project-page-hero-heading
{
    line-height: 1.16;
    width: 90vw;
    position: relative;
}


.project-page-hero-heading-details-background
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
}










/* -------------------------------------------------------------*/
/* ------------------------ IMAGES -----------------------------*/
/* -------------------------------------------------------------*/




/* Image container and text */


.project-page-image-container
{
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    z-index: 2;
}


.project-page-text-over-image
{
    padding: 4px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: var(--clr-bg);
    position: absolute;
    margin-left: 16px;
    bottom: 16px;
    outline-style: solid;
    outline-color: var(--clr-main);
    outline-width: 2px;
}










/* -------------------------------------------------------------*/
/* ------------------------ NAVIGATION -------------------------*/
/* -------------------------------------------------------------*/


/* Project name invisible in menu before scroll */


#project-page-project-name
{
    opacity: 0%;
    z-index: 15;
}




/* Chapters that become sticky */


.project-page-sticky-nav-item
{
    position: sticky; 
    top: 53px; 
    z-index: 3;
}











/* -------------------------------------------------------------*/
/* ------------------------ FEATURES ---------------------------*/
/* -------------------------------------------------------------*/




/* Sticky logo */


#project-page-sticky-logo
{
    opacity: 20%;
    position: absolute;
    top: 24px;
    min-width: 105vw;
    left: 24px;
    z-index: 0;
}




/* First scrolling text */


#project-page-first-scroll-text-container
{
    position: absolute;
    transform-origin: left top;
    transform: rotate(90deg);
    white-space: nowrap;
    z-index: 1;
    cursor: default;
}


#project-page-first-scroll-text  > * 
{
    color: var(--clr-main);
    display: flex;
    flex-wrap: nowrap;
    display: inline-block;
    overflow-x: hidden;

    animation: textScrollAnimation 60s infinite linear;
}




/* Second scrolling text */


#project-page-second-scroll-text
{
    position: absolute;
    transform-origin: left top;
    transform: rotate(90deg);
    white-space: nowrap;
    cursor: default;

}


#project-page-second-scroll-text  > * 
{
    color: rgba(255, 0, 0, 0);
    text-shadow: 0px 0px 8px rgba(0, 147, 255, 0.959);
    opacity: 35%;

    display: flex;
    flex-wrap: nowrap;
    display: inline-block;
    overflow-x: hidden;

    animation: textScrollAnimation 1000s infinite linear;
}













































/* -------------------------------------------------------------*/
/* -------------------------------------------------------------*/
/* -------------------------------------------------------------*/
/* ------------------------ ARCHIVE ----------------------------*/
/* -------------------------------------------------------------*/
/* -------------------------------------------------------------*/
/* -------------------------------------------------------------*/