/* 1. REGISTER CUSTOM PROPERTY FOR GRADIENT ANIMATION */
@property --angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes spin {
    from {
        --angle: 0deg;
    }
    to {
        --angle: 360deg;
    }
}

/* 2. BASE PAGE LAYOUT */
body {
    background-color: #000713;
    margin: 0 auto;
    max-width: 1200px;
    padding: 20px;
    box-sizing: border-box;
}

h1, h3 {
    color: aliceblue;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

.title {
    background-color: #5c677d;
    padding: 20px;
    border-radius: 10px;
}

/* 3. TRANSPARENT SPACER / DIVIDER */
.hr {
    padding: 0;
    margin-bottom: 40px;
    background-color: transparent;
    border: none;
    height: 0;
}

/* 4. CARD CONTAINER WITH INTEGRATED ANIMATED BORDER */
.reasonsguess {
    position: relative;
    color: #fff;
    padding: 20px;
    border-radius: 12px;
    margin: 40px auto 16px auto;
    width: calc(100% - 128px);
    box-sizing: border-box; 
    
    /* 3px Transparent Border holds the conic gradient */
    border: 3px solid transparent;
    
    /* Dual background layer: 
       Layer 1 (padding-box) = Dark card center
       Layer 2 (border-box) = Spinning gradient border */
    background: 
        linear-gradient(#191c1f, #191c1f) padding-box,
        conic-gradient(from var(--angle), #0040ff, #7b00ff) border-box;
    
    animation: 3s spin linear infinite;
}

/* 5. OUTER GLOW EFFECT (BEHIND CARD) */
.reasonsguess::before {
    content: '';
    position: absolute;
    inset: -3px; /* Extends exact size of the border */
    border-radius: 12px;
    background: conic-gradient(
        from var(--angle),
        #0040ff,
        #7b00ff
    );
    filter: blur(20px);
    opacity: 0.8;
    z-index: -1; /* Placed cleanly behind the card container */
    animation: 3s spin linear infinite;
}

/* 6. RESPONSIVE MOBILE STYLES */
@media (max-width: 767px) {
    .reasonsguess {
        width: calc(100% - 32px);
        margin: 30px auto 16px auto;
    }
}