@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
    --background-color: #33343e;
    --background-tel: #F6F6F7;
    --radio-blue: #4C75FF;
    --red: #FF4E64;
}

body {
    background-color: var(--background-color);

}

.versTel {
    background-color: var(--background-color);
    font-family: "Prompt", sans-serif;
    text-align: center;
    margin: 0;
    padding: 10px;
}

.versTel p {
    font-size: 1.6em;
    color: white;
    font-weight: 600;
}

.versTel p span {
    color: var(--radio-blue);
}

.versTel a {

    font-weight: 700;
    text-decoration: none;
    font-size: 1.2em;
    color: white;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;


}

.oups404 {
    height: 20vh;
    width: auto;
    margin: 10vh 0 0 3vh;
}

#connection2 {
    animation: connection 3s linear infinite;

}

#connection {
    animation: connection 3s linear infinite;
}

/* Animation de la radio */
@keyframes connection {

    0% {
        opacity: 1;
    }

    5% {
        opacity: 0;
    }

    25 {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    55% {
        opacity: 0;
    }

    75% {
        opacity: 1;
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }



}

.versTel :nth-child(4) {
    margin-top: 10vh;
}

.versOrdi {
    display: none;
}





/*-----RESPONSIVE-----*/

@media (min-width: 640px) {
    .versTel :first-child {
        margin: 5vh 0 0 0;
    }

    .versTel p {
        margin: 0;
        font-size: 2em;
    }

    .versTel :nth-child(4) {
        margin-bottom: 30px;
    }

    .versTel a {
        font-size: 1.3em;

    }

    .oups404 {
        margin: 10vh 0 0 3vh;
    }
}

@media (min-width: 768px) {
    .oups404 {
        height: 22vh;
        margin: 15vh 0 0 4vh;
    }

    .versTel a {
        font-size: 1.5em;

    }

}

@media (min-width: 1024px) {
    .versTel p {
        font-size: 2.5em;
    }

    .versTel a {
        font-size: 1.4em;

    }

    .oups404 {
        height: 26vh;
        margin: 10vh 0 0 3.5vh;
    }

    .versTel a {
        font-size: 1.7em;


    }
}

@media (min-width: 1280px) {
    .versTel {
        display: none;
    }

    .versOrdi {
        display: block;
        font-family: "Prompt", sans-serif;
        
    }

    body {
        background-color: var(--background-tel);
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        margin: 0;
        
    }
    
   .versOrdi a {
        

        font-weight: 700;
        text-decoration: none;
        font-size: 2em;      
          
        position: fixed;
        text-align: center;
        bottom: 5%;
        left: 50%;
        transform: translate(-50%, -50%);       

        /*animation du lien permettant de revenir au menu*/
        background: linear-gradient(to left, #33343e, #33343e 50%, #FF4E64 50%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        background-size: 200% 100%;
        background-position: 100%;
        transition: background-position 400ms ease, transform 0.5s;

    }

    .versOrdi a:hover {
        background-position: 0 100%;
    }
    
    .versOrdi svg{
        width: 100%;
        height: auto;
        
    }



}

@media (min-width: 1536px) {
    
    .versOrdi a{
        font-size: 2.2em;
        
    }
}