@media screen and (max-width: 768px) {

    html, body {
        height: auto;
        min-height: 100vh;
        padding: 1rem 0;
    }

    .container {
        width: 90vw;
        margin: 0.5rem;
        padding: 0.8rem;
        gap: 0.7rem;
        border-radius: 16px;
    }

    .container-all-operators li{
        font-size: 10pt;
    }

    .container-head h1 {
        font-size: 1.3rem;
    }

    .loading-dots span {
        font-size: 18px;
    }

    .form {
        width: 100%;
        padding: 0;
    }

    #inp-1 {
        margin: 0.6rem 0;
        width: 85vw;
        height: 48px;
        padding: 0.5rem 1rem;
        font-size: 16px;
        border-radius: 12px;
    }

    #inp-1:focus {
        border-width: 3px;
    }

    #btn-1 {
        width: 160px;
        height: 44px;
        font-size: 14px;
        border-radius: 12px;
    }

    #btn-1:hover {
        width: 160px;
        font-size: 14px;
    }

    .container-operator-show {
        width: 80vw;
        padding: 0.8rem;
        border-radius: 16px;
        animation-duration: 1s;
    }

    .container-operator-show h1, h2, h3{
        font-size: 10pt;
    }

    .container-info h3 {
        align-self: center;
        justify-self: center;
    }

    .container-operator-h {
        width: 100%;
    }

    .container-operator h1 {
        font-size: 1.1rem;
    }

    .container-operator h2 {
        font-size: 0.95rem;
    }

    .container-operator h3 {
        font-size: 0.85rem;
    }

    #btn-2 {
        height: 36px;
        width: 36px;
        font-size: 18px;
    }

    .container-info h1 {
        font-size: 1.1rem;
    }

    .container-info h2 {
        font-size: 0.95rem;
    }

    .container-info h3 {
        font-size: 0.85rem;
    }

    .container-info p {
        font-size: 0.9rem;
        margin: 0.3rem 0;
    }

    ul {
        font-size: 10pt;
    }
}

@media screen and (max-width: 400px) {

    .container {
        width: 96vw;
        padding: 0.6rem;
        border-radius: 12px;
    }

    #inp-1 {
        width: 92vw;
        height: 44px;
        font-size: 15px;
    }

    #btn-1 {
        width: 140px;
        height: 40px;
        font-size: 13px;
    }

    .container-operator-show {
        width: 96vw;
        padding: 0.6rem;
    }


    .container-head h1 {
        font-size: 1.1rem;
    }

    .loading-dots span {
        font-size: 16px;
    }
}

@media screen and (max-width: 768px) and (orientation: landscape) {

    html, body {
        padding: 0;
        height: 100vh;
    }

    .container {
        width: 60vw;
        max-height: 95vh;
        overflow-y: auto;
    }

    .container-operator-show {
        width: 50vw;
        max-height: 90vh;
        overflow-y: auto;
    }

    #inp-1 {
        width: 50vw;
        height: 36px;
    }
}