/* Subpage-specific styles (gallery, resources, requirements, 404) */

/* ============================================================
   Subpage Hero Circles
   ============================================================ */
#circle_sub {
    height: 25rem;
    width: 31rem;
    background-color: var(--navbar-bg);
    border-radius: 50%;
    position: sticky;
    float: right;
    margin-top: -12rem;
    margin-right: -1rem;
    text-align: center;
    overflow: clip;
}

#circle2_sub {
    height: 12.5rem;
    width: 25rem;
    background-color: var(--navbar-bg);
    border-radius: 50%;
    position: sticky;
    float: right;
    margin-top: -5rem;
    margin-right: -6rem;
    text-align: center;
}

/* ============================================================
   Subpage Logo & Animation
   ============================================================ */
#swirlText {
    background: none;
    width: 300px;
    height: 350px;
    margin-bottom: -150px;
}

#swirlText:hover {
    animation: spin 2s linear;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

div.rotate_sub {
    transform: rotate(-5deg);
    margin-top: 80px;
    font-size: 45px;
    font-weight: bold;
    color: white;
}

div.rotate_sub:hover {
    color: var(--text-primary);
    transition: color 0.5s;
}

/* ============================================================
   Embedded Content
   ============================================================ */
iframe {
    width: 60%;
}

/* ============================================================
   Responsive — Mobile (max-width: 700px)
   ============================================================ */
@media (max-width: 700px) {
    #circle2_sub {
        height: 12rem;
        width: 15rem;
        margin-bottom: -1rem;
        margin-top: -11rem;
        margin-right: 5rem;
        background-color: transparent;
    }

    #swirlText {
        z-index: 999999;
    }

    iframe {
        width: 95%;
    }

    img.swirl-req-img {
        visibility: hidden;
        width: 0;
        height: 0;
    }
}