: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: 0vw;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}    
    

/* ---------------- MOBILE -------------------------------------- */









/* GRIDS */
.header {
    position:relative;
    display: grid;
    grid-template-columns: 0vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 0vw;
    grid-template-rows: 11vw 7vw 22vw 7vw 22vw;
    width: 100vw;
    height: 85vw;
    grid-column-gap: 4vw;
    
    grid-template-areas:
    ". . . . . . . . . ."    
    ". weltraum weltraum weltraum weltraum weltraum weltraum weltraum logo ."
    ". . . . . . . . . ."    
    ". sub sub sub sub sub sub sub . ." 
    ". . . . . . . . . ."    
}



.nav {
    position:relative;
    display: grid;
    grid-template-columns: 0vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 0vw;
    grid-template-rows: 2vw 10vw;
    width: 100vw;
    height: 12vw;
    grid-column-gap: 4vw;
    
    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: 0vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 0vw;
    grid-template-rows: 21vw 2vw 12vw auto 2vw auto 10vw 1vw auto 4vw 14vw 7.2vw 22vw;
    width: 100vw;
    grid-column-gap: 4vw;
    padding-bottom: 2vw;


    
    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 title3 title3 title3 title3 ."
    ". . . . . . . . . ."
    ". text text text text text text text text ."
    ". line2 line2 line2 line2 line2 line2 line2 line2 ."    
    ". maincredit maincredit maincredit maincredit credits credits credits credits ."
    ". colab1 colab2 colab3 colab4 credits credits credits credits ." 
    ". . . . . . . . . ."    

    }



.project_longtitle {
    position:relative;
    display: grid;
    grid-template-columns: 0vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 0vw;
    grid-template-rows: 21vw 2vw 12vw auto 2vw auto 10vw 1vw auto 4vw 14vw 7.2vw 77vw;
    width: 100vw;
    grid-column-gap: 4vw;
    padding-bottom: 2vw;


    
    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 title3 title3 title3 title3 ."
    ". . . . . . . . . ."
    ". text text text text text text text text ."
    ". line2 line2 line2 line2 line2 line2 line2 line2 ."    
    ". maincredit maincredit maincredit maincredit credits credits credits credits ."
    ". colab1 colab2 colab3 colab4 credits credits credits credits ." 
    ". . . . . . . . . ."    

    }



.project_cinemascope {
    position:relative;
    display: grid;
    grid-template-columns: 0vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 0vw;
    grid-template-rows: 21vw 2vw 12vw auto 2vw auto 10vw 1vw auto 4vw 14vw 7.2vw 22vw;
    width: 100vw;
    grid-column-gap: 4vw;
    padding-bottom: 2vw;


    
    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 title3 title3 title3 title3 ."
    ". . . . . . . . . ."
    ". text text text text text text text text ."
    ". line2 line2 line2 line2 line2 line2 line2 line2 ."    
    ". maincredit maincredit maincredit maincredit credits credits credits credits ."
    ". colab1 colab2 colab3 colab4 credits credits credits credits ." 
    ". . . . . . . . . ."    

    }



.project_2vids {
    position:relative;
    display: grid;
    grid-template-columns: 0vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 0vw;
    grid-template-rows: 21vw 2vw 12vw auto 2vw auto 10vw 1vw auto 4vw 14vw 7.2vw 22vw;
    width: 100vw;
    grid-column-gap: 4vw;
    padding-bottom: 2vw;


    
    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 title3 title3 title3 title3 ."
    ". . . . . . . . . ."
    ". text text text text text text text text ."
    ". line2 line2 line2 line2 line2 line2 line2 line2 ."    
    ". maincredit maincredit maincredit maincredit credits credits credits credits ."
    ". colab1 colab2 colab3 colab4 credits credits credits credits ." 
    ". . . . . . . . . ."    

    }

.project_3vids {
    position:relative;
    display: grid;
    grid-template-columns: 0vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 0vw;
    grid-template-rows: 21vw 2vw 12vw auto 2vw auto 2vw auto 10vw 1vw auto 4vw 14vw 7.2vw 22vw;
    width: 100vw;
    grid-column-gap: 4vw;
    padding-bottom: 2vw;


    
    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 title3 title3 title3 title3 ."
    ". . . . . . . . . ."
    ". text text text text text text text text ."
    ". line2 line2 line2 line2 line2 line2 line2 line2 ."    
    ". maincredit maincredit maincredit maincredit credits credits credits credits ."
    ". colab1 colab2 colab3 colab4 credits credits credits credits ." 
    ". . . . . . . . . ."    

    }



.project_4_pics {
    position:relative;
    display: grid;
    grid-template-columns: 0vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 0vw;
    grid-template-rows: 21vw 2vw 12vw auto 4vw auto 10vw 1vw auto 4vw 14vw 7.2vw 22vw;
    width: 100vw;
    grid-column-gap: 4vw;
    padding-bottom: 2vw;


    
    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 title3 title3 title3 title3 ."
    ". . . . . . . . . ."
    ". text text text text text text text text ."
    ". line2 line2 line2 line2 line2 line2 line2 line2 ."    
    ". maincredit maincredit maincredit maincredit credits credits credits credits ."
    ". colab1 colab2 colab3 colab4 credits credits credits credits ." 
    ". . . . . . . . . ."    

    }
    


.project_morelogos {
    position:relative;
    display: grid;
    grid-template-columns: 0vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 0vw;
    grid-template-rows: 21vw 2vw 12vw auto 2vw auto 10vw 1vw auto 4vw 14vw 7.2vw 7.2vw;
    width: 100vw;
    grid-column-gap: 4vw;
    padding-bottom: 30vw;


    
    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 title3 title3 title3 title3 ."
    ". . . . . . . . . ."
    ". text text text text text text text text ."
    ". line2 line2 line2 line2 line2 line2 line2 line2 ."    
    ". maincredit maincredit maincredit maincredit credits credits credits credits ."
    ". colab1 . . .  credits credits credits credits ." 
    ". colab2 colab3 colab4 colab5 colab6 . . . ."    

    }



.project_thf {
    position:relative;
    display: grid;
    grid-template-columns: 0vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 0vw;
    grid-template-rows: 21vw 2vw 12vw auto 2vw auto 10vw 1vw auto 4vw 14vw 7.2vw 22vw;
    width: 100vw;
    grid-column-gap: 4vw;
    padding-bottom: 2vw;


    
    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 title3 title3 title3 title3 ."
    ". . . . . . . . . ."
    ". text text text text text text text text ."
    ". line2 line2 line2 line2 line2 line2 line2 line2 ."    
    ". maincredit maincredit maincredit maincredit credits credits credits credits ."
    ". colab1 colab2 colab3 colab4 credits credits credits credits ." 
    ". . . . . . . . . ."    

    }



.about_weltraum {
    position:relative;
    display: grid;
    grid-template-columns: 0vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 0vw;
    grid-template-rows: 1.5vw 8vw auto 10vw 1.5vw 8vw auto 10vw 1.5vw 8vw auto 10vw 1.5vw 8vw auto 10vw 1.5vw 8vw;
    width: 100vw;
    grid-column-gap: 4vw;

    grid-template-areas:    
    ". longline longline longline longline longline longline longline longline ." 
    ". hd_about hd_about hd_about hd_about hd_about hd_about hd_about hd_about ."
    ". col_about col_about col_about col_about col_about col_about col_about col_about ."
    ". . . . . . . . . ."     
    ". line line line line line line line line ." 
    ". hd_wedo hd_wedo hd_wedo hd_wedo hd_wedo hd_wedo hd_wedo hd_wedo ."
    ". col_wedo col_wedo col_wedo col_wedo col_wedo col_wedo col_wedo col_wedo ."
    ". . . . . . . . . ."
    ". line3 line3 line3 line3 line3 line3 line3 line3 ."     
    ". hd_notable hd_notable hd_notable hd_notable hd_notable hd_notable hd_notable hd_notable ."
    ". col_notable col_notable col_notable col_notable col_notable col_notable col_notable col_notable ."
    ". . . . . . . . . ."
    ". line4 line4 line4 line4 line4 line4 line4 line4 ."     
    ". hd_contact hd_contact hd_contact hd_contact hd_contact hd_contact hd_contact hd_contact ."
    ". col_contact col_contact col_contact col_contact col_contact col_contact 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 ."    

    }











.footer {
    position:relative;
    display: grid;
    grid-template-columns: 0vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 8vw 0vw;
    grid-template-rows: 11vw 11vw 11vw 2vw 20vw 2vw auto 33vw;
    width: 100vw;
    grid-column-gap: 4vw;

    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: 4vw;
    margin-right: 4vw;
    position:relative;
    display: grid;
    grid-template-columns: repeat(4, 20vw);
    width: 100vw;
    grid-column-gap: 4vw;

    }










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

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

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

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

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

.current, .artworks, .visuals, .industry, .about, .mail
        {   color: white;        
            font-size: 2vw;
            line-height: 2.75vw;
            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: 4vw;
            line-height: 4.4vw;
            font-weight: 600;
            display: flex;
            align-items: flex-start;
}


.col_about, .col_wedo, .col_notable, .col_contact, .col_cv, .col_skills 
        {   padding-top: 1.5vw;
            color: white;
            font-weight: 350;
            font-size: 2.8333vw;
            line-height: 3.666vw;
            display: block;
            justify-items: flex-start;
}

.mail   {   display:none;
}
.dot, .foot, .foot2
        {   color: white;        
            font-size: 2vw;
            line-height: 2.75vw;
            font-weight: 400;
            display: block;
            align-items: flex-start;
            justify-self: center;

}

.social 
        {   padding-top: 0.25vw;
            padding-left: 1.5vw;
            height: 1.75vw;
            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_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;
            color: white;
            font-weight: 600;
            font-size: 4vw;
            line-height: 4.4vw;
            display: flex;
            vertical-align: top;
}



.title2 {   grid-area: title2;
            color: white;
            font-weight: 600;
            font-size: 2.4vw;
            line-height: 2.75vw;
            display: flex;
            align-items: flex-start;
}

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

}

.pic {      grid-area: pic;
            width: 92vw;
            display: flex;
            align-items: flex-start;
}   
    
.pic1 {      grid-area: pic1;
            width: 44vw;
            display: flex;
            align-items: flex-start;
}
    
.pic2 {      grid-area: pic2;
            width: 44vw;
            display: flex;
            align-items: flex-start;
}
    
.pic3 {      grid-area: pic3;
            width: 44vw;
            display: flex;
            align-items: flex-start;
}
    
.pic4 {      grid-area: pic4;
            width: 44vw;
            display: flex;
            align-items: flex-start;
}        
    
.vid {      grid-area: vid;
            width: 92vw;
            height: 51.75vw;
            display: flex;
            align-items: flex-start;
}

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

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

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

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


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

.line2
    {       border-radius: 0.5px;
            width: 100%;
            height: 1px;
            background-color: white;
            position: relative;
            left: 0;
            top: 4vw;
}

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

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

.text {     grid-area: text;
            color: white;
            font-weight: 350;
            font-size: 2.8333vw;
            line-height: 3.666vw;
            display: block;
            justify-items: flex-start;
            flex-wrap: wrap;
    }


.art   {    grid-area: art;
            padding-top: 0.2vw;
            color: white;
            font-family: "adobe-caslon-pro", serif;
            font-weight: 200;
            font-style: normal;            
            font-size: 2.8333vw;
            line-height: 3.666vw;
            display: none;
            justify-items: flex-start;

}

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

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

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

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

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

    
.maincredit{grid-area: maincredit;
            padding-top: 2.75vw;
            color: white;
            font-size: 2.0666vw;
            line-height: 2.75vw;
            display: block;
            align-self: flex-start;
            justify-content: flex-start;
            text-align: left;
}   
    
.credits {  grid-area: credits;
            padding-top: 2.75vw;
            color: white;
            font-size: 2.0666vw;
            line-height: 2.75vw;
            display: block;
            vertical-align: top;
            align-content: flex-start;
            text-align: right;
}   
    
.con1, .con2, .con3, .con4, .foot1, .foot2, .foot3, .foot4
{           padding-top: 1.5vw;
            color: white;
            font-size: 2.0666vw;
            line-height: 2.75vw;
            display: block;
            justify-items: flex-start;
}   
 

{   padding-top: 1.5vw;
            color: white;
            font-weight: 350;
            font-size: 2.8333vw;
            line-height: 3.666vw;
            display: block;
            justify-items: flex-start;
}