@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;
}

button:hover {
  cursor: pointer;
}

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

.container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 85vh;
}

.subtitle {
    color: #FFFFFF;
}

.big-button {
    width: 290px !important;
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.border-glow {
    border: 2px 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; }
}

.program-container {
    position: relative;
    width: 400px;
    padding: 20px;
    border-radius: 10px;
    background: #151515;
    /* transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out; */

    /* display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px; */
}

@property --angle{
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* .program-container::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    padding: 3px;

    background: conic-gradient(from var(--angle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
    border-radius: 13px;
    animation: 3s spin linear infinite;
} */

/* Activate glow on hover */
.program-container:hover::before {
    opacity: 0.6;
}
.program-container::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(25px);
    opacity: 0;
    z-index: -1;
    animation: 3s spin linear infinite;
    transition: opacity 1s ease;
}
@keyframes spin{
    from{
        --angle: 0deg;
    }
    to{
        --angle: 360deg;
    }
}

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

.warning {
    color: #cd6464;
}

.button-container button{
    color: #FFFFFF;
    background: #3f3f3f;
    width: 140px;
    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;
  }
}


html {
    font-size: 16px;
}

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
    .program-container {
        width: 80vw;
    }
}