@media (min-width: 1200px) {
    html {
        font-size: 18px;
    }
}

@media (max-width: 600px) {

    html {
        font-size: 14px;
    }

    .svg-moon,
    .svg-sun {
        width: 20vw;
        top: 8vh;
    }

    .cloud-1,
    .cloud-2 {
        transform: scale(0.8);
    }

    .container {
        padding: 1rem;
        margin: 0;
    }

    #theme-toggle {
        font-size: 1.2rem;
    }

    body {
        background: linear-gradient(to bottom, #1b2735 0%, #090a0f 100%);
    }

    div.row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .row input,
    .row button {
        width: 100%;
    }

}


@media (max-width: 400px) {
    .container {
        padding: 2rem 1rem 3.5rem;
        border-radius: 1rem;
    }
}