body { 
    margin: 0;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, rgba(20, 7, 39, 0.9), rgba(30, 20, 60, 0.9), rgba(20, 60, 80, 0.9), rgba(10, 100, 50, 0.9), rgba(70, 30, 80, 0.9));
    background-size: 600% 600%;
    animation: gradientShift 90s ease infinite;
    font-family: verdana;
    display: flex;
}
@keyframes gradientShift {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}
.overlay {
    position: fixed;
    width: 100%;
    height: 120%;
    z-index: 0; /* Behind the container */
    background-color: rgba(0, 0, 0, 0.4);
    top: 0;
    left: 0;
}
.container {
    @media (min-width:500px) { width: 75%; }
    background-color: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative;
    z-index: 1; /* In front of the overlay */
    color:white;
    .links{
        display: flex;
        flex-wrap:wrap;
        justify-content:center;
        margin:0;
    }
    .subLinks{
        display: flex;
        flex-wrap:wrap;
        justify-content:center;
        margin:0;
        margin-top:20px;
    }
    a {
        background: black;
        padding:10px;
        padding-left:10px;
        border-radius: 10px;
        text-decoration:none;
        color:white;
        font-size:19px;
        white-space:nowrap;
        margin:3px;
        
        img {
            display: inline-block;
            width: 19px;
            height: 19px;
            margin-right:7px;
            margin-bottom:0px;
          }
    }
    h1{
        color:white;
        font-size:45px;
        margin-bottom:0;
    }
    #tip{
        margin-top:0;
        margin-bottom:15px;
        color:white;
    }
    h3{
        color:white;
        font-size:25px;
    }
}
.grade{
    @media (min-width:1000px) {width: 25%;padding-left:30px;padding-right:30px;}
    display:inline-block;
}