:root{
    --text-light:#fff;
    --text-on:#19DA00;
    --ft-family:"Space Mono", system-ui, sans-serif;
    --btn-bg:#0D121A;
}

*, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
a:not([class]) {
    color: #ccc;
    text-decoration: none;
    background-image: linear-gradient(#222e42, #222e42);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 2px;
    transition: padding-bottom 0.3s ease;
    padding-bottom: 0;
}

a:not([class]):hover {
    padding-bottom: 4px;
  background-image: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  background-size: 100% 3px;
}
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

html, body {
  height: 100%;
  margin: 0;
}

body{
    background: radial-gradient(95% 67% at 26% 24%, #18212F 0%, #0D121A 100%);
    background-attachment: fixed;
    font-family: var(--ft-family);
    font-weight: 400;
    font-style: normal;
    color:var(--text-light);
}
main{
    display: flex;
    padding-top: 35vh;
    align-items: center;
    flex-direction: column;
    height: 100%;
    gap: 40px;
}
.fl-btn{
    font-size: 14px;
    font-weight: normal;
    color: var(--text-light);
    text-transform: uppercase;
    background-color: var(--btn-bg);
    padding: 13px 32px;
    border-radius: 2rem;
}
.fl-btnbg{
    padding: 2px;
    border-radius: 2rem;
    position: relative;
    z-index: 1;
}
.fl-btnbg:before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 2rem;
    --angle: 0deg;
    background: conic-gradient(from var(--angle) at 50% 50%, #0D121A 32%, var(--text-on) 53%, #0D121A 71%);
    animation: spinColors 4s linear infinite;
    z-index: -2;
}
/* .fl-btnbg:after{
    content: '';
    position: absolute;
    inset: 0;
    --angle: 0deg;
    background: conic-gradient(from var(--angle) at 50% 50%, #0D121A 32%, var(--text-on) 53%, #0D121A 71%);
    animation: spinColors 4s linear infinite;
    filter: blur(14px);
    z-index: -2;
} */
.fl-btn span{
    color:var(--text-on);
}
.fl-btn:before {
  content:'•';
  padding-right:.2rem;
  color: var(--text-on);
}
@keyframes spinColors {
  to {
    --angle: 360deg;
  }
}
.logo{
    display: flex;
    justify-content: center;
}
.mail{
    position: absolute;
    bottom: 4%;
    font-size: 14px;
}
@media (600px > width) {
    .logo img{
        max-width: 95%;
    }
}