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

body {
  background-color: rgb(243, 243, 243);
}

.main-container {
  display: flex;
  height: 100vh;
  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;
}




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

.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;
  padding: 3%;
}

.decide {
  grid-column: 4/6;
  grid-row: 2/3;
  font-size: 5vw;
  max-height: 100%;
  max-width: 100%;
  text-align: left;
  align-self: end;
  padding-left: 3%;
}

.having-decided {
  grid-area: 4/3/5/4;
  font-size: 2vw;
  max-height: 100%;
  max-width: 100%;
  place-self: center;
  padding: 3%;
}

.do-not-think {
  grid-area: 5/3/6/5;
  font-size: 2vw;
  max-height: 100%;
  max-width: 100%;
  text-align: left;
  translate: 15%;
  padding: 3%;
}

.not {
  grid-area: 6/4/7/5;
  font-size: 1vw;
  max-height: 100%;
  max-width: 100%;
  text-align: left;
  padding: 6%;
}

.not-think1 {
  grid-area: 7/6/7/7;
  font-size: 1vw;
  max-height: 100%;
  max-width: 100%;
  text-align: left;

  padding: 4%;
}

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




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


.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;
  place-self: center;
}

.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;
  place-self: center;
}

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

.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%;
  background-color: blue;
  place-self: center;
  transform: translate(-6vh, 2vh);

}


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


}

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

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

}

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

}

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

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

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

  justify-content: space-between;
  overflow: hidden;
  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;


}

.number.num1:nth-child(1) {
  z-index: 3;
  transform: translate(-4vw, 30vw);


}

.number.num1:nth-child(2) {
  z-index: 4;
  transform: translate(-2vw, 30vw);

}

.number.num1:nth-child(3) {
  z-index: 5;
  transform: translate(0vw, 30vw);

}

.number.num1:nth-child(4) {
  z-index: 2;
  transform: translate(2vw, 30vw);

}

.number.num1:nth-child(5) {
  transform: translate(4vw, 30vw);

  z-index: 1;
}



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

/*.circle-grid{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  height: 100vh;
  width:40vw;
  position: relative;
  z-index: 6;

} 
.circle {
  width: 30vw;
  he ight: 30vw;
  border: 1vw solid blue;
  border-radius: 50%;
  position: relative; 
  z-index: 6;


} */



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


.ver1 {
  grid-column: 2/3;
  grid-row: 2/8;
  border-left: solid 3px blue;
  border-right: solid 3px 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 3px blue;
  border-image: linear-gradient(to top, rgb(206, 201, 230) 9%, blue 75%) 0.5;
}

.ver3 {
  grid-column: 6/7;
  grid-row: 1/8;
  border-left: solid 3px 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 3px blue;

}

.ver4-2 {
  grid-column: 5/6;
  grid-row: 3/8;
  border-left: solid 3px 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 -3px 0 0 blue;
}

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

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







@media (max-width: 800px) {
  .main-container {
    display: flex;
    flex-direction: column;
    height: 100vh;

  }

  .grid-container {
    grid-template-columns: 15% 1fr 1fr 1fr 1fr 20%;
    grid-template-rows: 25% 1fr 1fr 0.5fr 0.5fr 1fr;

    width: 100vw;
    height: 60vh;
  }

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

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



  .decide {
    grid-column: 4/6;
    grid-row: 2/3;
    font-size: 6.5vw;
    max-height: 100%;
    max-width: 100%;
    text-align: left;
    align-self: end;
    padding-left: 3%;
  }
  .having-thought {
    grid-column: 1/4;
    grid-row: 1/2;
    font-size: 8vw;
    max-height: 100%;
    max-width: 100%;
    text-align: left;
    justify-self: end;
    align-self: start;
    padding: 3%;
  }
  
  .decide {
    grid-column: 4/6;
    grid-row: 2/3;
    font-size: 9vw;
    max-height: 100%;
    max-width: 100%;
    text-align: left;
    align-self: end;
    padding-left: 3%;
  }
  
  .having-decided {
    grid-area: 4/4/5/5;
    font-size: 3.5vw;
    max-height: 100%;
    max-width: 100%;
    place-self: center;
    padding: 3%;
  }
  
  .do-not-think {
    grid-area: 5/4/6/6;
    font-size: 3.5vw;
    max-height: 100%;
    max-width: 100%;
    text-align: left;
    translate: 17%;
    padding: 3%;
  }
  
  .not {
    grid-area: 6/5/7/6;
    font-size: 2vw;
    max-height: 100%;
    max-width: 100%;
    text-align: left;
    padding: 6%;
  }
  
  .not-think1 {
    grid-area: 6/6/6/7;
    font-size: 3vw;
    max-height: 100%;
    max-width: 100%;
    text-align: left;
  
    padding: 4%;
  }
  
  .not-think2 {
    grid-area: 6/6/6/7;
    font-size: 3vw;
    max-height: 100%;
    max-width: 100%;
    text-align: left;
    translate: 2vh 4vw;
    padding: 4%;
    z-index: 7;
  }

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

  .num1 {
  rotate: -180deg;
  scale: -1;
  width: 35vw;
  height: 80vw;
  line-height: 80%;
  text-align: center;
  font-size: 60vw;
  /*background-color: rgb(238, 238, 238);*/
  margin: -30%;
  clip-path: inset(0 0 0 5%);
  place-self: center;
  }


  .number.num1:nth-child(1) {
    z-index: 3;
    transform: translate(30vw, 20vw);
  
  
  }
  
  .number.num1:nth-child(2) {
    z-index: 4;
    transform: translate(15vw, 20vw);
  
  }
  
  .number.num1:nth-child(3) {
    z-index: 5;
    transform: translate(0, 20vw);
  
  }
  
  .number.num1:nth-child(4) {
    z-index: 2;
    transform: translate(-15vw,20vw);
  
  }
  
  .number.num1:nth-child(5) {
    transform: translate(-30vw, 20vw);
  
    z-index: 1;
  }

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

  
.ver1 {
  grid-column: 2/3;
  grid-row: 2/8;
  border-left: solid 2px blue;
  border-right: solid 2px 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 2px blue;
  border-image: linear-gradient(to top, rgb(206, 201, 230) 9%, blue 75%) 0.5;
}

.ver3 {
  grid-column: 6/7;
  grid-row: 1/8;
  border-left: solid 2px 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 2px blue;

}

.ver4-2 {
  grid-column: 5/6;
  grid-row: 3/8;
  border-left: solid 2px 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 -2px 0 0 blue;
}

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

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



  .circle{
    grid-column: 1/7;
    grid-row: 1/7;
    width: 60vw;
    height: 60vw;
    border: 0.3vw solid blue;
    border-radius: 50%;
    place-self: center;
    transform: translate(39vw);
    z-index: 6;
    max-width: 100%;
    max-height: 100%;
  
  }
  
  .circle:nth-child(1){
    transform: translate(0, 50vh);
    transform-origin: center;
  
  }
  .circle:nth-child(2){
    transform: translate(20vw, 50vh);
  
  }
  
  .circle:nth-child(3){
    transform: translate(-20vw, 50vh);
  
  }
  

}