:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
  font-feature-settings: "cv01" 1, "zero" 1, "liga" 1, "calt" 1;
  --color-bg1: rgb(0, 0, 0);
  --color-bg2: rgb(0, 0, 0);
  --color1: 18, 35, 125;
  --color2: 107, 74, 255;
  --color3: 100, 100, 255;
  --color4: 220, 5, 20;
  --color5: 80, 47, 122;
  --circle-size: 80%;
  --blending: hard-light;  
}

@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}

/* GRADIENT */

@keyframes moveInCircle {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes moveVertical {
  0% {
    transform: translateY(-50%);
  }
  50% {
    transform: translateY(50%);
  }
  100% {
    transform: translateY(-50%);
  }
}

@keyframes moveHorizontal {
  0% {
    transform: translateX(-40%) translateY(-10%);
  }
  50% {
    transform: translateX(30%) translateY(10%);
  }
  100% {
    transform: translateX(-40%) translateY(-10%);
  }
}


.gradient-bg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  overflow: hidden;
  background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
  top: 0;
  left: 0;
  z-index: -2;
}

  .svgBlur {
    display: none;
  }

  .noiseBg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    mix-blend-mode: darken;
  }

  .gradients-container {
    filter: url(#goo) blur(40px) ;
    width: 100%;
    height: 100%;
  }

  .g1 {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color1), 0.8) 0, rgba(var(--color1), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);

    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);

    transform-origin: center center;
    animation: moveVertical 30s ease infinite;

    opacity: 1;
  }

  .g2 {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color2), 0.8) 0, rgba(var(--color2), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);

    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);

    transform-origin: calc(50% - 400px);
    animation: moveInCircle 20s reverse infinite;

    opacity: 1;
  }

  .g3 {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color3), 0.8) 0, rgba(var(--color3), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);

    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2 + 200px);
    left: calc(50% - var(--circle-size) / 2 - 500px);

    transform-origin: calc(50% + 400px);
    animation: moveInCircle 40s linear infinite;

    opacity: 1;
  }

  .g4 {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color4), 0.8) 0, rgba(var(--color4), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);

    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(50% - var(--circle-size) / 2);
    left: calc(50% - var(--circle-size) / 2);

    transform-origin: calc(50% - 200px);
    animation: moveHorizontal 40s ease infinite;

    opacity: 0.7;
  }

  .g5 {
    position: absolute;
    background: radial-gradient(circle at center, rgba(var(--color5), 0.8) 0, rgba(var(--color5), 0) 50%) no-repeat;
    mix-blend-mode: var(--blending);

    width: calc(var(--circle-size) * 2);
    height: calc(var(--circle-size) * 2);
    top: calc(50% - var(--circle-size));
    left: calc(50% - var(--circle-size));

    transform-origin: calc(50% - 800px) calc(50% + 200px);
    animation: moveInCircle 20s ease infinite;

    opacity: 1;
  }
}










/* LINKS */

.black {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background-color: black;   
    }    



a { 
    color: white;
    text-decoration: none;
}


.col_wedo a,
.col_about a,
.col_contact a {
    color:white ;
    text-decoration: underline;
}




/* HOVERS */

.footer a:hover,
.con1 a:hover,
.con2 a:hover,
.con3 a:hover,
.con4 a:hover,
.col_wedo a:hover,
.col_about a:hover,
.col_contact a:hover,
.current a:hover,
.artworks a:hover,
.visuals a:hover,
.industry a:hover,
.maincredit a:hover, 
.work a:hover,
.art a:hover, 
.credits a:hover,
.text a:hover,
.mail a:hover,
.about a:hover{  
    color: red;}

.colab1 a:hover,
.colab2 a:hover,
.colab3 a:hover,
.colab4 a:hover,
.colab5 a:hover,
.colab6 a:hover,
.colab7 a:hover,
.colab8 a:hover,
.clients a:hover,
.social a:hover{
filter: drop-shadow(0 0 0.5rem white);
}









/* BODY */

body {
    margin-top: 3vw;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}    
    

/* ---------------- SCREEN -------------------------------------- */









/* GRIDS */
.header {
    position:relative;
    top: 3vw;
    display: grid;
    grid-template-columns: 1vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 1vw;
    grid-template-rows: 9vw 13vw 44vw 11vw;
    width: 100vw;
    grid-column-gap: 2vw;
    
    grid-template-areas:
    ". weltraum weltraum weltraum weltraum weltraum weltraum weltraum logo ."
    ". . . . . . . . . ." 
    ". sub sub sub sub sub sub . . ." 
    ". . . . . . . . . ."     
}




.nav {
    position:relative;
    display: grid;
    grid-template-columns: 1vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 1vw;
    grid-template-rows: 1vw 11vw;
    width: 100vw;
    grid-column-gap: 2vw;
    
    grid-template-areas:
    ". line line line line line line line line ."    
    ". current artworks visuals industry dot about mail social ."
        
        
}






.project {
    position:relative;
    display: grid;
    grid-template-columns: 1vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 1vw;
    grid-template-rows: 10vw 1vw 12vw auto 2vw auto 9vw 1vw 5.5vw 5.5vw auto 9vw 5.5vw 11vw;
    width: 100vw;
    grid-column-gap: 2vw;
    padding-bottom: 3vw;

    
    grid-template-areas:    
    ". . . . . . . . . ."
    ". longline longline longline longline longline longline longline longline ."
    ". title title title title title2 title2 title2 flag ."
    ". pic pic pic pic pic pic pic pic ."
    ". . . . . . . . . ."
    ". vid vid vid vid vid vid vid vid ."         
    ". title3 title3 title3 title3 . . . . ."
    ". line3 line3 line3 line3 line line line2 line2 ."    
    ". text text text text art art maincredit maincredit ."
    ". text text text text art art credits credits ."   
    ". text text text text art art credits credits ."
    ". colab1 colab2 colab3 colab4 art art credits credits ." 
    ". . . . . art art credits credits ."
    ". . . . . art art credits credits ."    

    }



.project_longtitle {
    position:relative;
    display: grid;
    grid-template-columns: 1vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 1vw;
    grid-template-rows: 10vw 1vw 12vw auto 2vw auto 9vw 1vw 5.5vw 5.5vw auto 9vw 5.5vw 11vw;
    width: 100vw;
    grid-column-gap: 2vw;
    padding-bottom: 3vw;

    
    grid-template-areas:    
    ". . . . . . . . . ."
    ". longline longline longline longline longline longline longline longline ."
    ". title title title title title title title flag ."
    ". pic pic pic pic pic pic pic pic ."
    ". . . . . . . . . ."
    ". vid vid vid vid vid vid vid vid ."         
    ". title3 title3 title3 title3 . . . . ."
    ". line3 line3 line3 line3 line line line2 line2 ."    
    ". text text text text art art maincredit maincredit ."
    ". text text text text art art credits credits ."   
    ". colab1 colab2 colab3 colab4 art art credits credits ." 
    ". colab1 colab2 colab3 colab4 art art credits credits ." 
    ". . . . . art art credits credits ."
    ". . . . . art art credits credits ."    

    }



.project_cinemascope {
    position:relative;
    display: grid;
    grid-template-columns: 1vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 1vw;
    grid-template-rows: 10vw 1vw 12vw auto 2vw auto 9vw 1vw 5.5vw 5.5vw auto 9vw 5.5vw 11vw;
    width: 100vw;
    grid-column-gap: 2vw;
    padding-bottom: 3vw;


    
    grid-template-areas:    
    ". . . . . . . . . ."
    ". longline longline longline longline longline longline longline longline ."
    ". title title title title title2 title2 title2 flag ."
    ". pic pic pic pic pic pic pic pic ."
    ". . . . . . . . . ."
    ". vidcine vidcine vidcine vidcine vidcine vidcine vidcine vidcine ."         
    ". title3 title3 title3 title3 . . . . ."
    ". line3 line3 line3 line3 line line line2 line2 ."    
    ". text text text text art art maincredit maincredit ."
    ". text text text text art art credits credits ."   
    ". text text text text art art credits credits ."
    ". colab1 colab2 colab3 colab4 art art credits credits ." 
    ". . . . . art art credits credits ."
    ". . . . . art art credits credits ."    

    }


.project_2vids {
    position:relative;
    display: grid;
    grid-template-columns: 1vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 1vw;
    grid-template-rows: 10vw 1vw 12vw auto 2vw auto 9vw 1vw 5.5vw 5.5vw auto 9vw 5.5vw 11vw;
    width: 100vw;
    grid-column-gap: 2vw;
    padding-bottom: 3vw;


    
    grid-template-areas:    
    ". . . . . . . . . ."
    ". longline longline longline longline longline longline longline longline ."
    ". title title title title title2 title2 title2 flag ."
    ". vid2 vid2 vid2 vid2 vid2 vid2 vid2 vid2 ."
    ". . . . . . . . . ."
    ". vid vid vid vid vid vid vid vid ."         
    ". title3 title3 title3 title3 . . . . ."
    ". line3 line3 line3 line3 line line line2 line2 ."    
    ". text text text text art art maincredit maincredit ."
    ". text text text text art art credits credits ."   
    ". text text text text art art credits credits ."
    ". colab1 colab2 colab3 colab4 art art credits credits ." 
    ". . . . . art art credits credits ."
    ". . . . . art art credits credits ."    

    }


.project_3vids {
    position:relative;
    display: grid;
    grid-template-columns: 1vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 1vw;
    grid-template-rows: 10vw 1vw 12vw auto 2vw auto 2vw auto 9vw 1vw 5.5vw 5.5vw auto 9vw 5.5vw 11vw;
    width: 100vw;
    grid-column-gap: 2vw;
    padding-bottom: 3vw;


    
    grid-template-areas:    
    ". . . . . . . . . ."
    ". longline longline longline longline longline longline longline longline ."
    ". title title title title title2 title2 title2 flag ."
    ". vid3 vid3 vid3 vid3 vid3 vid3 vid3 vid3 ."
    ". . . . . . . . . ."
    ". vid2 vid2 vid2 vid2 vid2 vid2 vid2 vid2 ."
    ". . . . . . . . . ."
    ". vid vid vid vid vid vid vid vid ."         
    ". title3 title3 title3 title3 . . . . ."
    ". line3 line3 line3 line3 line line line2 line2 ."    
    ". text text text text art art maincredit maincredit ."
    ". text text text text art art credits credits ."   
    ". text text text text art art credits credits ."
    ". colab1 colab2 colab3 colab4 art art credits credits ." 
    ". . . . . art art credits credits ."
    ". . . . . art art credits credits ."    
    }

.project_4_pics {
    position:relative;
    display: grid;
    grid-template-columns: 1vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 1vw;
    grid-template-rows: 10vw 1vw 12vw auto 2vw auto 9vw 1vw 5.5vw 5.5vw 5.5vw 9vw 5.5vw 11vw;
    width: 100vw;
    grid-column-gap: 2vw;
    padding-bottom: 3vw;

    
    grid-template-areas:    
    ". . . . . . . . . ."
    ". longline longline longline longline longline longline longline longline ."
    ". title title title title title2 title2 title2 flag ."
    ". pic1 pic1 pic1 pic1 pic2 pic2 pic2 pic2 ."
    ". . . . . . . . . ."
    ". pic3 pic3 pic3 pic3 pic4 pic4 pic4 pic4 ." 
    ". title3 title3 title3 title3 . . . . ."
    ". line3 line3 line3 line3 line line line2 line2 ."    
    ". text text text text art art maincredit maincredit ."
    ". text text text text art art credits credits ."   
    ". text text text text art art credits credits ."
    ". colab1 colab2 colab3 colab4 art art credits credits ." 
    ". . . . . art art credits credits ."
    ". . . . . art art credits credits ."    

    }



.project_morelogos {
    position:relative;
    display: grid;
    grid-template-columns: 1vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 1vw;
    grid-template-rows: 10vw 1vw 12vw auto 2vw auto 9vw 1vw 5.5vw 5.5vw auto 9vw 5.5vw 11vw;
    width: 100vw;
    grid-column-gap: 2vw;
    padding-bottom: 3vw;


    
    grid-template-areas:    
    ". . . . . . . . . ."
    ". longline longline longline longline longline longline longline longline ."
    ". title title title title title2 title2 title2 flag ."
    ". pic pic pic pic pic pic pic pic ."
    ". . . . . . . . . ."
    ". vid vid vid vid vid vid vid vid ."         
    ". title3 title3 title3 title3 . . . . ."
    ". line3 line3 line3 line3 line line line2 line2 ."    
    ". text text text text art art maincredit maincredit ."
    ". text text text text art art credits credits ."   
    ". text text text text art art credits credits ."
    ". colab1 . . . . . credits credits ." 
    ". colab2 colab3 colab4 colab5 colab6 . credits credits ."
    ". . . . . . . credits credits ."    

    }


.project_thf {
    position:relative;
    display: grid;
    grid-template-columns: 1vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 1vw;
    grid-template-rows: 10vw 1vw 12vw auto 2vw auto 9vw 1vw 5.5vw 5.5vw auto 9vw 5.5vw 11vw;
    width: 100vw;
    grid-column-gap: 2vw;
    padding-bottom: 3vw;


    
    grid-template-areas:    
    ". . . . . . . . . ."
    ". longline longline longline longline longline longline longline longline ."
    ". title title title title title2 title2 title2 flag ."
    ". vidx vidx vidx vidx vidx vidx vidx vidx ."
    ". . . . . . . . . ."
    ". vid vid vid vid vid vid vid vid ."         
    ". title3 title3 title3 title3 . . . . ."
    ". line3 line3 line3 line3 line line line2 line2 ."    
    ". text text text text art art maincredit maincredit ."
    ". text text text text art art credits credits ."   
    ". text text text text art art credits credits ."
    ". colab1 colab2 colab3 colab4 art art credits credits ." 
    ". . . . . art art credits credits ."
    ". . . . . art art credits credits ."    

    }


.about_weltraum {
    position:relative;
    display: grid;
    grid-template-columns: 1vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 1vw;
    grid-template-rows: 1vw 3vw auto 10vw 1vw 3vw;
    width: 100vw;
    grid-column-gap: 2vw;

    grid-template-areas:     
    ". longline longline line2 line2 line line line3 line3 ."    
    ". hd_about hd_about hd_wedo hd_wedo hd_notable hd_notable hd_contact hd_contact ."
    ". col_about col_about col_wedo col_wedo col_notable col_notable col_contact col_contact ."
    ". . . . . . . . . ."
    ". subline subline subline subline subline subline subline subline ."    
    ". hd_clients hd_clients hd_clients hd_clients hd_clients hd_clients hd_clients hd_clients ."
    }




.resume_weltraum {
    position:relative;
    display: grid;
    grid-template-columns: 1vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 1vw;
    grid-template-rows: 1vw 3vw auto 10vw 1vw 3vw auto 10vw 1vw 3vw;
    width: 100vw;
    grid-column-gap: 2vw;

    grid-template-areas:     
    ". face . line2 line2 line line line3 line3 ."    
    ". face . hd_about hd_about hd_wedo hd_wedo hd_contact hd_contact ."
    ". face . col_about col_about col_wedo col_wedo col_contact col_contact ."
    ". . . . . . . . . ."
    ". . . line4 line4 line5 line5 line6 line6 ."
    ". . . hd_cv hd_cv hd_skills hd_skills hd_notable hd_notable ."    
    ". . . col_cv col_cv col_skills col_skills col_notable col_notable ."    
    ". . . . . . . . . ."
    ". subline subline subline subline subline subline subline subline ."    
    ". hd_clients hd_clients hd_clients hd_clients hd_clients hd_clients hd_clients hd_clients ."
    }










.footer {
    position:relative;
    display: grid;
    grid-template-columns: 1vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 10vw 1vw;
    grid-template-rows: 5.5vw 5.5vw 5.5vw 1vw 6vw 1vw auto 5.5vw;
    width: 100vw;
    grid-column-gap: 2vw;

    grid-template-areas:  
    ". . . . . . . . . ."
    ". foot2 foot2 foot2 foot2 foot2 foot2 foot2 foot2 ."    
    ". . . . . . . . . ."
    ". line4 line4 line4 line4 line4 line4 line4 line4 ."    
    ". con1 con1 con2 con2 con3 con3 con4 con4 ."       
    ". subline subline subline subline subline subline subline subline ."    
    ". foot1 foot1 . . foot3 foot3 foot4 foot4 ."
    ". . . . . . . . . ."    
    }




.clients {
    margin-left: 3vw;
    margin-right: 3vw;
    position:relative;
    display: grid;
    grid-template-columns: repeat(8, 10vw);
    width: 100vw;
    grid-column-gap: 2vw;

    }










/* CLASSES */
.weltraum { grid-area: weltraum;
            color: white;
            font-weight: 750;
            font-size: 6.25vw;
            line-height: 6vw;
            letter-spacing: -2px;
            display: flex;
            align-items: center ;
            text-align: left;
}

.logo  {    grid-area: logo;    
            display: flex;
            align-items: center;
            justify-self: center;
            width: 12vw;
}

.sub {      grid-area: sub;
            color: white;
            font-family: "adobe-caslon-pro", serif;
            font-weight: 400;
            font-style: normal;  
            font-size: 4.8vw;
            line-height: 5.5vw;
            display:flex;
            align-items: flex-start;
}

.screenmix {
  mix-blend-mode: screen;
}

.screenmixhalf {
  mix-blend-mode: screen;
    opacity: 0.5;
}

.current, .artworks, .visuals, .industry, .about, .mail
        {   padding-top: 0.25vw;
            color: white;        
            font-size: 1.5vw;
            line-height: 2vw;
            font-weight: 300;
            display: flex;
            align-items: flex-start;
}

.hd_about, .hd_wedo, .hd_notable, .hd_contact, .hd_clients, .hd_skills, .hd_cv
        {   padding-top: 0.25vw;
            color: white;        
            font-size: 1.5vw;
            line-height: 2vw;
            font-weight: 600;
            display: flex;
            align-items: flex-start;
}


.col_about, .col_wedo, .col_notable, .col_contact, .foot1, .foot2, .foot3, .foot4, .col_cv, .col_skills, .con1, .con2, .con3, .con4
        {   padding-top: 1.5vw;
            color: white;
            font-size: 1.0333vw;
            line-height: 1.375vw;
            display: block;
            justify-items: flex-start;
}


.dot
        {   padding-top: 0.25vw;
            color: white;        
            font-size: 1.5vw;
            line-height: 2vw;
            font-weight: 300;
            display: flex;
            align-items: flex-start;
            justify-self: center;

}

.social 
        {   padding-top: 0.3126vw;
            padding-left: 0.625vw;
            height: 1.25vw;
            display: flex;
            align-items: flex-start;
            justify-self: end;

}

.foot1{     grid-area: foot1;}
.foot2{     grid-area: foot2;} 
.foot3{     grid-area: foot3;}
.foot4{     grid-area: foot4;}
.con1{      grid-area: con1;}
.con2{      grid-area: con2;}
.con3{      grid-area: con3;}
.con4{      grid-area: con4;}
.hd_clients{grid-area: hd_clients;} 
.hd_clients{grid-area: hd_clients;} 
.hd_about{  grid-area: hd_about;} 
.hd_wedo{   grid-area: hd_wedo;}
.hd_notable{grid-area: hd_notable;}
.hd_contact{grid-area: hd_contact;}
.hd_cv      {grid-area: hd_cv;}
.hd_skills  {grid-area: hd_skills;}
.col_about{ grid-area: col_about;}
.col_wedo{  grid-area: col_wedo;}
.col_notable{grid-area: col_notable;}
.col_contact{grid-area: col_contact;}
.col_cv     {grid-area: col_cv;}
.col_skills {grid-area: col_skills;}
.face       {grid-area: face;}
.current  {    grid-area: current;} 
.artworks {    grid-area: artworks;}
.visuals {    grid-area: visuals;}
.industry {    grid-area: industry;}
.dot  {    grid-area: dot;} 
.about {    grid-area: about;}
.mail {    grid-area: mail;}
.social {    grid-area: social;}


.title {    grid-area: title;
            padding-top: 0.25vw;
            color: white;
            font-weight: 600;
            font-size: 3vw;
            line-height: 3.408333vw;
            display: flex;
            vertical-align: top;
}



.title2 {   grid-area: title2;
            padding-top: 0.25vw;
            color: white;
            font-weight: 600;
            font-size: 1.5vw;
            line-height: 2vw;
            display: flex;
            align-items: flex-start;
}

.flag-icon{ grid-area: flag;
            padding-top: 0.75vw;
            font-size: 1.5vw;
            line-height: 2vw;  
            display: flex;
            align-self: flex-start;
            justify-self: end;

}

.pic {      grid-area: pic;
            width: 94vw;
            display: flex;
            align-items: flex-start;
}

.pic1 {      grid-area: pic1;
            width: 46vw;
            display: flex;
            align-items: flex-start;
}
    
.pic2 {      grid-area: pic2;
            width: 46vw;
            display: flex;
            align-items: flex-start;
}
    
.pic3 {      grid-area: pic3;
            width: 46vw;
            display: flex;
            align-items: flex-start;
}
    
.pic4 {      grid-area: pic4;
            width: 46vw;
            display: flex;
            align-items: flex-start;
}    
    
    
    
.vid {      grid-area: vid;
            width: 94vw;
            height: 52.875vw;
            display: flex;
            align-items: flex-start;
}

.vid2 {      grid-area: vid2;
            width: 94vw;
            height: 52.875vw;
            display: flex;
            align-items: flex-start;
}

.vid3 {      grid-area: vid3;
            width: 94vw;
            height: 52.875vw;
            display: flex;
            align-items: flex-start;
}

.vidcine {  grid-area: vidcine;
            width: 94vw;
            height: 25vw;
            display: flex;
            align-items: flex-start;
}

.vidx {     grid-area: vidx;
            width: 94vw;
            height: 10vw;
            display: flex;
            align-items: flex-start;
}

.title3 {   grid-area: title3;
            color: white;
            font-weight: 600;
            font-size: 1.7vw;
            line-height: 2.25vw;
            display: flex;
            align-items: flex-end;
}


.line, .line2, .line3, .longline, .subline, .line4, .line5, .line6
    {       border-radius: 0.5px;
            width: 100%;
            height: 1px;
            background-color: white;
            position: relative;
            left: 0;
            top: 1vw;
}


.line  {    grid-area: line;}
.line2 {    grid-area: line2;}
.line3 {    grid-area: line3;}
.line4 {    grid-area: line4;}
.line5 {    grid-area: line5;}
.line6 {    grid-area: line6;}
.longline{  grid-area: longline;}
.subline{  grid-area: subline;}

            

.text {     grid-area: text;
            padding-top: 1.75vw;
            color: white;
            font-weight: 300;
            font-size: 1.41666vw;
            line-height: 1.8333vw;
            display: block;
}


.art   {    grid-area: art;
            padding-top: 1.7vw;
            color: white;
            font-family: "adobe-caslon-pro", serif;
            font-weight: 400;
            font-style: normal;            
            font-size: 1.0666vw;
            line-height: 1.375vw;
            display: block;
            justify-items: flex-start;

}
 
    
.colab1  {  grid-area: colab1;
            width: 100%;
            display: flex;
            align-items: center;
            justify-self: center;
}

.colab2  {  grid-area: colab2;
            width: 100%;
            display: flex;
            align-items: center;
            justify-self: center;
    }

.colab3  {   grid-area: colab3;
            width: 100%;
            display: flex;
            align-items: center;
            justify-self: center;
}

.colab4  {   grid-area: colab4;
            width: 100%;
            display: flex;
            align-items: center;
            justify-self: center;
}
    
.colab5  {  grid-area: colab5;
            width: 100%;
            display: flex;
            align-items: center;
            justify-self: center;
}

.colab6  {  grid-area: colab6;
            width: 100%;
            display: flex;
            align-items: center;
            justify-self: center;
    }

.colab7  {   grid-area: colab7;
            width: 100%;
            display: flex;
            align-items: center;
            justify-self: center;
}

.colab8  {   grid-area: colab8;
            width: 100%;
            display: flex;
            align-items: center;
            justify-self: center;
}
   
.colab9  {   grid-area: colab9;
            width: 100%;
            display: flex;
            align-items: center;
            justify-self: center;
}
    
.maincredit, .credits 
    {       padding-top: 1.5vw;
            color: white;
            font-size: 1.0333vw;
            line-height: 1.375vw;
            display: block;
            justify-items: flex-start;
            text-align: right;
}
.maincredit{grid-area: maincredit;}
.credits {  grid-area: credits;}
}


.screenmix {
  mix-blend-mode: screen;
}

.screenmixhalf {
  mix-blend-mode: screen;
    opacity: 0.5;
}