@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans&display=swap");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --net-red: #E50914;
  --spot-green: #1DB954;
}

body {
  font-family: "Roboto", sans-serif;
  display: flex;
  flex-direction: column;
  background-color: rgb(255, 255, 255);
  font-size: clamp(0.9rem, 2vw, 1rem);
  transition: 0.5s;
  height: 100%;
}

header {
  border-bottom: 1px solid rgb(221, 221, 221);
  box-shadow: 0px 0px 38px -27px black;
  position: absolute;
  height: 70px;
  top: 0px;
  left: 0px;
  background-color: white;
}
header img, header svg {
  width: clamp(40px, 39%, 150px);
}

footer {
  color: gray;
  background-color: white;
  position: relative;
  bottom: 0px;
  left: 0px;
  font-size: 10px;
  box-shadow: -1px -20px 51px -25px black;
}

label {
  width: 100%;
  color: rgb(133, 133, 133);
  font-size: clamp(1rem, 2vw, 1.1rem);
}

input {
  width: 100%;
  height: 50px;
  border: 1px solid rgb(221, 221, 221);
  border-radius: 7px;
  padding: 10px !important;
  margin-top: 5px !important;
  margin-bottom: 10px !important;
}
input:focus, input:active, input:hover {
  border: none;
  outline: 1.3px solid #03d527;
}

button {
  width: 100%;
  height: 50px;
  font-weight: 600 !important;
  color: white !important;
  background-color: #1DB954 !important;
  border-radius: 7px;
}

hr {
  width: 100%;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

main {
  height: 100%;
}

section {
  width: clamp(237px, 100%, 552px);
  border: 1px solid rgb(221, 221, 221);
  border-radius: 7px;
  background-color: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 25px 80px;
  margin-top: 120px !important;
}
section b {
  align-self: flex-start;
  font-size: clamp(1rem, 2vw, 1.3rem);
}

#VerOne, #load, #VerTwo {
  display: none;
  position: absolute;
  width: 100%;
  height: 100vh !important;
  z-index: 1;
  margin: 0 0 !important;
  background-color: rgba(255, 255, 255, 0.4705882353);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

#load {
  display: none;
}

#load div {
  height: 150px;
  width: 150px;
  border: 25px solid #E50914;
  border-bottom: 25px solid transparent !important;
  border-radius: 50%;
  animation: turn 1.7s linear infinite;
}

#VerOne div {
  position: relative;
  overflow: hidden;
  width: clamp(237px, 100%, 552px);
  border: 1px solid rgb(221, 221, 221);
  border-radius: 7px;
  background-color: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 25px 80px;
  margin-top: 120px !important;
}
#VerOne div b {
  align-self: flex-start;
  font-size: clamp(1rem, 2vw, 1.3rem);
}
#VerOne div #n8 {
  margin-top: 13px !important;
  text-align: center;
  width: clamp(220px, 50%, 200px);
}
#VerOne div button {
  margin-top: 3px;
  width: clamp(220px, 50%, 200px);
}
#VerOne div p {
  width: 100%;
  word-break: break-word;
}
#VerOne div #lock {
  position: absolute;
  width: 30px;
  right: 15px;
  bottom: 15px;
}

#VerTwo div {
  position: relative;
  overflow: hidden;
  width: clamp(237px, 100%, 552px);
  border: 1px solid rgb(221, 221, 221);
  border-radius: 7px;
  background-color: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 25px 80px;
  margin-top: 120px !important;
}
#VerTwo div img {
  width: 140px;
  animation: blink 2s linear infinite;
}
#VerTwo div #lock {
  position: absolute;
  width: 30px;
  right: 15px;
  bottom: 15px;
}

@keyframes turn {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes blink {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.meto img {
  width: 45px;
}/*# sourceMappingURL=index.css.map */