@font-face {
  font-family: "Manrope";
  src: url("manrope.ttf");
}

:root {
  --duration: 4s;
  --numduration: 10s;
  --intronum: 3s;
  --delay: 0.6
}

/* INTRO-MODE ---------------------------------------------------------------------------------------------------------------*/
body.intro-mode {
  background-color: rgb(243, 243, 243); 
  animation: none;
}

@keyframes intro-number1 {
  0%{transform: translate(-15vw, 40vw);} 50% {  transform: translate(-4vw, 40vw);} 100%{transform: translate(-4vw, 80vw);}
}

@keyframes intro-number2 {
  0%{transform: translate(-8vw, 40vw);} 50% {  transform: translate(-2vw, 40vw);} 100%{transform: translate(-2vw, 80vw);}
}


@keyframes intro-number3 {
  0%{transform: translate(-0, 40vw);} 50% {  transform: translate(-0vw, 40vw);} 100%{transform: translate(-0vw, 80vw);}
}

@keyframes intro-number4 {
  0%{transform: translate(8vw, 40vw);} 50% {  transform: translate(2vw, 40vw);} 100%{transform: translate(2vw, 80vw);}

}

@keyframes intro-number5 {
  0%{transform: translate(15vw, 40vw);} 50% {  transform: translate(4vw, 40vw);} 100%{transform: translate(4vw, 80vw);}
}


body.intro-mode .number.num1:nth-child(1) {
  z-index: 3;
  transform: translate(-4vw, 30vw);
  animation: intro-number1 var(--intronum) ease-in-out;
  animation-fill-mode: forwards;

}


body.intro-mode .number.num1:nth-child(2) {
  z-index: 4;
  transform: translate(-2vw, 30vw);
  animation: intro-number2 var(--intronum) ease-in-out;
  animation-fill-mode: forwards;

}

body.intro-mode .number.num1:nth-child(3) {
  z-index: 5;
  transform: translate(0vw, 30vw);
  animation: intro-number3 var(--intronum) ease-in-out;
  
}

body.intro-mode .number.num1:nth-child(4) {
  z-index: 2;
  transform: translate(2vw, 30vw);
  animation: intro-number4 var(--intronum) ease-in-out;
  animation-fill-mode: forwards;
}

body.intro-mode .number.num1:nth-child(5) {
  transform: translate(4vw, 30vw);
  z-index: 1;
  animation: intro-number5 var(--intronum) ease-in-out ;
  animation-fill-mode: forwards;
}


body.intro-mode .grid-container, body.intro-mode .big-circle,body.intro-mode .main-font, body.intro-mode .having-thought,body.intro-mode .decide,
body.intro-mode .having-decided,body.intro-mode .do-not-think,body.intro-mode .not,body.intro-mode .not-think1,body.intro-mode .not-think2,
body.intro-mode .xl-circle,body.intro-mode .l-circle,body.intro-mode .m-circle,body.intro-mode .s-circle,body.intro-mode .ver1,body.intro-mode .ver2,
body.intro-mode .ver3,body.intro-mode .ver4-1,body.intro-mode .ver4-2,body.intro-mode .ho1,body.intro-mode .ho2,body.intro-mode .ho3 {
  opacity: 0;
  pointer-events: none;
  animation: none !important;
}
body.intro-mode .number-container {
  transform: translateX(-50vw);
}

body.intro-mode .num1 {
  animation: intro-animation 1s forwards;
}

@keyframes intro-animation {
  0%,50% {background-color: rgb(243, 243, 243);}
  50.01%,100% {background-color: blue;}
}


/* MAIN-MODE ---------------------------------------------------------------------------------------------------------------*/

body.main-mode {
  background-color: rgb(243, 243, 243); 
}
body.main-mode .grid-container,body.main-mode .main-font,body.main-mode .having-thought,body.main-mode .decide,body.main-mode .having-decided,
body.main-mode .do-not-think,body.main-mode .not,body.main-mode .not-think1,body.main-mode .not-think2,body.main-mode .xl-circle,
body.main-mode .l-circle,body.main-mode .m-circle,body.main-mode .s-circle,body.main-mode .ver1,body.main-mode .ver2,
body.main-mode .ver3,body.main-mode .ver4-1,body.main-mode .ver4-2,body.main-mode .ho1,body.main-mode .ho2,body.main-mode .ho3 {
  opacity: 0; 
  pointer-events: none;
  transition: opacity 0.5s ease-out; 
}

body.main-mode .grid-container,body.main-mode .main-font,body.main-mode .having-thought,body.main-mode .decide,body.main-mode .having-decided,
body.main-mode .do-not-think,body.main-mode .not,body.main-mode .not-think1,body.main-mode .not-think2,body.main-mode .xl-circle,
body.main-mode .l-circle,body.main-mode .m-circle,body.main-mode .s-circle,body.main-mode .ver1,body.main-mode .ver2,
body.main-mode .ver3,body.main-mode .ver4-1,body.main-mode .ver4-2,body.main-mode .ho1,body.main-mode .ho2,body.main-mode .ho3 {
  opacity: 1;
  pointer-events: all;
  
}

/* LAYOUT ---------------------------------------------------------------------------------------------------------------*/

body {
  background-color: rgb(243, 243, 243);
  line-height: 0.95;
  letter-spacing: -0.08em;
}

.main-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  flex-direction: row;
}

.grid-container {
  display: grid;
  grid-template-columns: 25% 1fr 1fr 1fr 1fr 15%;
  grid-template-rows: 25% 1fr 1fr 0.5fr 0.5fr 0.5fr 0.5fr;
  height: 100vh;
  width: 60vw;
}


.main-font {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  color: blue;
}

.number {
  font-family: Manrope;
  font-weight: 700;
  color: blue;

}

/* ANIMATIONS---------------------------------------------------------------------------------------------------------------*/



@keyframes body-color-swap {

  0%,90% {background-color: rgb(243, 243, 243);}
  90.01%,100% {background-color: blue;}
}

@keyframes font-color-swap {

  0%, 90% {color: blue;}
  90.01%,100% {color: rgb(243, 243, 243);}
}

@keyframes background-color-swap {
  0%,
  90% {background-color: blue;}
  90.01%, 100% {background-color: rgb(243, 243, 243);}
}


@keyframes ver {

  0%,90% {border-left: solid 0.3vh blue;}
  90.01%,100% {border-left: solid  0.3vh rgb(243, 243, 243);}
}


body {
  animation: body-color-swap var(--duration) linear infinite;
    animation-fill-mode: forwards;
}
.xl-circle,.l-circle,.m-circle,.s-circle {
  animation: background-color-swap var(--duration) linear infinite;
  animation-fill-mode: forwards;

}



.main-font,.number {
  animation: font-color-swap var(--duration) linear infinite;
  animation-fill-mode: forwards;
}


.ver4-1{
  animation: ver var(--duration) linear infinite;
}

.ho1, .ho2, .ho3{
  animation: box-color-swap var(--duration) linear infinite;
  animation-fill-mode: forwards;
}


.big-circle {
  animation: border-color-swap var(--duration) linear infinite;
  animation-fill-mode: forwards;
}

@keyframes box-color-swap {

  0%,90% {box-shadow: inset 0 -0.2vh 0 0 blue;}
  90.01%,100% {box-shadow: inset 0 -0.2vh 0 0 rgb(206, 201, 230);}
}

@keyframes border-color-swap {

  0%,90% {border: 0.3vh solid rgb(99, 78, 255);}
  90.01%,100% {border: 0.3vh solid rgb(217, 217, 217);}
}

@keyframes ver1-gradient {

  0%,90% {border-image: linear-gradient(to top, rgb(206, 201, 230) 25%, blue 75%) 0.5;}
  90.01%,100% {border-image: linear-gradient(to top, blue 25%, rgb(206, 201, 230) 75%) 0.5;}
}

@keyframes ver2-gradient {

  0%,90% { border-image: linear-gradient(to top, rgb(206, 201, 230) 9%, blue 75%) 0.5;}
  90.01%,100% { border-image: linear-gradient(to top, blue 9%, rgb(206, 201, 230) 75%) 0.5; }
 }

@keyframes ver3-gradient {

  0%,90% {border-image: linear-gradient(to top, rgb(206, 201, 230) 10%, blue 75%) 0.5;}
  90.01%,100% {  border-image: linear-gradient(to bottom, rgb(206, 201, 230) 100%, blue 0%) 0.5;}
  }

@keyframes ver4-2-gradient {

  0%,90% {border-image: linear-gradient(to top, rgb(206, 201, 230) 50%, blue 75%) 0.5;}
  90.01%,100% { border-image: linear-gradient(to bottom, rgb(206, 201, 230) 100%, blue 0%) 0.5;}
}


.ver1 {
  animation: ver1-gradient var(--duration) linear infinite; animation-fill-mode: forwards;
}
.ver2{
  animation: ver2-gradient var(--duration) linear infinite; animation-fill-mode: forwards;
}
.ver3 {animation: ver3-gradient var(--duration) linear infinite;animation-fill-mode: forwards;
  }
.ver4-2 {
    animation: ver4-2-gradient var(--duration) linear infinite;  animation-fill-mode: forwards;
}
  


/* TEXT ----------------------------------------------------------------------------------------------------------*/

body.main-mode .having-thought {
  grid-column: 1/4;
  grid-row: 1/2;
  font-size: 5vw;
  max-height: 100%;
  max-width: 100%;
  text-align: left;
  place-self: end;
  position: relative;
  padding-bottom: 5%;
  padding-right: 4%;
  transition-delay: 1.5s;
  transition-timing-function: ease;
}

body.main-mode .having-thought::after {
  content: "Having thought —";
  display: inline-block;
  animation: having-thought var(--duration) linear infinite;
  animation-fill-mode: forwards;
  white-space: pre;
}

@keyframes having-thought {

  0%,90% {content: "Having  \A thought —";transform: translateX(-0%);}
  90.01%,100% {content: "Didn't  \A think —";transform: translateX(-10%);}
}

body.main-mode .decide {
  grid-column: 4/6;
  grid-row: 2/3;
  font-size: 5vw;
  display: flex;
  max-height: 100%;
  max-width: 100%;
  align-items: end;      
  justify-content: flex-start; 
  text-align: left;
  position: relative;
  transition-delay: 0.5s;

  padding-left: 5%;
  padding-bottom: 3%;
}
body.main-mode .decide::after {
  content: "decide";
  animation: decide var(--duration) steps(1) infinite;
  white-space: pre;
}

@keyframes decide {

  0%,90% {content: "decide";font-size: 5vw; }
  90.01%, 100% {content: "un \A decided";font-size: 4.5vw;}
}


body.main-mode .having-decided {
  grid-area: 4/3/5/4;
  font-size: 2vw;
  height: 100% ;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
  transform: translateX(1vw);
  justify-self: center;
  padding: 3%;
  transition-delay: 1s;

}

body.main-mode .having-decided::after {
  content: "Having decided";
  display: inline-block;
  animation: having-decided var(--duration) linear infinite;
  animation-fill-mode: forwards;
  white-space: pre;
}

@keyframes having-decided {

  0%,90% {content: "Having \A decided";transform: translateX(0%);}
  90.01%,100% {content: "Didn't\A decide";transform: translateX(9vw);}
}


body.main-mode .do-not-think {
  grid-area: 5/3/6/5;
  font-size: 2vw;
  max-height: 100%;
  max-width: 100%;
  text-align: left;
  transform:translateX(18%);
  transition-delay: 1.3s;

  padding: 3%;
}

body.main-mode .do-not-think::after {
  content: "Hdo-not-think";
  display: inline-block;
  animation: do-not-think var(--duration) linear infinite;
  animation-fill-mode: forwards;
  white-space: pre;
}

@keyframes do-not-think {

  0%,90% {  content: "— Do not \A think";  transform: translateX(0%); }
  90.01%,100% { content: "— Too late to\A think";transform: translateX(-2vh);}
}


body.main-mode .not {
  grid-area: 6/4/7/5;
  font-size: 1vw;
  max-height: 100%;
  max-width: 100%;
  text-align: left;
  padding: 6%;
  transition-delay: 1.3s;

}

body.main-mode .not-think1 {
  grid-area: 7/6/7/7;
  font-size: 1vw;
  max-height: 100%;
  max-width: 100%;
  text-align: left;
  transition-delay: 0.4s;

  padding: 4%;
}

body.main-mode .not-think1::after {
  content: "Not-think";
  display: inline-block;
  animation: not-think var(--duration) linear infinite;
  align-items: center;
  justify-content: center;
  animation-fill-mode: forwards;
  white-space: pre;
}

@keyframes not-think {

  0%,90% { content: "not \A    think"; }
  90.01%,100% { content: "Too \A     late";}
}




/* ---CIRCLES-----------------------------------------------------------------------------------*/


body.main-mode .xl-circle {
  grid-column: 6/6;
  grid-row: 1/2;
  border-radius: 50%;
  height: 7vw;
  width: 7vw;
  max-height: 100%;
  max-width: 100%;
  background-color: blue;
  position: relative;

  place-self: center;
  transition-property: all;
  transition-duration: 300ms;
  transition-delay: 200ms;
  transition-timing-function: ease;
  

}

body.main-mode .xl-circle:hover {
  border-radius: 0%;
  transition-delay: 0ms;
  width: 100%;
  height: 100%;
}

body.main-mode .l-circle {
  grid-column: 3/4;
  grid-row: 2/3;
  border-radius: 50%;
  height: 4vw;
  width: 4vw;
  max-height: 100%;
  max-width: 100%;
  background-color: blue;
  position: relative;

  place-self: center;
  transition-property: all;
  transition-duration: 300ms;
  transition-delay: 200ms;
  transition-timing-function: ease;
}

body.main-mode .l-circle:hover {
  border-radius: 0% ;
  transition-delay: 0ms;
  width: 100%;
  height: 100%;
}

body.main-mode .m-circle {
  grid-column: 4/5;
  grid-row: 3/4;
  border-radius: 50%;
  height: 1.5vw;
  width: 1.5vw;
  max-height: 100%;
  max-width: 100%;
  background-color: blue;
  place-self: center;
  position: relative;

  place-self: center;
  transition-property: all;
  transition-duration: 300ms;
  transition-delay: 200ms;
  transition-timing-function: ease;
}
body.main-mode .m-circle:hover {
  width: 100%;
  height: 100%;
  border-radius: 0% !important;
  transition-delay: 0ms;

}

body.main-mode .s-circle {
  grid-column: 6/7;
  grid-row: 6/7;
  border-radius: 50%;
  height: 0.75vw;
  width: 0.75vw;
  max-height: 100%;
  max-width: 100%;
  place-self: center;
  transform: translate(-6vh, 2vh);
  position: relative;

}


.big-circle {
  grid-column: 1/7;
  grid-row: 1/7;
  width: 30vw;
  height: 30vw;
  border: 0.3vw solid rgb(99, 78, 255);
  border-radius: 50%;
  place-self: center;
  transform: translate(39vw);
  z-index: 6;
  max-width: 100%;
  max-height: 100%;

}

.big-circle:nth-child(1) {
  transform: translate(47vw, 12vw);
  transform-origin: center;

}

.big-circle:nth-child(2) {
  transform: translate(47vw, 2vw);

}

.big-circle:nth-child(3) {
  transform: translate(47vw, -8vw);

}





/* ---NUMBER-----------------------------------------------------------------------------------*/



.number-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 40vw;
  overflow: visible;
  justify-content: space-between;
  position: relative;
  
}

.num1 {

  rotate: -90deg;
  grid-area: 1/1/1/1;
  width: 20vw;
  height: 80vw;
  line-height: 80%;
  font-size: 35vw;
  background-color: rgb(243, 243, 243);
  margin: -30%;
  clip-path: inset(0 0 0 5%);
  position: relative;

}

@keyframes number1 {
  0%{transform: translate(-4vw, 30vw);}50%{ transform: translate(-15vw, 30vw);} 100% {  transform: translate(-4vw, 30vw);}
}

@keyframes number2 {
  0%{transform: translate(-2vw, 30vw);} 50%{transform: translate(-8vw, 30vw);} 100% {transform: translate(-2vw, 30vw);}
}

@keyframes number4 {
  0%{transform: translate(2vw, 30vw);}50%{ transform: translate(8vw, 30vw);} 100% {  transform: translate(2vw, 30vw);}
}

@keyframes number5 {
  0%{transform: translate(4vw, 30vw);} 50%{transform: translate(15vw, 30vw);} 100% {transform: translate(4vw, 30vw);}
}


body.main-mode .number.num1:nth-child(1) {
  z-index: 3;
  transform: translate(-4vw, 30vw);
  animation: number1 var(--numduration) ease-in-out infinite , body-color-swap var(--duration) infinite, font-color-swap var(--duration) infinite;
  animation-fill-mode: forwards;

}

body.main-mode .number.num1:nth-child(2) {
  z-index: 4;
  transform: translate(-2vw, 30vw);
  animation: number2 var(--numduration) ease-in-out infinite , body-color-swap var(--duration) infinite, font-color-swap var(--duration) infinite;
  animation-fill-mode: forwards;

}

body.main-mode .number.num1:nth-child(3) {
  z-index: 5;
  transform: translate(0vw, 30vw);
  animation: body-color-swap var(--duration) infinite, font-color-swap var(--duration) infinite;
  animation-fill-mode: forwards;
  
}

body.main-mode .number.num1:nth-child(4) {
  z-index: 2;
  transform: translate(2vw, 30vw);
  animation: number4 var(--numduration) ease-in-out infinite , body-color-swap var(--duration) infinite, font-color-swap var(--duration) infinite;
  animation-fill-mode: forwards;
}

body.main-mode .number.num1:nth-child(5) {
  transform: translate(4vw, 30vw);
  z-index: 1;
  animation: number5 var(--numduration) ease-in-out infinite , body-color-swap var(--duration) infinite, font-color-swap var(--duration) infinite;
  animation-fill-mode: forwards;
}




/* RASTER------------------------------------------------------------------------------------------*/


.ver1 {
  grid-column: 2/3;
  grid-row: 2/8;
  border-left: solid 0.3vh blue;
  border-right: solid 0.3vh blue;
  border-image: linear-gradient(to top, rgb(206, 201, 230) 25%, blue 75%) 0.5;
}


.ver2 {
  grid-column: 4/5;
  grid-row: 1/8;
  border-left: solid 0.3vh blue;
  border-image: linear-gradient(to top, rgb(206, 201, 230) 25%, blue 75%) 0.5;
}

.ver3 {
  grid-column: 6/7;
  grid-row: 1/8;
  border-left: solid 0.3vh blue;
  border-image: linear-gradient(to top, rgb(206, 201, 230) 10%, blue 75%) 0.5;
}

.ver4-1 {
  grid-column: 5/6;
  grid-row: 1/2;
  border-left: solid 0.3vh blue;

}

.ver4-2 {
  grid-column: 5/6;
  grid-row: 3/8;
  border-left: solid 0.3vh blue;
  border-image: linear-gradient(to top, rgb(206, 201, 230) 50%, blue 75%) 0.5;
}

.ho1 {
  grid-column: 2/7;
  grid-row: 1/1;
  box-shadow: inset 0 -0.2vh 0 0 blue;
}


.ho2 {
  grid-column: 1/6;
  grid-row: 2/3;
  box-shadow: inset 0 -2vh 0 0 blue;
}

.ho3 {
  grid-column: 2/6;
  grid-row: 3/4;
  box-shadow: inset 0 -0.2vh 0 0 blue;

}