body {

  margin: 0px;
  scrollbar-width: none;

}

body::-webkit-scrollbar {
  display: none;

}

* {
  scrollbar-width: none;
  /* Firefox implementation */
}

.side {
  display: grid;
  height: 100%;
  width: 100%;
  overflow: hidden;
  place-items: center;
  position: absolute;

}

.side .title {
  font-family: "Montserrat", sans-serif;
  font-size: 3.5vw;
  font-weight: 400;

  margin: 27vh 10vw;
  /* margin-top: 25%; */
  width: 80vw;
}

.side .fancy-page {
  font-family: "ComicRelief";
  font-size: 4vw;
  line-height: 0.6em;
}

#left-side {
  background: #D0FF00;
  width: 50%;
  height: 50%;
  z-index: 4;
}



#left-side .title {
  color: #8338EC;
}

#left-side .fancy-page {
  color: #FF006E;
}

#side-one {
  background: #FF006E;
  /* width: 50%;*/
  height: 100%;
}

#side-one-title {
  color: #68FAFF;
  font-size: 7vw;
  font-weight: 400;
  font-family: "Montserrat", sans-serif;

  /* margin: 27vh 10vw; */
  /* margin-top: 25%; */
  width: 80vw;
}

#side-one-fancy1 {
  font-family: "ComicRelief";

  color: #8338EC;
  font-size: 7vw;
  line-height: 0.6em;
}

#side-one-fancy2 {
  font-family: "ComicRelief";

  color: #8338EC;
  font-size: 7vw;
  line-height: 0.6em;
}

#right-side {
  height: 50%;
  background: #68FAFF;

}

#right-side .title {
  color: #FF006E;
}

#right-side .fancy-page {
  color: #8338EC;
}

#bottom-side-left {
  overflow: hidden;
  width: 50%;
  background: #FF006E;
}

#bottom-side-left .title {
  color: #68FAFF;
}

#bottom-side-left .fancy-page {
  color: #8338EC;
}

#bottom-side-right {
  background: #8338EC;
}

#bottom-side-right .title {
  color: #D0FF00;
}

#bottom-side-right .fancy-page {
  color: #FF006E;
}


.center {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;

}


.squaresection {
  background: #b43333;
  color: rgb(87, 85, 83);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  padding: 0px;
  margin: 0px;
}

.square {
  background: #FF006E;
  width: 30vw;
  height: 30vw;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2vw;
  border-radius: 8px;
}

.square h1 {
  color: #68FAFF;
}


.triangle-container {
  width: 60vw;
  margin: auto;
  text-align: center;
  /* border: 1px solid white; */
  --text1-y: 150;
  /* Initial y-coordinate for text1 */
  --text2-y: 185;
  /* Initial y-coordinate for text2 */
  --text3-y: 225;

  /* Initial y-coordinate for text3 */

  &:hover,
  &:active {
    .triangle {
      transform: rotate(-180deg);
      transition: all 0.8s ease-in-out;
    }

    .text1 {
      transform: translate(0px, 35px);
      transition: all 0.8s ease-in-out;
      /* Transition for translation */
    }

    .text2 {
      transform: translate(0px, -45px);
      transition: all 0.8s ease-in-out;
      /* Transition for translation */
    }

    .text3 {
      transform: translate(0px, -120px);
      transition: all 0.8s ease-in-out;
      /* Transition for translation */
    }
  }

  /* Define "out" transitions */
  .triangle:not(:hover),
  #text1:not(:hover),
  #text2:not(:hover),
  #text3:not(:hover) {
    transition: transform 0.8s ease-out;
    /* Slow transition for returning to the original state */
  }

  .triangle {

    fill: transparent;
    stroke: #F1F7ED;
    stroke-width: 8;
    transition: all 0.8s ease-in-out;

    @keyframes mymove {
      0% {
        opacity: 0;
      }

      50% {
        opacity: 1;
      }

      100% {
        opacity: 0;
      }
    }

    transform-origin: 150px 150px;
  }
}

@media only screen and (max-width: 500px) {
  .side .title {
    font-family: "Montserrat", sans-serif;
    font-size: 3.5vw;
    font-weight: 400;
    width: 80vw;
  }

  .square {
    background: #FF006E;
    width: 50vw;
    height: 50vw;
    font-size: 8vw;
    flex-direction: column;
  }

  .square h1 {
    color: #68FAFF;
  }

  .squaresection {
    background: #b43333;
    color: rgb(87, 85, 83);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    padding: 0px;
    margin: 0px;
  }

  .triangle-container {
    width: 90vw;
    margin: auto;
    text-align: center;

    .triangle {
      fill: transparent;
      stroke: #F1F7ED;
      stroke-width: 8;
      transition: all 0.8s ease-in-out;

      @keyframes mymove {
        0% {
          opacity: 0;
        }

        50% {
          opacity: 1;
        }

        100% {
          opacity: 0;
        }
      }

      transform-origin: 150px 150px;
    }
  }
}




::selection {
  color: #fff
}

.c0 ::selection,
::selection {
  background: #FF006E
}

.c1 ::selection {

  background: #ff006e
}

.c2 ::selection {

  background: #fd0872
}

.c3 ::selection {
  background: #fb0b76
}

.c4 ::selection {
  background: #f90e7a
}

.c5 ::selection {
  background: #f7107d
}

.c6 ::selection {
  background: #f51281
}

.c7 ::selection {
  background: #f31484
}

.c8 ::selection {
  background: #f11587
}

.c9 ::selection {
  background: #ef178b
}

.c10 ::selection {
  background: #ed188e
}

.c11 ::selection {
  background: #eb1991
}

.c12 ::selection {
  background: #e91b94
}

.c13 ::selection {
  background: #e71c97
}

.c14 ::selection {
  background: #e51d9a
}

.c15 ::selection {
  background: #e31e9d
}

.c16 ::selection {
  background: #e01fa0
}

.c17 ::selection {
  background: #de20a2
}

.c18 ::selection {
  background: #dc21a5
}

.c19 ::selection {
  background: #da22a8
}

.c20 ::selection {
  background: #d823aa
}

.c21 ::selection {
  background: #d524ad
}

.c22 ::selection {
  background: #d325af
}

.c23 ::selection {
  background: #d126b2
}

.c24 ::selection {
  background: #ce26b4
}

.c25 ::selection {
  background: #cc27b7
}

.c26 ::selection {
  background: #ca28b9
}

.c27 ::selection {
  background: #c729bc
}

.c28 ::selection {
  background: #c52abe
}

.c29 ::selection {
  background: #c22ac0
}

.c30 ::selection {
  background: #c02bc3
}

.c31 ::selection {
  background: #bd2cc5
}

.c32 ::selection {
  background: #ba2dc7
}

.c33 ::selection {
  background: #b82dc9
}

.c34 ::selection {
  background: #b52ecc
}

.c35 ::selection {
  background: #b22fce
}

.c36 ::selection {
  background: #b02fd0
}

.c37 ::selection {
  background: #ad30d2
}

.c38 ::selection {
  background: #aa31d4
}

.c39 ::selection {
  background: #a731d6
}

.c40 ::selection {
  background: #a432d8
}

.c41 ::selection {
  background: #a133da
}

.c42 ::selection {
  background: #9e33dc
}

.c43 ::selection {
  background: #9b34de
}

.c44 ::selection {
  background: #9834e0
}

.c45 ::selection {
  background: #9435e2
}

.c46 ::selection {
  background: #9136e4
}

.c47 ::selection {
  background: #8e36e6
}

.c48 ::selection {
  background: #8a37e8
}

.c49 ::selection {
  background: #8737ea
}

.c50 ::selection {
  background: #8338ec
}

.c51 ::selection {
  background: #8338ec
}

.c52 ::selection {
  background: #8342ec
}

.c53 ::selection {
  background: #824bed
}

.c54 ::selection {
  background: #8252ed
}

.c55 ::selection {
  background: #8159ee
}

.c56 ::selection {
  background: #8160ee
}

.c57 ::selection {
  background: #8066ee
}

.c58 ::selection {
  background: #7f6cef
}

.c59 ::selection {
  background: #7f71ef
}

.c60 ::selection {
  background: #7e76f0
}

.c61 ::selection {
  background: #7e7bf0
}

.c62 ::selection {
  background: #7d80f0
}

.c63 ::selection {
  background: #7d85f1
}

.c64 ::selection {
  background: #7c89f1
}

.c65 ::selection {
  background: #7c8ef2
}

.c66 ::selection {
  background: #7b92f2
}

.c67 ::selection {
  background: #7b96f2
}

.c68 ::selection {
  background: #7a9af3
}

.c69 ::selection {
  background: #7a9ef3
}

.c70 ::selection {
  background: #79a2f4
}

.c71 ::selection {
  background: #79a5f4
}

.c72 ::selection {
  background: #78a9f4
}

.c73 ::selection {
  background: #78adf5
}

.c74 ::selection {
  background: #77b0f5
}

.c75 ::selection {
  background: #77b3f5
}

.c76 ::selection {
  background: #76b7f6
}

.c77 ::selection {
  background: #75baf6
}

.c78 ::selection {
  background: #75bdf7
}

.c79 ::selection {
  background: #74c1f7
}

.c80 ::selection {
  background: #74c4f7
}

.c81 ::selection {
  background: #73c7f8
}

.c82 ::selection {
  background: #73caf8
}

.c83 ::selection {
  background: #72cdf9
}

.c84 ::selection {
  background: #72d0f9
}

.c85 ::selection {
  background: #71d3f9
}

.c86 ::selection {
  background: #70d5fa
}

.c87 ::selection {
  background: #70d8fa
}

.c88 ::selection {
  background: #6fdbfa
}

.c89 ::selection {
  background: #6fdefb
}

.c90 ::selection {
  background: #6ee0fb
}

.c91 ::selection {
  background: #6de3fc
}

.c92 ::selection {
  background: #6de6fc
}

.c93 ::selection {
  background: #6ce8fc
}

.c94 ::selection {
  background: #6cebfd
}

.c95 ::selection {
  background: #6beefd
}

.c96 ::selection {
  background: #6af0fe
}

.c97 ::selection {
  background: #6af3fe
}

.c98 ::selection {
  background: #69f5fe
}

.c99 ::selection {
  background: #69f8ff
}

.c100 ::selection {
  background: #68faff
}

.c101 ::selection {
  background: #68faff
}

.c102 ::selection {
  background: #6bfafc
}

.c103 ::selection {
  background: #6efafa
}

.c104 ::selection {
  background: #71faf7
}

.c105 ::selection {
  background: #74faf4
}

.c106 ::selection {
  background: #77fbf2
}

.c107 ::selection {
  background: #7afbef
}

.c108 ::selection {
  background: #7cfbec
}

.c109 ::selection {
  background: #7ffbe9
}

.c110 ::selection {
  background: #82fbe6
}

.c111 ::selection {
  background: #84fbe3
}

.c112 ::selection {
  background: #87fbe1
}

.c113 ::selection {
  background: #89fbde
}

.c114 ::selection {
  background: #8bfbdb
}

.c115 ::selection {
  background: #8efbd8
}

.c116 ::selection {
  background: #90fcd4
}

.c117 ::selection {
  background: #92fcd1
}

.c118 ::selection {
  background: #95fcce
}

.c119 ::selection {
  background: #97fccb
}

.c120 ::selection {
  background: #99fcc8
}

.c121 ::selection {
  background: #9bfcc4
}

.c122 ::selection {
  background: #9dfcc1
}

.c123 ::selection {
  background: #9ffcbd
}

.c124 ::selection {
  background: #a1fcba
}

.c125 ::selection {
  background: #a3fcb6
}

.c126 ::selection {
  background: #a5fdb2
}

.c127 ::selection {
  background: #a7fdaf
}

.c128 ::selection {
  background: #a9fdab
}

.c129 ::selection {
  background: #abfda7
}

.c130 ::selection {
  background: #adfda3
}

.c131 ::selection {
  background: #affd9f
}

.c132 ::selection {
  background: #b1fd9b
}

.c133 ::selection {
  background: #b3fd96
}

.c134 ::selection {
  background: #b5fd92
}

.c135 ::selection {
  background: #b7fd8d
}

.c136 ::selection {
  background: #b8fe88
}

.c137 ::selection {
  background: #bafe83
}

.c138 ::selection {
  background: #bcfe7e
}

.c139 ::selection {
  background: #befe79
}

.c140 ::selection {
  background: #bffe73
}

.c141 ::selection {
  background: #c1fe6d
}

.c142 ::selection {
  background: #c3fe67
}

.c143 ::selection {
  background: #c5fe60
}

.c144 ::selection {
  background: #c6fe59
}

.c145 ::selection {
  background: #c8fe51
}

.c146 ::selection {
  background: #caff49
}

.c147 ::selection {
  background: #cbff3f
}

.c148 ::selection {
  background: #cdff34
}

.c149 ::selection {
  background: #ceff24
}

.c150 ::selection {
  background: #d0ff00
}

.c151 ::selection {
  background: #d8fe2e
}

.c152 ::selection {
  background: #d9fb30
}

.c153 ::selection {
  background: #daf932
}

.c154 ::selection {
  background: #dbf634
}

.c155 ::selection {
  background: #dbf336
}

.c156 ::selection {
  background: #dcf138
}

.c157 ::selection {
  background: #ddee3a
}

.c158 ::selection {
  background: #deeb3c
}

.c159 ::selection {
  background: #dfe83d
}

.c160 ::selection {
  background: #e0e53f
}

.c161 ::selection {
  background: #e1e340
}

.c162 ::selection {
  background: #e1e042
}

.c163 ::selection {
  background: #e2dd44
}

.c164 ::selection {
  background: #e3da45
}

.c165 ::selection {
  background: #e4d746
}

.c166 ::selection {
  background: #e5d448
}

.c167 ::selection {
  background: #e5d049
}

.c168 ::selection {
  background: #e6cd4b
}

.c169 ::selection {
  background: #e7ca4c
}

.c170 ::selection {
  background: #e8c74d
}

.c171 ::selection {
  background: #e9c34f
}

.c172 ::selection {
  background: #eac050
}

.c173 ::selection {
  background: #eabd51
}

.c174 ::selection {
  background: #ebb952
}

.c175 ::selection {
  background: #ecb554
}

.c176 ::selection {
  background: #edb255
}

.c177 ::selection {
  background: #edae56
}

.c178 ::selection {
  background: #eeaa57
}

.c179 ::selection {
  background: #efa658
}

.c180 ::selection {
  background: #f0a25a
}

.c181 ::selection {
  background: #f19e5b
}

.c182 ::selection {
  background: #f19a5c
}

.c183 ::selection {
  background: #f2965d
}

.c184 ::selection {
  background: #f3915e
}

.c185 ::selection {
  background: #f48d5f
}

.c186 ::selection {
  background: #f48860
}

.c187 ::selection {
  background: #f58361
}

.c188 ::selection {
  background: #f67e62
}

.c189 ::selection {
  background: #f77863
}

.c190 ::selection {
  background: #f87364
}

.c191 ::selection {
  background: #f86d65
}

.c192 ::selection {
  background: #f96766
}

.c193 ::selection {
  background: #fa6067
}

.c194 ::selection {
  background: #fb5968
}

.c195 ::selection {
  background: #fb5169
}

.c196 ::selection {
  background: #fc496a
}

.c197 ::selection {
  background: #fd3f6b
}

.c198 ::selection {
  background: #fe336c
}

.c199 ::selection {
  background: #fe246d
}

.c200 ::selection {
  background: #ff006e
}