/* Ensure html AND body both have the gradient, and cover the full (dynamic) viewport height */
html {
    height: 100%;
    background: linear-gradient(135deg, #e0f2fe 0%, #f3e8ff 100%) !important;
}

html,
body#pslogin.pslogin,
body#adminlogin.pslogin,
body#teacherlogin.pslogin {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: linear-gradient(135deg, #e0f2fe 0%, #f3e8ff 100%) !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Fix district logo path/display */
.pslogin #branding-district {
    background-image: url("/images/district-logos/districtlogo.jpg") !important;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Position the background container to cover the whole screen behind PowerSchool content */
.pslogin .background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

/* Restores original form positioning and prevents pushing content down */
.pslogin form#LoginForm {
    position: relative;
    z-index: 10;
}

/* Style the animated shapes with a soft light purple tone */
.pslogin .shape {
    position: absolute;
    bottom: -100px;
    width: 50px;
    height: 50px;
    background: rgba(168, 85, 247, 0.2);
    animation: moveUp 6s linear infinite;
    cursor: pointer;
    pointer-events: auto;
}

.pslogin .shape:nth-child(1) { left: 10%; animation-delay: 0s; }
.pslogin .shape:nth-child(2) { left: 30%; animation-delay: 2s; width: 70px; height: 70px; }
.pslogin .shape:nth-child(3) { left: 50%; animation-delay: 4s; }
.pslogin .shape:nth-child(4) { left: 70%; animation-delay: 1s; width: 40px; height: 40px; }
.pslogin .shape:nth-child(5) { left: 90%; animation-delay: 3s; width: 60px; height: 60px; }

@keyframes moveUp {
    0% {
        bottom: -100px;
        transform: translateX(0) rotate(0deg);
        border-radius: 0%;
    }
    50% {
        border-radius: 25%;
    }
    100% {
        bottom: 105vh;
        transform: translateX(50px) rotate(360deg);
        border-radius: 50%;
        opacity: 0;
    }
}