html,
body{
height: 100%;
}

body {
display: flex;
align-items: center;
background-color: #000000;
font-family: Fantasy, sans-serif;
margin: 0 auto;
}


.loading-container {
/* Center the loading container */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
animation: fadeIn 1.2s forwards;
}

/* HTML: <div class="loader"></div>
*/
.loader {
width: 55px;
aspect-ratio: 1;
--g1:conic-gradient(from  90deg at 3px  3px ,#0000 90deg,#fff 0);
--g2:conic-gradient(from -90deg at 22px 22px,#0000 90deg,#fff 0);
background:var(--g1),var(--g1),var(--g1), var(--g2),var(--g2),var(--g2);
background-size: 25px 25px;
background-repeat: no-repeat;
animation: l7 .8s infinite;
}
@keyframes l7 {
0%   {background-position:0    0   ,0 100%,100% 100% }
25%  {background-position:100% 0   ,0 100%,100% 100% }
50%  {background-position:100% 0   ,0 0   ,100% 100% }
75%  {background-position:100% 0   ,0 0   ,0    100% }
100% {background-position:100% 100%,0 0   ,0    100% }
}


.popup-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}

.popup {
width: 300px;
background-color: #141414;
color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
text-align: center;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}



/* HTML: <div class="loader"></div>
.loader {
width: 50px;
aspect-ratio: 1;
border-radius: 50%;
border: 8px solid;
border-color: #ffffff #ffffff00;
animation: l1 1s infinite;
}
@keyframes l1 {to{transform: rotate(.5turn)}}
*/


.text {
text-align: center;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: .5s;
}

.container {
width: 100%;
}

.form {
background-color: #000000;
padding: 50px;
border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 33px 0px rgba(219, 221, 255, 0.46);
-moz-box-shadow: 0px 0px 33px 0px rgba(219, 221, 255, 0.46);
box-shadow: 0px 0px 33px 0px rgba(219, 225, 255, 0.46);
max-width: 300px;
width: 80%;
margin: 0 auto;
opacity: 0;
animation: fadeIn 2s forwards;
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.form h1 {
text-align: center;
margin: 0 0 30px 0;
font-weight: 700;
font-size: 30px;
color: #FFFFFF;
}

h1 {
text-align: center;
margin: 0 0 30px 0;
font-weight: 700;
font-size: 30px;
color: #FFFFFF;
}

hr {
border: 0;
border-top: 1px solid #e3e2ff;
margin-bottom: 30px;
}

}

.form text{
text-align: center;
margin: 0 0 30px 0;
font-weight: 600;
font-size: 20px;
color: #FFFFFF;
}

.text p {
color: #808080;
text-decoration: none;
font-weight: 300;
transition: all 0.3s ease;
}

input{
display: block;
width: 100%;
border: 0;
border-radius: 35px;
padding: 15px;
height: 30px;
border-bottom: 2px solid #ddd;
padding: 1.6em;
box-sizing: border-box;
background: #ffffff;
outline: none;
color: #00000;
transition: all 0.2s ease-in;
}

.input:focus{
border-bottom: 2px solid #615dec;
}

button {
display: block;
width: 100%;
padding: 10px 12px;
font-size: 16px;
border: none;
border-radius: 35px;
/*  padding: 12px;*/
box-shadow: 0px 0px 33px 0px rgba(255, 255, 255, 0.46);
color: #fff;
cursor: pointer;
outline: none;
transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
background: #000000 url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2019.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20version%3D%221.1%22%20id%3D%22Capa_1%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2031.49%2031.49%22%20style%3D%22enable-background%3Anew%200%200%2031.49%2031.49%3B%22%20xml%3Aspace%3D%22preserve%22%20width%3D%2220px%22%20height%3D%2220px%22%3E%0A%3Cpath%20d%3D%22M21.205%2C5.007c-0.429-0.444-1.143-0.444-1.587%2C0c-0.429%2C0.429-0.429%2C1.143%2C0%2C1.571l8.047%2C8.047H1.111%20%20C0.492%2C14.626%2C0%2C15.118%2C0%2C15.737c0%2C0.619%2C0.492%2C1.127%2C1.111%2C1.127h26.554l-8.047%2C8.032c-0.429%2C0.444-0.429%2C1.159%2C0%2C1.587%20%20c0.444%2C0.444%2C1.159%2C0.444%2C1.587%2C0l9.952-9.952c0.444-0.429%2C0.444-1.143%2C0-1.571L21.205%2C5.007z%22%20fill%3D%22%23FFFFFF%22/%3E%0A%3Cg%3E%0A%3C/g%3E%0A%3Cg%3E%0A%3C/g%3E%0A%3Cg%3E%0A%3C/g%3E%0A%3Cg%3E%0A%3C/g%3E%0A%3Cg%3E%0A%3C/g%3E%0A%3Cg%3E%0A%3C/g%3E%0A%3Cg%3E%0A%3C/g%3E%0A%3Cg%3E%0A%3C/g%3E%0A%3Cg%3E%0A%3C/g%3E%0A%3Cg%3E%0A%3C/g%3E%0A%3Cg%3E%0A%3C/g%3E%0A%3Cg%3E%0A%3C/g%3E%0A%3Cg%3E%0A%3C/g%3E%0A%3Cg%3E%0A%3C/g%3E%0A%3Cg%3E%0A%3C/g%3E%0A%3C/svg%3E%0A) right 35px center no-repeat;
}
button:active{
background-color: #FFFFFF;
color: #000000;
box-shadow: 0px 0px 33px 0px rgba(0, 0, 0, 1);
}


@keyframes shadowAnimation {
0% {
box-shadow: 0px 0px 33px 0px rgba(255, 0, 0, 0.5);
}
50% {
box-shadow: 0px 0px 33px 0px rgba(0, 255, 0, 0.5);
}
100% {
box-shadow: 0px 0px 33px 0px rgba(0, 0, 255, 0.5);
}
}