/* Telefony */
@media (max-width: 768px) {


    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    body {

        background: linear-gradient(rgba(0,0,0), rgba(70,0,70));



        height: fit-content;

        padding-top: 30px;
        padding-bottom: 60px;

        display: flex;
        flex-direction: column;
        background-color: black;
        color: white;

        gap: 20px;
        font-family: "Montserrat", sans-serif;
        align-items: center;


    }

    #logo {

        position: static;

    }


    /* Overlay na textarea */
    .loader-overlay {
        position: fixed;          /* ważne! */
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;            /* cała wysokość ekranu */
        background: rgba(0, 0, 0, 0.7);
        border-radius: 20px;



        display: none; /* domyślnie ukryty */
        align-items: center;
        justify-content: center;

        z-index: 10;
    }

    /* Kółko */
    .spinner {
        width: 150px;
        height: 150px;
        border: 4px solid rgba(255,255,255,0.3);
        border-top: 4px solid white;
        border-radius: 50%;
        animation: spin 0.75s linear infinite;
    }

    @keyframes spin {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
    }



    .container {
        width:90%;
        height: 30%;
        border-radius: 20px;
        border: 0px solid white;
        background-color: rgba(0,0,0,0);
        display: flex;
        color: white;
        flex-direction: column;
        text-align: center;
        align-items: center;

        gap: 15px;
    }

    #split {

        width: 90%;
        height: 30%;
        display: flex;
        flex-direction: column;
        gap: 30px;
        text-align: center;
        align-items: center;


    }

    .cont {

        width: 50%;
        height: 100%;
        border-radius: 20px;
        color: white;


    }

    .choice {

        width: 100%;
        height: 50px;
        border: 2px solid white;
        border-radius: 20px;
        cursor: pointer;
        background-color: rgba(0,0,0,0);
        transition: background 0.5s;
        color: white;
        font-family: "Montserrat", sans-serif;
        font-size: 14px;


    }

    .choice:hover {

        background: #4d004d;


    }



}