@font-face {
  font-family: 'Cerebri Sans';
  src: url('/fonts/Cerebri-Sans/CerebriSans-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* General body styles */
body {
    height: 100vh;
    width: 100vw;
    display: grid;
    place-items: center;
    background-color: rgb(255, 255, 255);
    margin: 0px;
    overflow: hidden;
    font-family: "Cerebri Sans";
    font-size: 1.4vw;
  }
  
 .logo {
  font-family: "Cerebri Sans";
  font-size: 1.4vw;
  color: #201f49;
  margin-top: 5%;
 }
  
  /* Wrapper styles */
  #wrapper {
    top: -15%;
    aspect-ratio: 1.618;
    width: 90vmin;
    position: relative;
    background-color: rgb(255, 255, 255);
  }
  
  /* Shape styles */
  #wrapper > .shape {
    height: 30%;
    width: 100%;
    background-color: transparent;
    color: #0f2027;
    overflow: hidden;
    display: flex;
    justify-content: center;
    position: absolute;
    transition: ease-in-out;
    transition: left, top, height, width, border-radius;
    transition-duration: 1000ms;
    transition-timing-function: ease-in-out;
  }
  
  /* Inner div for text inside shapes */
  #wrapper > .shape > .inner-div {
    position: relative;
    text-align: center;
    display: block;
    top: 45%;
    z-index: 1;
    color: #ffffff;
    opacity: 1;
    transition: 1s;
    font-family: "Cerebri Sans";
    font-size: 1.6vw;
    word-break: break-all;

  }
  
  /* Text Hover Effect */
  #wrapper > .shape:hover .inner-div {
    opacity: 1;
  }
  
  #wrapper > .shape:hover {
    transition: 1s;
    z-index: 3; /* Bring hovered shape to the front */
  }
  
  
  /* Shape before and after pseudo-elements */
  #wrapper > .shape::before,
  #wrapper > .shape::after {
    content: "";
    position: absolute;
    display: block;
    width: 110%;
    height: 110%;
    left: -5%;
    right: 0%;
    opacity: 0;
  }
  /* 3 */

  #wrapper > .shape:nth-child(1) > .inner-div{
    top: 45%;
  }
  /* Individual shapes styles */
  #wrapper > .shape:nth-child(1) {
    background-color: #0736b8;
  }
  
  #wrapper > .shape:nth-child(1):before {
    background-color: #023381;
    top: 0;
    transform: translateY(-100%);
  }
  
  #wrapper > .shape:nth-child(1):after {
    background-color: #0649b4;
    bottom: 0;
    transition: all 1s 250ms cubic-bezier(0.075, 0.81, 0.165, 1);
    transform: translateY(100%);
  }
  
  #wrapper > .shape:nth-child(1):hover:before,
  #wrapper > .shape:nth-child(1):hover:after {
    transform: translateY(0px);
    opacity: 1;
  }
  
  /* 4 */
  #wrapper > .shape:nth-child(2) > .inner-div{
    top: 45%;
  }
  #wrapper > .shape:nth-child(2) {
    background-color: #201f49;
  }
  
  #wrapper > .shape:nth-child(2):before {
    background-color: #363579;
    top: 0;
    transform: translateY(-100%);
  }
  
  #wrapper > .shape:nth-child(2):after {
    background-color: #4a49a2;
    bottom: 0;
    transition: all 1s 250ms cubic-bezier(0.075, 0.81, 0.165, 1);
    transform: translateY(100%);
  }
  
  #wrapper > .shape:nth-child(2):hover:before,
  #wrapper > .shape:nth-child(2):hover:after {
    transform: translateY(0px);
    opacity: 1;
  }

  
  /* 5 */
  #wrapper > .shape:nth-child(3) {
    background-color: #e0e0f3;
  }
  
  #wrapper > .shape:nth-child(3):before {
    background-color: #c2c2d2;
    top: 0;
    transform: translateY(-100%);
  }
  
  #wrapper > .shape:nth-child(3):after {
    background-color: #91919c;
    bottom: 0;
    transition: all 1s 250ms cubic-bezier(0.075, 0.81, 0.165, 1);
    transform: translateY(100%);
  }
  
  #wrapper > .shape:nth-child(3):hover:before,
  #wrapper > .shape:nth-child(3):hover:after {
    transform: translateY(0px);
    opacity: 1;
  }
  /* 1 */
  /* More shapes with similar styles */
  #wrapper > .shape:nth-child(4) {
    background-color: #CBDCEB;
  }
  
  #wrapper > .shape:nth-child(4):before {
    background-color: #a3b1bd;
    top: 0;
    transform: translateY(-100%);
  }
  
  #wrapper > .shape:nth-child(4):after {
    background-color: #747e87;
    bottom: 0;
    transition: all 1s 250ms cubic-bezier(0.075, 0.81, 0.165, 1);
    transform: translateY(100%);
  }
  
  #wrapper > .shape:nth-child(4):hover:before,
  #wrapper > .shape:nth-child(4):hover:after {
    transform: translateY(0px);
    opacity: 1;
  }
  /* 2 */
  #wrapper > .shape:nth-child(5) {
    background-color: #608BC1;
  }
  
  #wrapper > .shape:nth-child(5):before {
    background-color: #4d709b;
    top: 0;
    transform: translateY(-100%);
  }
  
  #wrapper > .shape:nth-child(5):after {
    background-color: #3b5778;
    bottom: 0;
    transition: all 1s 250ms cubic-bezier(0.075, 0.81, 0.165, 1);
    transform: translateY(100%);
  }
  
  #wrapper > .shape:nth-child(5):hover:before,
  #wrapper > .shape:nth-child(5):hover:after {
    transform: translateY(0px);
    opacity: 1;
  }
  /* 6 */
  #wrapper > .shape:nth-child(6) {
    background-color: #133E87;
    z-index: 2;
  }
  
  #wrapper > .shape:nth-child(6):before {
    background-color: #1a52b1;
    top: 0;
    transform: translateY(-100%);
  }
  
  #wrapper > .shape:nth-child(6):after {
    background-color: #1f5bc4;
    bottom: 0;
    transition: all 1s 250ms cubic-bezier(0.075, 0.81, 0.165, 1);
    transform: translateY(100%);
  }
  
  #wrapper > .shape:nth-child(6):hover:before,
  #wrapper > .shape:nth-child(6):hover:after {
    transform: translateY(0px);
    opacity: 1;
  }

#wrapper > .shape:nth-child(6):hover {
  z-index: 10;
}

  /* 7 */
  #wrapper > .shape:nth-child(7) {
    background-color: #333333;
    z-index: 3;
  }

  #wrapper > .shape:nth-child(7) > .inner-div{
    top: 40%;
  }

  #wrapper > .shape:nth-child(7):before {
    background-color: #565555;
    top: 0;
    transform: translateY(-100%);
  }
  
  #wrapper > .shape:nth-child(7):after {
    background-color: #797979;
    bottom: 0;
    transition: all 1s 250ms cubic-bezier(0.075, 0.81, 0.165, 1);
    transform: translateY(100%);
  }
  
  #wrapper > .shape:nth-child(7):hover:before,
  #wrapper > .shape:nth-child(7):hover:after {
    transform: translateY(0px);
    opacity: 1;
  }
  
  /* Position and size for each configuration */
  #wrapper[data-configuration="1"] > .shape:nth-child(1) {  
	left: 0%;
	top: 0%;
	height: 50%;
	width: 20%;
  }
  
  #wrapper[data-configuration="1"] > .shape:nth-child(2) {  
	left: 20%;
	top: 0%;
	height: 50%;
	width: 30%;
  }
  
  #wrapper[data-configuration="1"] > .shape:nth-child(3) {  
	left: 50%;
	top: 0%;
	height: 100%;
	width: 50%;
  }
  
  #wrapper[data-configuration="1"] > .shape:nth-child(4) {  
	left: 0%;
	top: 50%;
	height: 50%;
	width: 30%;
  }
  
  #wrapper[data-configuration="1"] > .shape:nth-child(5) {  
	left: 30%;
	top: 50%;
	height: 50%;
	width: 20%;
  }
  
  #wrapper[data-configuration="1"] > .shape:nth-child(6) {  
	left: 70%;
	top: 50%;
	height: 50%;
	width: 30%;
  }
  
  #wrapper[data-configuration="1"] > .shape:nth-child(7) {  
	left: 90%;
	top: 75%;
	height: 25%;
	width: 10%;
  }
  
  #wrapper[data-configuration="2"] > .shape:nth-child(1) {
	left: 25%;
	top: 20%;
	height: 80%;
	width: 15%;
  }
  
  #wrapper[data-configuration="2"] > .shape:nth-child(2) {  
	left: 40%;
	top: 20%;
	height: 50%;
	width: 10%;
  }
  
  #wrapper[data-configuration="2"] > .shape:nth-child(3) {  
	left: 50%;
	top: 0%;
	height: 100%;
	width: 25%;
  }
  
  #wrapper[data-configuration="2"] > .shape:nth-child(4) {  
	left: 0%;
	top: 0%;
	height: 50%;
	width: 10%;
  }
  
  #wrapper[data-configuration="2"] > .shape:nth-child(5) {  
	left: 10%;
	top: 0%;
	height: 70%;
	width: 15%;
  }
  
  #wrapper[data-configuration="2"] > .shape:nth-child(6) {  
	left: 75%;
	top: 10%;
	height: 80%;
	width: 15%;
  }
  
  #wrapper[data-configuration="2"] > .shape:nth-child(7) {  
	left: 90%;
	top: 40%;
	height: 60%;
	width: 10%;
  }
  
  #wrapper[data-configuration="3"] > .shape:nth-child(1) {
	left: 0%;
	top: 16.5%;
	height: 32%;
	width: 20%;
  }
  
  #wrapper[data-configuration="3"] > .shape:nth-child(2) {  
	left: 20%;
	top: 2.7%;
	height: 55%;
	width: 34%;
  }
  
  #wrapper[data-configuration="3"] > .shape:nth-child(3) {  
	left: 38%;
	top: 0%;
	height: 100%;
	width: 62%;
  }
  
  #wrapper[data-configuration="3"] > .shape:nth-child(4) {  
	left: 0%;
	top: 47.3%;
	height: 55%;
	width: 34%;
  }
  
  #wrapper[data-configuration="3"] > .shape:nth-child(5) {   
	left: 34%;
	top: 56.4%;
	height: 32%;
	width: 20%;
  }
  
  #wrapper[data-configuration="3"] > .shape:nth-child(6) {  
	left: 66%;
	top: 45%;
	height: 55%;
	width: 34%;
  }
  
  #wrapper[data-configuration="3"] > .shape:nth-child(7) {  
	left: 80%;
	top: 68%;
	height: 32%;
	width: 20%;
  }
  
  #wrapper[data-roundness="1"] > .shape {   
	border-radius: 6rem; 
  }
  
  #wrapper[data-roundness="2"] > .shape {  
	border-radius: 0rem;
  }
  
  #wrapper[data-roundness="3"] > .shape {  
	border-radius: 30rem;
  }
  
  #wrapper[data-roundness="4"] > .shape:nth-child(1) {  
	border-bottom-left-radius: 10rem;
  }
  
  #wrapper[data-roundness="4"] > .shape:nth-child(2) {  
	border-radius: 20rem;
  }
  
  #wrapper[data-roundness="4"] > .shape:nth-child(3) {  
	border-top-right-radius: 12rem;
  }
  
  #wrapper[data-roundness="4"] > .shape:nth-child(4) {  
	border-top-right-radius: 10rem;
	border-bottom-right-radius: 10rem;
  }
  
  #wrapper[data-roundness="4"] > .shape:nth-child(5) {  
	border-bottom-left-radius: 10rem;
  }
  
  #wrapper[data-roundness="4"] > .shape:nth-child(6) {  
	border-top-left-radius: 16rem;
  }
  
  #wrapper[data-roundness="4"] > .shape:nth-child(7) {  
	border-top-left-radius: 10rem;
  }


/* Mobile specific adjustments */
@media (max-width: 600px) {
  /* Update the wrapper to a flex container stacked vertically */
  body {
      font-family: 'Cerebri Sans', Arial, sans-serif;

  #wrapper {
    width: 97%; /* Full width of the screen */
    height: 70vh; /* Full height of the screen */
    position: relative;
    background-color: rgb(255, 255, 255);
    overflow-x: hidden;
    overflow-y: hidden;
  }

  #wrapper > .shape > .inner-div {
    font-size: 1.6vh
  }

  .logo {
    font-family: "Cerebri Sans";
    font-size: 1.4vh;
    color: #201f49;
    margin-top: -10%;
   }