body {
  overflow: visible;
  scroll-snap-type: y mandatory;
}
.card {
  width: 100%;
  height: var(--vh,100vh);
  overflow: hidden;
  /* position: absolute; */
  pointer-events: none;
}
.background {
  height: var(--vh,100%);
  width: 100%;
  position: absolute;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: 
    linear-gradient(45deg,#0000 0 23px, #0003 23px 24px, #0000 24px) 0 0 /20px 20px,
    linear-gradient(-45deg,#0000 0 23px, #0003 23px 24px, #0000 24px) 20px 10px /20px 20px;
  background-color: #212121;
}
.prf-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
@supports (aspect-ratio: 16/9) {
  .prf {
    aspect-ratio: 16/9;
  }
}
@supports not (aspect-ratio: 16/9) {
  .prf::before {
    content: "";
    display: block;
    padding-top: 56.25%;
    pointer-events: none;
  }

}
@supports (backdrop-filter: blur(30px)) {
  .prf {
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
  }
}
@supports (-webkit-backdrop-filter:blur(30px)) {
  .prf {
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
  }
}
.prf {
  width: min(88vw, var(--vh,100vh));
  position: relative;
  height: auto;
  border-radius: 4vmin;
  background-color: #57575720;
  box-shadow: 0 0 10px #00000066;
  transition: 200ms;
  pointer-events: auto;
}

@supports not backdrop-filter(blur(30px)) {
  @supports not -webkit-backdrop-filter(blur(30px)) {
    .prf {
      background-color: #ffffff25;
    }
  }
}
.prf-inner {
  height: 120%;
  width: 100%;
  margin-top: calc(-20% /16 *9);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.prf-avatar-container {
  height: 40%;
  width: 100%;
}
.avatar {
  max-height: 100%;
  width: auto;
  display: block;
  margin: 0 auto;
  border-radius: 10%;
  box-shadow: 0 0 10px #888;
}
.prf-text-container {
  height: 30%;
  width: 100%;
  margin: calc(5% /16 *9 *1.2) 0;
}
.prf-name {
  height: 40%;
  width: 100%;
  margin: 0;
  padding-top: calc(10% /16 *9 *0.48);
  font-size: 6vmin;
  color: white;
  text-align: center;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: bold;
}
.prf-screenname {
  display: block;
  font-size: 4vmin;
}
.prf-link-container{
  display: flex;
  box-sizing: border-box;
  justify-content: space-around;
  height: 20%;
  width: 100%;
  margin: 0;
  padding: 0 5% 5%;
}
.prf-link-item {
  position: relative;
  list-style: none;
  height: 100%;
  width: 16%;
  transition: 1s;
}
.prf-link-item::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2%;
  bottom: 10%;
  border-radius: 20px;
  background-color: #fff;
  transition: .4s;
}
.prf-link-item:hover::after {
  bottom: 85%;
  opacity: 0;
}
.prf-link-item a {
  display: block;
  height: 100%;
  width: 100%;
  -webkit-tap-highlight-color:#0000;
}
.prf-link-item img {
  width: 35%;
  display: block;
  margin: 0 auto;
  transition: .2s
}
.prf-link-item i {
  display: block;
  border: 0;
  width: 100%;
  height: 100px;
}
.prf-link-item:hover img {
  transform: scale(0);
  opacity: 0;
}
.fluid {
  background: linear-gradient(35deg, #0A6B00 0%, #2BD61A 50%, #4EDE7E 100%);
  animation: fluid 25s ease 0s infinite;
  position: relative;
}
.bgf1 {
  width: calc(20vh + 20vw);
  height: calc(20vh + 20vw);
  top: calc(-10vw + -20vh);
  left: calc(-10vw + -5vh);
}
.bgf2 {
  width: calc(20vh + 20vw);
  height: calc(20vh + 20vw);
  bottom: calc(-10vw + -25vh);
  right: calc(-10vw + -5vh);
  transform: rotate(135deg) scale(180%);
  animation-delay: -2s;
}
@keyframes fluid {  
0%, 100% {
  border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
} 14% {
  border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
} 28% {
  border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
} 42% {
  border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
} 56% {
  border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
} 70% {
  border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
} 84% {
  border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}}

.madeby {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-right: 2vmin;
  margin-bottom: 2vmin;
  color: #00000066;
  text-shadow: white 0px 0 15px;
  pointer-events: all;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 12px;
}
.madeby a {
  color: #00000080;
}

.scroll {
  height: 100vh;
}