@font-face {
  font-family: 'roboto';
  src: url(../Fonts/RobotoMono-VariableFont_wght.ttf);
}
@font-face {
  font-family: 'robotonorm';
  src: url(../Fonts/Roboto-VariableFont_wdth\,wght.ttf);
}
@keyframes animate {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-60px);
  }
}
@keyframes entrance {
  0% {
    opacity: 100%;
  }
  100% {
    opacity: 0%;
  }
}
@keyframes dim {
  0% {
    opacity: 0%;
  }
  100% {
    opacity: 100%;
  }
}
@keyframes comein {
  0% {
    transform: scale(0.5);
    filter: blur(30px);
  }
  100% {
    transform: scale(1);
    filter: blur(0px);
  }
}
@keyframes scaleout {
  0% {
    transform: scale(1);
    filter: blur(0px);
  }
  100% {
    transform: scale(0.5);
    filter: blur(30px);
  }
}
* {
    padding: 0;
    margin: 0;
    font-family: 'roboto';
}
::-webkit-scrollbar {
    display: none;
}
body {
    font-size: 20px;
    background-color: #111111;
}
.hidden {
    visibility: hidden;
}
.none {
    display: none;
}
.show {
    display: unset;
}
.main {
    max-width: 700px;
    padding: 5vh 30px 0 30px;
    margin: 0 auto;
}
.heading h1{
    font-family: 'robotonorm';
    font-size: 48px;
    text-align: center;
    color: #DFDFDF;
}
.heading h3{
    font-weight: 400;
    text-align: center;
    color: #797979;
    font-size: 20px;
    padding-top: 1rem;
}
.activenodes{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    color: #797979;
    padding-top: 4rem;
}
.item {
    background-color: #1b1b1b;
    height: 80px;
    border-radius: 21px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
}
.left{
    display: flex;
    gap: 1rem;
}
.left h1 {
    font-size: 20px;
    color: #DFDFDF;
}
.sucess {
    border: 1px solid #35B03B;
    transition: 150ms ease;
}
.fail {
    border: 1px solid #B03535;
    transition: 150ms ease;
}
.forbutton {
    display: flex;
    justify-content: center;
    margin: 2rem auto;
}
button{
    font-weight: 800;
    background-color: #DFDFDF;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 15px;
    transition: 150ms ease;
}
button:hover {
    background-color: #B03535;
    transform: scale(1.1);
}
.animation {
    padding-top: 2rem;
}
.animation h2{
    font-weight: 400;
    text-align: center;
    font-size: 20px;
    color: #797979;
}
.animationitems {
    display: flex;
    gap: 1em;
    align-items: center;
    justify-content: center;
}
.animationitems img{
    width: 300px;
}
.bbbw {
    z-index: 100;
}
.usb {
    animation: animate 2s ease-in both infinite alternate-reverse;
}
.dimdiv {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 999;
    background-color: #000;
    opacity: 0%;
    animation: 1s ease entrance;
    pointer-events: none;
}
.dimdivmax {
    opacity: 100%;
}
.dim {
    animation: dim 1s ease-out;
}
.scaleout {
    animation: scaleout 1s ease-in;
}
.comein1 {
    animation: comein 0.8s ease;
}
.comein2 {
    animation: comein 1s ease;
}
.comein3 {
    animation: comein 1.2s ease;
}
.comein4 {
    animation: comein 1.4s ease;
}
.comein5 {
    animation: comein 1.6s ease;
}