@media (max-width: 1024px) {


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

  .main-container {
    flex-direction: column;
  }

  .grid-container {
    width: 100vw;
    height: 60vh;
    grid-template-columns: 20% 1fr 1fr 1fr 1fr 20%;
    grid-template-rows: 30% 1fr 1fr 0.5fr 0.5fr 10%;


  }

  body.intro-mode .number-container {
    display: flex;
    flex-direction: row;
    height: 40vh;
    width: 100vw;

    justify-content: space-between;
    overflow: visible;
    position: relative;
    transform: translateY(-30vh);
  }


  body.main-mode .number-container {
    display: flex;
    flex-direction: row;
    height: 40vh;
    width: 100vw;

    justify-content: space-between;
    overflow: visible;
    position: relative;
    transform: translateY(-20vh);

  }
  .num1 {
    rotate: -180deg;
    scale: -1;
    width: 25vh;
    height: 40vh;
    text-align: center;
    font-size: 45vh;
    place-self: center;
  }

  /* INTRO-MODE ANIMATIONS ---------------------------------------------------------------------------------------------------------------*/


  body.intro-mode .number-container {

    transform: translateY(-60vh);
    overflow: visible;
  }

  @keyframes intro-number1 {
    0%{transform: translate(41vh, 50vw);} 50% {  transform: translate(25vw, 50vw);} 100%{transform: translate(25vw, 63vh);}
  }
  
  @keyframes intro-number2 {
    0%{transform: translate(21vh, 50vw);} 50% {  transform: translate(10vw, 50vw);} 100%{transform: translate(10vw,63vh);}
  }
  
  
  @keyframes intro-number3 {
    0%{transform: translate(0vw, 50vw);} 50% {  transform: translate(0vw, 50vw);} 100%{transform: translate(0vw, 63vh);}
  }
  
  @keyframes intro-number4 {
    0%{transform: translate(-21vh, 50vw);} 50% {  transform: translate(-15vw, 50vw);} 100%{transform: translate( -15vw,63vh);}
  
  }
  
  @keyframes intro-number5 {
    0%{transform: translate(-41vh, 50vw);} 50% {  transform: translate(-30vw, 50vw);} 100%{transform: translate(-30vw,63vh);}
  }
  

  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;
  }



 


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

  body.main-mode .having-thought {
    display: flex;
    font-size: 7.5vw;
  }

  body.main-mode .decide {
    height: 100%;
    width: 100%;
    padding-bottom: 2%;
    justify-content: flex-start;
    align-items: end;
    position: relative;
  }

  body.main-mode .decide::after {
    content: "decide";
    padding-bottom: 5%;
    font-size: 7vw;
    transform: translateY(3vh);
    animation: decide var(--duration) steps(1) infinite;
    white-space: pre;
    transform: translateY(0vw);

  }

  @keyframes decide {

    0%,90% {  content: "decide";}90.01%,100% {  content: "un \A decided";}
  }

  body.main-mode .having-decided {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    grid-area: 4/4/5/5;
    font-size: 3vw;
    text-align: center;
    transform: translateX(2vw);

  }

  body.main-mode .having-decided::after {
    content: "Having decided";
    display: inline-block;
    animation: having-decided var(--duration) steps(1) infinite;
    animation-fill-mode: forwards;
    position: relative;
    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(-10%);  }
  }

  body.main-mode .do-not-think {
    grid-area: 5/4/6/6;
    font-size: 3vw;
  }

  body.main-mode .not {
    display: flex;
    grid-area: 5/5/6/6;
    font-size: 2vw;
    align-items: end;
  }

  body.main-mode .not-think1 {
    grid-area: 5/6/6/7;
    font-size: 2vw;
    max-height: 100%;
    max-width: 100%;
    text-align: left;
    transform: translateY(2vh);
    padding: 4%;
  }

  body.main-mode .not-think2 {
    grid-area: 5/6/6/7;
    font-size: 2vw;
    max-height: 100%;
    max-width: 100%;
    text-align: left;
    translate: 2vh 1vw;
    padding: 4%;
  }

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


  @keyframes number1 {
    0%{transform: translate(25vw, 22.5vh);}50%{ transform: translate(41vh, 22.5vh);} 100% {  transform: translate(25vw, 22.5vh);}
  }
  
  @keyframes number2 {
    0%{transform: translate(15vw, 22.5vh);} 50%{transform: translate(21vh, 22.5vh);} 100% {transform: translate(15vw, 22.5vh);}
  }
  
  @keyframes number4 {
    0%{transform: translate(-15vw, 22.5vh);}50%{ transform: translate(-21vh, 22.5vh);} 100% {  transform: translate(-15vw, 22.5vh);}
  }
  
  @keyframes number5 {
    0%{transform: translate(-30vw, 22.5vh);} 50%{transform: translate(-41vh, 22.5vh);} 100% {transform: translate(-30vw, 22.5vh);}
  }


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

  }

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

  }

  body.main-mode .number.num1:nth-child(3) {
    z-index: 5;
    transform: translate(0vh,22.5vh);

  }

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

  }

  body.main-mode .number.num1:nth-child(5) {
    transform: translate(-28vh, 2vh);
    animation: number5 var(--numduration) ease-in-out infinite , body-color-swap var(--duration) infinite, font-color-swap var(--duration) infinite;

    z-index: 1;
  }

  /* CIRCLE----------------------------------------------------------------------------------------------------------*/

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

  }

  .big-circle:nth-child(1) {
    transform: translate(0, 45vh);
    transform-origin: center;

  }

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

  }

  .big-circle:nth-child(3) {
    transform: translate(-20vw, 45vh);

  }

  .xl-circle {
    width: 10vw;
    height: 10vw;
  }
  
  .s-circle{
    display: none;
  }

}