@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300&display=swap');

* {
  font-family: 'Space Grotesk', sans-serif;
  text-align: center;
  color: white;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
body::-webkit-scrollbar {
width: 0px;
  border-radius: 50%;
}
body::-webkit-scrollbar-track{
background: #000000;
  width:0px;
}
body::-webkit-scrollbar-thumb {
background: #ffffff;
}
body {
  background-color: black;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
}
.hidden {
  opacity: 0;
  transition: all 0.5s;
  filter: blur(5px);
  transform:translateX(-100%);
  width:50%;
}
.right {
  transform: translateX(100%);
  transition: all 1s;
}
.show {
  opacity: 1;
  filter: blur(0px);
  transform: translateX(0);
  transition: all 1s;
}
h1 {
  font-size: 5em;
}

h2 {
  z-index: auto;
}

section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 400px;
  padding-top: 200px;
  padding-bottom: 200px;
  z-index: 1;
}

.blue {
  background: #3c31dd;
}

.orange {
  z-index: 0;
  background: #e35e20;
}

.black {
  background: black;
}

.grey {
  background: #444444;
}

.curve {
  position: absolute;
  height: 250px;
  width: 100%;
  bottom: 0;
  text-align: center;
  z-index: -50;
}

.curve::before {
  content: '';
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 55%;
  height: 100%;
  transform: translate(85%, 60%);
  background-color: #e35e20;
  z-index: -50;
}

.curve-blue {
  position: absolute;
  height: 250px;
  width: 100%;
  bottom: 0;
  text-align: center;
  z-index: -50;
}

.curve-blue::before {
  content: '';
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 55%;
  height: 100%;
  transform: translate(85%, 60%);
  background-color: #e35e20;
  z-index: -50;
}

.curve-blue::after {
  content: '';
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 55%;
  height: 100%;
  background-color: #3c31dd;
  transform: translate(-4%, 40%);
  z-index: -1;
}

.curve::after {
  content: '';
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 55%;
  height: 100%;
  background-color: black;
  transform: translate(-4%, 40%);
  z-index: -1;
}

p {
  padding: 10px;
  margin: 20px;
  font-size: 1.8em;
}

hr {
  visibility: hidden;
  user-select: none;
  margin: 10vh;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.scrollFade {
  opacity: 1;
  pointer-events: all;
}

.scrollFade--hidden {
  opacity: 0;
  pointer-events: none;
}

.scrollFade--visible {
  opacity: 1;
  pointer-events: all;
}

.scrollFade--animate {
  transition: opacity 0.4s ease-in-out;
}

.custom-shape-divider-bottom-1687603820 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-1687603820 svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 210px;
}

.custom-shape-divider-bottom-1687603820 .shape-fill {
  fill: #e35e20;
}

.custom-shape-divider-bottom-1687604162 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-1687604162 svg {
  position: relative;
  display: block;
  width: calc(179% + 1.3px);
  height: 173px;
}

.custom-shape-divider-bottom-1687604162 .shape-fill {
  fill: #3c31dd;
}

.custom-shape-divider-bottom-1687605598 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-1687605598 svg {
  position: relative;
  display: block;
  width: calc(131% + 1.3px);
  height: 295px;
}
    .showformobile {
    width: 0;
    height: 0;
    visibility: hidden;
  }
.custom-shape-divider-bottom-1687605598 .shape-fill {
  fill: #000000;
}
@media only screen and (max-width: 900px) {
    .hideformobile {
    width: 0;
    height: 0;
    visibility: hidden;
  }
  .showformobile {
    width: 100%;
    height: 100%;
    visibility: visible;
  }

}
@media only screen and (max-width: 950px) {
    .long-text {
    font-size: 3em;
  }

}
@media only screen and (max-width: 650px) {
  h1 {
    font-size: 2.5em;
  }
  p {
    font-size: 1.2em;
  }

  .fade-in-text {
    width: 80%;
  }

}

.ringularity:hover span {
  display: none;
  transition: 500ms;
}

.ringularity:hover:before {
  content: 'Ringularity';
  transition: 500ms;
}

.custom-shape-divider-bottom-1687608237 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-1687608237 svg {
  position: relative;
  display: block;
  width: calc(186% + 1.3px);
  height: 202px;
}

.custom-shape-divider-bottom-1687608237 .shape-fill {
  fill: #62a81e;
}

.green {
  background: #62a81e;
}

.red {
  background: #d34545;
}

.custom-shape-divider-bottom-1687608472 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-1687608472 svg {
  position: relative;
  display: block;
  width: calc(186% + 1.3px);
  height: 202px;
}
.hoverall {
  opacity: 0.5;
  transition: 500ms;
}
.hoverall:hover {
  opacity: 1;
  transition: 500ms;
}
.custom-shape-divider-bottom-1687608472 .shape-fill {
  fill: #d34545;
}

.custom-shape-divider-bottom-1687608919 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-1687608919 svg {
  position: relative;
  display: block;
  width: calc(300% + 1.3px);
  height: 350px;
}

.custom-shape-divider-bottom-1687608919 .shape-fill {
  fill: #000000;
}

.hidden-text {
  visibility: hidden;
  user-select: none;
  font-size: 2em;
  margin-bottom: 50px;
}

li {
  color: white;
}
:root {  
  --green: rgb(42, 252, 152);
  --blue: rgb(41, 121, 255);
}

@keyframes float {
  from, to {
    transform: translateY(-0%);
  }
  
  50% {    
    transform: translateY(-3%);
  }
}

@keyframes background-pan {
  from {
    background-position: 1000% center;
  }
  
  to {
    background-position: 0% center;
  }
}
.line {
  display: flex;
  justify-content: space-between;

}

.word {
  color: white;
  font-size: clamp(2rem, 4vw, 5rem);
  font-family: "Rubik", sans-serif;
  margin: 0rem;
  text-transform: uppercase;
  transition: opacity 250ms ease;
}

a {
  text-decoration: none;
}
#text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  user-select: none;
}
#text:has(.fancy:hover) .word:not(.fancy:hover) {
  opacity: 0.2;
}

.fancy span {
  display: inline-block;
  user-select: none;
}

.fancy > .outer {
  transition: transform 350ms ease;
}

.fancy:hover > .outer {
  transition-duration: 800ms;
}

.fancy:hover > .outer > .inner {
  animation: float 5s ease infinite;
}

.fancy:hover > .outer > .inner > .letter {
  background: linear-gradient(
    to right,
    var(--blue),
    var(--green),
    var(--blue)
  
  );
  background-size: 1000%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: background-pan 150s linear infinite;
}
img {
  border-radius: 25px;
  margin: 10px;
  height: 30vh;
}
.fancy:hover > .outer:nth-child(1) {
  transform: translate(-80%, 60%) rotate(8deg);
}

.fancy:hover > .outer:nth-child(2) {
  transform: translate(-40%, 20%) rotate(4deg);
}

.fancy:hover > .outer:nth-child(3) {
  transform: translate(-10%, 60%) rotate(-6deg);
}

.fancy:hover > .outer:nth-child(4) {
  transform: translate(0%, 8%) rotate(-8deg);
}

.fancy:hover > .outer:nth-child(5) {
  transform: translate(0%, -20%) rotate(5deg);
}

.fancy:hover > .outer:nth-child(6) {
  transform: translate(0%, 20%) rotate(-3deg);
}

.fancy:hover > .outer:nth-child(7) {
  transform: translate(0%, -40%) rotate(-5deg);
}

.fancy:hover > .outer:nth-child(8) {
  transform: translate(0%, 15%) rotate(10deg);
}

.fancy:hover > .outer:nth-child(9) {
  transform: translate(0%, -50%) rotate(8deg);
}

.fancy:hover > .outer:nth-child(10) {
  transform: translate(0%, 15%) rotate(-6deg);
}

.fancy:hover > .outer:nth-child(11) {
  transform: translate(50%, -10%) rotate(-3deg);
}

.fancy:hover > .outer:nth-child(12) {
  transform: translate(120%, -30%) rotate(-10deg);
}