/* --- Logo Adjustments --- */
.rednote-logo {
    width: 200px;
    max-width: 60%; /* Ensures logo never overflows the screen */
    margin-left: 93px;
    margin-top: 30px;
    filter: drop-shadow(0 0 0.01vw rgba(0, 255, 245, 0.9)) drop-shadow(0 -0.02vw max(0.3vw, 5px) rgba(0, 255, 245, 0.6)) drop-shadow(-0.3vw -0.5vw max(2vw, 20px) rgba(0, 255, 245, 0.7));
}

/* --- Content Block Adjustments --- */
.rednote-content-block {
    position: relative;
    color: #E0E0E0;
    font-family: "tomorrow-bold";
    /* Change fixed width to max-width */
    width: 90%;
    max-width: 1079px;
    margin-left: 93px;
    font-size: 14px;
}
.rednote-progress-bar .progress-bar
{
    color: black;
    font-size: 18px;
}

@media (max-width: 768px) {
    .rednote-logo {
        margin-left: auto;
        margin-right: auto;
        display: block; /* Centers logo on mobile */
        width: 120px;
    }

    .rednote-content-block {
        width: 95%; /* Use almost full screen width */
        margin-left: auto;
        margin-right: auto; /* Centers the block */
        font-size: 14px; /* Scales down text for small screens */
    }
}