@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {
    background-color: #050505;
    text-align: center;
    font-family: "Poppins", sans-serif;

    display: flex;
    flex-direction: column;
}

button:hover {
    cursor: pointer;
}

.logo {
    color: #FFFFFF;
    font-size: 25px;
    font-weight: 200;
}

.center {
    position: relative;
    height: calc(100vh - 100px);  /*The nav bar is about 100px*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 50%;
}

@keyframes pulseGlow {
    0%, 100% {opacity: 0.5; }
    50% {opacity: 0.8; }
}
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;

    background: radial-gradient(circle,
        #dbca34 0%,
        rgba(255, 234, 165, 0.651) 20%,
        transparent 75%
    );
    -webkit-mask: radial-gradient(circle, transparent 40%, black 100%);
    mask: radial-gradient(circle, transparent 40%, black 100%);

    animation: pulseGlow 3s ease-in-out infinite;
}

.os-selector {
    position: relative;
}
.os-selector::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: px;
    padding: 3px;
    border-radius: 23px;
    background: conic-gradient(from var(--angle),#a855f7,#ec4899, #fef0c0,#6366f1,#a855f7);
    opacity: 0.6;
    z-index: -1;
    animation: 3s spin linear infinite;
    transition: opacity 1s ease;
}
.os-selector::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 13px;
    /* background: conic-gradient(from var(--angle),#ff4545,#00ff99,#006aff,#ff0095,#ff4545); */
    background: conic-gradient(from var(--angle),#a855f7,#ec4899, #fef0c0,#6366f1,#a855f7);
    filter: blur(15px);
    opacity: 0.6;
    z-index: -1;
    animation: 3s spin linear infinite;
    transition: opacity 1s ease;
}
@keyframes spin{
    from{
        --angle: 0deg;
    }
    to{
        --angle: 360deg;
    }
}

/* @keyframes pulseGlow {
    0%, 100% {opacity: 0.5; }
    50% {opacity: 0.8; }
}
.halo::before {
    content: '';
    position: absolute;
    inset: 0px;

    background: radial-gradient(
        circle,
        rgb(251, 255, 0),
        transparent 70%
    );

    filter: blur(25px);
    z-index: -1;
    border-radius: 20px;

    -webkit-mask:
        radial-gradient(circle, transparent 50%, black 100%);
    mask:
        radial-gradient(circle, transparent 50%, black 100%);


    animation: pulseGlow 3s ease-in-out infinite;
} */

.subtitle {
    color: #FFFFFF;
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.border-glow {
    border: 3px solid transparent !important;
    background: linear-gradient(#3f3f3f, #3f3f3f) padding-box, conic-gradient(from var(--angle), transparent, #FFFFFF) border-box !important;
    animation: rotate 3s linear infinite !important;
    /* border-image-source: linear-gradient(to left, transparent, #ffffff) !important; */
}
@keyframes rotate {
  to { --angle: 360deg; }
}

.slogan {
    font-size: 45px;
    font-weight: 600;
    color: #FFFFFF;
}

.warning {
    color: #cd6464;
}

.button-container button{
    color: #FFFFFF;
    background: #3f3f3f;
    width: 290px;
    height: 40px;
    padding: 10px 20px 10px 20px;
    border-radius: 20px;
    border: 0;
}

.glow {
    font-family: sans-serif;
    font-weight: 600;

    /* background: linear-gradient(to right,#7d069d, #e64cb5, #e6ae4c,#7d069d); */
    background: linear-gradient(to right,#7d069d, #e64cb5, #e6ae4c,#7d069d);

    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    animation: flow 3s linear infinite;
}

@keyframes flow {
  to {
    background-position: 200% center;
  }
}