/* 
-------------------------------------------
,,root and start
-------------------------------------------
*/
@font-face {
  font-family: mano;
  src: url("/fonts/MansaArabicText-EoRBold.woff2") format(woff2);
}
@font-face {
  font-family: mano-1;
  src: url("/fonts/MansaText-EoRBold.woff2") format(woff2);
}
@font-face {
  font-family: roman;
  src: url("/fonts/Sneaky-Times.woff2") format(woff2);
}

html {
  background-color: black;
}
body {
  font-family: mano;
  color: white;
  overflow: visible;
  height: 100vw;
}

.title {
  font-size: 3rem;
}
.title:nth-child(2n) {
}
.title:nth-child(2n + 1) {
  font-family: roman;
}
.hap {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
}

/* -------------------------------------------
,,fibo
//-------------------------------------------*/

#container-21 {
  width: 100vw;
  height: 100dvh;
  position: fixed;
  top: 0;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.square-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid rgb(255 255 255 / 50%);
  box-sizing: border-box;
  background: transparent;
  box-shadow: 1px 2px 50px #ffffff54;
}

.matrix-container {
  position: relative;
  width: 300px;
  height: 10px;
  margin: 50px auto;
  animation: bang 15s ease-in-out 0s infinite;
}

@keyframes bang {
  0% {
    width: 300px;
    height: 10px;
  }
  20% {
    width: 400px;
    height: 900px;
  }
  40% {
    width: 10px;
    height: 900px;
  }
  60% {
    width: 300px;
    height: 700px;
  }
}