@media (max-width: 800px) {
    body {
        margin: 6vw;
        gap: 4vw;
    }

    button,
    input,
    select {
        padding: 2vw;
    }

    hr {
        border-width: .2vw 0;
    }

    /* Text/Fonts */

    h1 {
        font-size: 12vw;
    }

    h2 {
        font-size: 9vw;
    }

    h3 {
        font-size: 8vw;
    }

    h4 {
        font-size: 7vw;
    }

    h5 {
        font-size: 6vw;
    }

    h6 {
        font-size: 5vw;
    }

    p,
    b,
    a,
    i,
    li,
    select,
    button,
    input,
    textarea,
    span {
        font-size: 4vw !important;
    }

    /* Fancy toggle buttons  */

    .switch {
        width: calc(12vw * var(--slider-size));
        height: calc(6.8vw * var(--slider-size));
    }

    .slider:before {
        width: calc(5.2vw * var(--slider-size));
        height: calc(5.2vw * var(--slider-size));

        left: calc(.8vw * var(--slider-size));
        bottom: calc(.8vw * var(--slider-size));
    }

    input:focus+.slider {
        box-shadow: 0 0 calc(.2vw * var(--slider-size)) #2196F3;
    }

    input:checked+.slider:before {
        transform: translateX(calc(5.2vw * var(--slider-size)));
    }

    .slider.round {
        border-radius: calc(6.8vw * var(--slider-size));
    }
}