@media (max-width: 500px) {

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

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

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

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

    justify-content: space-between;
    position: relative;
  }

  /* INTRO ANIMATIONS ----------------------------------------------------------------------------------------------------------*/
  body.main-mode .number-container {

    transform: translateY(-1vh);
    overflow: visible;
  }
  body.intro-mode .number-container {

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

  @keyframes intro-number1 {
    0%{transform: translate(45vw, 50vw);} 50% {  transform: translate(25vw, 50vw);} 100%{transform: translate(25vw, 112vw);}
  }
  
  @keyframes intro-number2 {
    0%{transform: translate(23vw, 50vw);} 50% {  transform: translate(10vw, 50vw);} 100%{transform: translate(10vw,112vw);}
  }
  
  
  @keyframes intro-number3 {
    0%{transform: translate(0vw, 50vw);} 50% {  transform: translate(0vw, 50vw);} 100%{transform: translate(0vw, 112vw);}
  }
  
  @keyframes intro-number4 {
    0%{transform: translate(-22vw, 50vw);} 50% {  transform: translate(-15vw, 50vw);} 100%{transform: translate( -15vw,112vw);}
  
  }
  
  @keyframes intro-number5 {
    0%{transform: translate(-45vw, 50vw);} 50% {  transform: translate(-30vw, 50vw);} 100%{transform: translate(-30vw,112vw);}
  }
  

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

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

  @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 ver {

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

  @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 top, blue 5%, rgb(206, 201, 230) 90%) 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 top, blue 9%, rgb(206, 201, 230) 90%) 0.5;  }
  }

  @keyframes border-color-swap {

    0%,90% {border: 0.2vh solid rgb(99, 78, 255);}
    90.01%,100% {border: 0.2vh solid rgb(217, 217, 217); }
  }
  
  /* TEXT ----------------------------------------------------------------------------------------------------------*/

  body.main-mode .having-thought {
    grid-column: 4/6;
    grid-row: 2/3;
    font-size: 8.5vw;
    place-self: center;
  }


  body.main-mode .decide {
    display: flex;
    grid-column: 1/4;
    grid-row: 1/2;
    height: 100%;
    width: 100%;
    padding-bottom: 2%;
    justify-content: center;
    align-items: end;
    position: relative;
  }

  body.main-mode .decide::after {
    content: "decide";
    font-size: 9.5vw;
    transform: translate(-1vh,0vh);
    animation: decide var(--duration) steps(1) infinite;
    white-space: pre;
  }

  @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: 3/3/4/4;
    font-size: 5vw;
    text-align: center;
    transform: translateX(3vw);

  }

  body.main-mode 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(-0%);}
  }



  body.main-mode .do-not-think {
    grid-area: 4/4/5/5;
    font-size: 4vw;
    display: flex;
    text-align: center;
    align-items: center;
    padding: 3%;
  }

  body.main-mode .do-not-think::after {
    content: "Hdo-not-think";
    display: inline-block;
    animation: do-not-think var(--duration) steps(1) infinite;
    transform: translate(0%);

    animation-fill-mode: forwards;
    white-space: pre;
  }

  @keyframes do-not-think {

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


  body.main-mode .not-think1 {
    grid-area: 4/5/5/6;
    font-size: 4vw;
    text-align: center;
    display: flex;
    place-self: center;
    padding: 4%;
  }
  body.main-mode .not-think1::after {
    content: "Not-think";
    display: inline-block;
    animation: not-think var(--duration) steps(1) infinite;
    transform: translateY(-2vh);
    animation-fill-mode: forwards;
    white-space: pre;
  }

  @keyframes not-think {

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


  body.main-mode .not {
    display: none;

  }

  body.main-mode .not-think2 {
   display: none;
  }

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

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

    justify-content: space-between;
    overflow: hidden;
    position: relative;
  }

  .num1 {
    rotate: -180deg;
    scale: -1;
    width: 23vh;
    height: 30vh;
    line-height: 80%;
    text-align: center;
    font-size: 40vh;
    position: relative;
    background-color: rgb(243, 243, 243);
    margin: -30%;
    clip-path: inset(0 0 0 5%);
    place-self: center;
    transform: translateX(21%);
  }


  @keyframes number1 {
    0%{transform: translate(25vw, 4vw);}50%{ transform: translate(45vw, 4vw);} 100% {  transform: translate(25vw, 4vw);}
  }
  
  @keyframes number2 {
    0%{transform: translate(10vw, 4vw);} 50%{transform: translate(23vw, 4vw);} 100% {transform: translate(10vw, 4vw);}
  }
  
  @keyframes number4 {
    0%{transform: translate(-15vw, 4vw);}50%{ transform: translate(-22vw, 4vw);} 100% {  transform: translate(-15vw, 4vw);}
  }
  
  @keyframes number5 {
    0%{transform: translate(-30vw, 4vw);} 50%{transform: translate(-45vw, 4vw);} 100% {transform: translate(-30vw, 4vw);}
  }




  body.main-mode .number.num1:nth-child(1) {
    z-index: 3;
    transform: translate(25vw, 4vw) ;
    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(10vw, 4vw) ;
    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(0vw, 4vw) ;

  }

  body.main-mode .number.num1:nth-child(4) {
    z-index: 2;
    transform: translate(-15vw, 4vw) ;
    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(-30vw, 4vw) ;
    animation: number5 var(--numduration) ease-in-out infinite , body-color-swap var(--duration) infinite, font-color-swap var(--duration) infinite;

    z-index: 1;
  }

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

  .ver1,.ver4-1,.ver4-2,.ver2,.ver3 {
    border-left: 0.2vh solid blue;
    border-right: none;
  }

  .ho1,.ho2,.ho3 {
    box-shadow: inset 0 0.2vh 0 0 blue;
  }

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


  .big-circle {
    grid-column: 1/7;
    grid-row: 1/7;
    width: 60vw;
    height: 60vw;
    border: 0.6vw 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 {
    grid-column: 5/6;
    grid-row: 1/2;
    height: 15vw;
    width: 15vw;
  }

  .m-circle {
    grid-column: 3/4;
    grid-row: 4/5;

    height: 4vw;
    width: 4vw;
  }

  .s-circle {
    display: none;
  }
}