:root {
  --dark: rgb(20, 20, 20);
  --yellow: rgb(253, 216, 53);
  --blue: rgb(98, 0, 234);

  --c1: rgb(3, 7, 18);
  --c2: rgb(163, 230, 53);

  --left-color: var(--c1);
  --right-color: var(--c2);
}

body {
  background-color: var(--dark);
  margin: 0px;
}

.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: 24vh 10vw;
  width: 80vw;
}

.side .fancy {
  font-family: "Permanent Marker", cursive;
  font-size: 1.8em;
  line-height: 0.6em;
}

#left-side {
 

  background: linear-gradient(-25deg,#ff2ff5,#ff00f2, #ab08d7);
  /* background-color:  #ab08d7; */
  width: 60%;
  height: 60%;
  z-index: 4;
}



#left-side .title {
  color: white;
}

#left-side .fancy {
  color: var(--right-color);
}

#right-side {
  

 

  height: 60%;
  background: linear-gradient(45deg,#acafff,#3ba3f2, #0008fb);
  /* background-color: #1d27db; */
}

#right-side .title {
  color: var(--dark);
}

#right-side .fancy {
  color: white;
}

#bottom-side-left {
  overflow: hidden;
  width: 60%;
  background: linear-gradient(25deg,#fb003f,#ff00f2, #ff80f9);
  /* background-color: #3ba3f2; */
}

#bottom-side-left .title {
  color: var(--dark);
}

#bottom-side-left .fancy {
  color: rgb(173, 17, 17);
}

#bottom-side-right {
  background: linear-gradient(-200deg,#3ba3f2,#53a8e9, #ab08d7);

  /* background: linear-gradient(-45deg,#2408d7,#ff00f2, #ff80f9); */
  /* background-color: #ff00f2; */
  /* ab08d7 */
}

#bottom-side-right .title {
  color: var(--dark);
}

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