@font-face{
    font-family: 'Montserrat';
    src: url("Fonts/Montserrat/Montserrat-VariableFont_wght.ttf");
}



@media screen and (min-width: 1280px){
  
body{
    width: 100%; height: auto;
    margin:0; overflow:hidden;
    background-color: black;

    display: flex;
    flex-wrap: nowrap;
        flex-direction: column;
        justify-content: center;;
        align-items: center;
}

.borderUp, .borderBot{
    width: 1000px; height: 1px;
    background-color: rgba(255, 255, 255, 0.8);

    position: fixed; z-index: 15; opacity: 0;
}

    .borderUp{top: 300px; animation: 6s ease-in-out 3.5s infinite SlideBorder}
    .borderBot{bottom: 330px; right: -500px; animation: 6s ease-in-out 3.5s infinite SlideBorderLeft}


.RS_display{
    display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

    width: 35px; height: 200px;
    margin-bottom: 15px; 
    position: fixed; bottom: 35px; right: 35px; z-index:15;
}

    .img_logo{
        width: 100%; height: auto; opacity:0;

        animation: 1.5s ease-in 3s forwards StartImg;
        transition: filter 0.75s;
    }

        .img_logo:hover{
            filter: drop-shadow(0 0 35px rgba(255, 255, 255, 0.699));
        }

        .img_logo img{
            width: 100%; height:auto;
        }

.arrow_up{
    display: flex;
        flex-direction: column;
        align-items: center;
    width: 40px; height: auto;

    position: fixed; opacity: 0;
    top: 75vh; z-index:15;
    animation: 2s ease-in-out 2.5s infinite SlideUp;
}

.Signature{
    position: relative;
    width: auto; height: 100%;
    display: flex; 
        flex-direction: column;
        justify-content: center;
        align-items: center;

    top: -75px; z-index:2; opacity: 0;

    animation: 0.85s ease forwards fadeInVids;
}


a:hover{text-decoration: none;}

    .linkOne:hover::after,
    .linkOne:focus::after{
        content: "CLIQUEZ POUR DÉCOUVRIR LE SITE";
        position: relative;

        color: rgba(255, 255, 255, 0.884); font-family: "Montserrat"; font-weight: 300;
        font-size: 14px; top: 82vh; z-index: 4; opacity: 0;

        animation: 2s ease-in-out 0.75s infinite displayLoop;
    }

.smoke{
    position: fixed; opacity: 0.1;
    top: 0; left: 0; z-index:1;
}

  
}

@media screen and (max-width: 1280px){
    body{
        width: 100%; height: 100%;
        background-color: rgb(15,15,15);

        margin: 0;

        display: flex;
            flex-direction: column;
            align-items: center;

        overflow-x: hidden; overflow-y: hidden;
    }

    a{-webkit-tap-highlight-color: rgba(0,0,0,0);}

    .linkOne{
        width: 100%; height: 80vh;
        display: flex;
            flex-direction :column;
            align-items: center;
    }

        video{
            width: 190%; max-height: 100%;
        }

    .arrow_up{
        width: 8vw; height: auto;

        position: fixed; margin-top: 60vh;
        opacity: 0%;
        
        animation: 2s ease-in-out 2.5s infinite SlideUp;
    }

    .RS_display{
        display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;

        width: 50%;
    }

        .img_logo{
            width: auto; height: 25px; max-height: 45px;
        }

            .img_logo img{
                width: auto; height: 25px; max-height: 45px;

                opacity: 50%;
            }
}



@keyframes fadeInVids{
    from{
        opacity: 0;
    }
    90%{
        opacity: 0;
    }

    to{
        opacity: 1;
    }
}


@keyframes displayLoop{
    from{
        opacity: 0;
    }

    50%{
        opacity: 1;
    }

    to{
        opacity: 0;
    }
}


@keyframes SlideUp{
    from{
        opacity: 0;
        transform: translateY(0);
    }

    15%{
        opacity: 1;
    }

    to{
        opacity: 0;
        transform: translateY(-55px);
    }
}

@keyframes StartImg{
    from{
        opacity: 0;
    }

    to{
        opacity: 0.65;
    }
}

@keyframes SlideBorder{
    from{
        opacity: 0;
        transform: translateX(0);
    }

    50%{
        opacity: 1;
        transform: translateX(20vw);
    }

    to{
        transform: translateX(0);
    }
}

@keyframes SlideBorderLeft{
    from{
        opacity: 0;
        transform: translateX(0);
    }

    50%{
        opacity: 1;
        transform: translateX(-20vw);
    }

    to{
        transform: translateX(0);
    }
}


/*.sound{
    display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    width: 150px; height: 60px;
    position: fixed; z-index: 15;
    bottom: 15vh; left: 4vw; 

    background-color: black; opacity: 0;
    border: white solid 1px; border-radius: 15px; padding-left: 20px; padding-right: 20px;
    font-family: 'Montserrat', sans-serif;

    animation: 1.5s ease-in 0s forwards StartImg;
    transition: filter 0.75s, filter 0.75s;
}

    .sound:hover{filter: invert(1); filter: drop-shadow(0 0 45px rgba(255, 255, 255, 0.3));}

.OnOff{
    width: 40%; height: 65%;
    border: none; background-color: black;
}
    .OnOff img{
        width: auto; height: 100%;
        text-align: center;
    }

.sound-text{
    color: white; text-align: center;
}