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

body {
  border-radius: 32px;
  background: #080C15;
  font-family: 'Golos Text', sans-serif;
}

.login-cover{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1111%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(76%2c 59%2c 127%2c 1)'%3e%3c/rect%3e%3cpath d='M293.12 167.61 a145.67 145.67 0 1 0 291.34 0 a145.67 145.67 0 1 0 -291.34 0z' fill='rgba(150%2c 127%2c 238%2c 1)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M660.16 117.93 a168.47 168.47 0 1 0 336.94 0 a168.47 168.47 0 1 0 -336.94 0z' fill='rgba(150%2c 127%2c 238%2c 1)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1027.87 483.75 a117.73 117.73 0 1 0 235.46 0 a117.73 117.73 0 1 0 -235.46 0z' fill='rgba(150%2c 127%2c 238%2c 1)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M464.2 439.84 a104.62 104.62 0 1 0 209.24 0 a104.62 104.62 0 1 0 -209.24 0z' fill='rgba(150%2c 127%2c 238%2c 1)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M2.869%2c248.719C18.118%2c248.38%2c35.363%2c247.704%2c43.156%2c234.592C51.055%2c221.301%2c44.925%2c204.891%2c36.695%2c191.802C29.095%2c179.715%2c17.132%2c171.184%2c2.869%2c170.521C-12.683%2c169.798%2c-28.303%2c175.39%2c-36.879%2c188.384C-46.369%2c202.763%2c-50.126%2c222.07%2c-40.648%2c236.457C-31.762%2c249.946%2c-13.28%2c249.078%2c2.869%2c248.719' fill='rgba(150%2c 127%2c 238%2c 1)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M254.098%2c542.422C273.516%2c542.64%2c291.67%2c531.459%2c300.545%2c514.187C308.778%2c498.164%2c303.375%2c479.722%2c294.313%2c464.153C285.321%2c448.704%2c271.962%2c435.008%2c254.098%2c434.389C235.29%2c433.738%2c218.033%2c444.82%2c208.75%2c461.19C199.589%2c477.343%2c200.373%2c496.948%2c209.425%2c513.163C218.725%2c529.822%2c235.02%2c542.208%2c254.098%2c542.422' fill='rgba(150%2c 127%2c 238%2c 1)' class='triangle-float1'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1111'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
}

/* custom new style */

:root {
  --i-l-color: #d1d5db;
  --c-btn-h:#f3f4f6;
  --bg-btn:#2d3748;
  --bg-btn-hv:#475368;
  --c-p:#9ca3af;
  --c-a:#4a5568;
  --c-a-hv:#646f83;
  --body:#0a0e17;
  --border-color:#323e50;
  --form:#0f1520;
  --bg-input:#1a202c;
  --i-focus:#323e50;
  --br-20:20px;
  --br-15:15px;
  --с-error:#ff4444;
}
.c-error div{
  color: var(--с-error);
}
.br-15{
  border-radius: var(--br-15);
}
.br-20{
  border-radius: var(--br-20);
}
.bg-input {
  background: var(--bg-input);
  outline: none;
}

.bg-input:focus {
  border-color: var(--i-focus);
}
.i-l-color,
  .i-l-color::placeholder{
  color: var(--i-l-color);
}
.c-btn-h{
  color: var(--c-btn-h);
}
.bg-btn{
  background: var(--bg-btn);
  transition: all 0.3s ease 0s;
}
.bg-btn:hover{
  background: var(--bg-btn-hv);
}
.c-p{
  color: var(--c-p);
}
.c-a{
  color: var(--c-a);
  transition: all 0.3s ease 0s;
}
.close-btn.c-a{
  color: var(--c-a);
  transition: all 0.3s ease 0s;
}
.c-a-hv{
  color: var(--c-a-hv);
}
.aa{
  transition: all 0.3s ease 0s;
}
.body-bg{
  background: var(--body);
}
.border-color{
  border: 1px solid var(--border-color);
}
.form{
  background: var(--form);
}
.left-custom-shadow::after {
  content: '';
  position: fixed;
  left: -151px;
  top: 0;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: 0 0 250px 279px rgba(168, 168, 168, 0.3);
  pointer-events: none;
}
.right-custom-shadow{
  content: '';
  position: fixed;
  right: -151px;
  bottom: 0;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: 0 0 250px 279px rgba(168, 168, 168, 0.3);
  pointer-events: none;
}
.custom-ic{
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;
  height: 100%;
  pointer-events: none;
}
.ic{
  stroke: #9ca3af;
}

.ic-body-1,
.ic-body-2,
.ic-body-3,
.ic-body-4,
.ic-body-5,
.ic-body-6{
  position: absolute;
}
.ic-body-1{
  right: 16%;
  top: -3%;
}
.ic-body-2{
  left: 15%;
  top: -10%;
}
.ic-body-3{
  left: -17%;
  top: 48%;
}
.ic-body-4{
  left: 7%;
  bottom: -9%;
}
.ic-body-5{
  right: 5%;
  bottom: -2%;
}
.ic-body-6{
  right: -7%;
  top: 37%;
}

/* Общий стиль иконок */
.custom-ic .ic {
  opacity: 0;
  animation-name: fadeIn, float;
  animation-timing-function: ease, ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: 1, infinite;
}

/* Поочерёдная задержка появления + разная раскачка */
.ic-body-1 .ic { animation-delay: 1.1s, 0s; animation-duration: 0.5s, 3s; }
.ic-body-2 .ic { animation-delay: 1.3s, 0.3s; animation-duration: 0.5s, 3.4s; }
.ic-body-3 .ic { animation-delay: 1.5s, 0.6s; animation-duration: 0.5s, 3.1s; }
.ic-body-4 .ic { animation-delay: 1.7s, 0.1s; animation-duration: 0.5s, 2.8s; }
.ic-body-5 .ic { animation-delay: 1.9s, 0.4s; animation-duration: 0.5s, 3.3s; }
.ic-body-6 .ic { animation-delay: 2.1s, 0.2s; animation-duration: 0.5s, 3.6s; }

/* Анимации */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-7px); }
  100% { transform: translateY(0); }
}