@font-face {
    font-family: 'Whitney Light';
    src: url('fonts/whitneylight.otf') format('opentype');
}

@font-face {
    font-family: 'Whitney Semibold';
    src: url('fonts/whitneysemibold.otf') format('opentype');
}


body {
    
    background-image:url("bgdot.svg"), linear-gradient(90deg, #797979 0%, #464646 100%) ;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    padding: 0px;
    margin: 0px;
    color: aliceblue;
    font-size:1vw;
    font-family: 'Whitney light';
    height: 100vh;
    justify-content: flex-start;

}


header{
    z-index: 1000;
}

header nav{
    height:10vh;
    display: grid;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    grid-template-columns: 7vh 1fr 5vw;
    margin: 0 2vh 1vh 2vh;
}

header nav ul{
    display:flex;
    list-style-type: none;
    justify-content: center;
}

header li a{
    text-decoration:none;
    color:white;
    padding:2vw;
    font-family: 'Whitney Semibold';
    font-size:5vh;
    transition: filter 0.5s ease;
    filter:drop-shadow(-0.3vh 0.3vh 0px black);
    font-weight: bold;
    
}

.logo-header{
    padding-top: 2vh;
}


header li a:hover{
    filter:drop-shadow(-0.6vh 0.6vh 0px black);
}

/* mise en place de la grid */

.vote{
    display: grid;
    grid-template-columns: 0.8fr 1fr 0.2fr 1fr 0.8fr;
    grid-template-rows: 65vh 5vh 10vh 8vh;
    margin-top: 1vh;
    
}

.choix1{
    grid-column:2;
    grid-row:1;
        display: flex;
    align-items: stretch;
    justify-content: center;
}

.choix2{
    grid-column:4;
    grid-row:1;
    display: flex;
    align-items: stretch;
    justify-content: center;
}


.vote1{
    grid-column:2;
    grid-row:3;
}

.vote2{
    grid-column:4;
    grid-row:3;
}

.lien-vote1{
    grid-column:2;
    grid-row:4;
}

.lien-vote2{
    grid-column:4;
    grid-row:4;
}

.txt1{
    grid-column:1;
    grid-row:1;
}

.txt2{
    grid-column:5;
    grid-row:1;
}

.player1{
    grid-column:2;
    grid-row:2;
}

.player2{
    grid-column:4;
    grid-row:2;
}

/* modification du lecteur */

.media{
    max-width: 100%;
    max-height:100%;
    filter: drop-shadow(0px 0px 20px #00000030);
    transition: 0.3s filter;
    cursor:pointer;
    
}

.media:hover{
    /*à remplir*/
}

/* bouton vote */

.vote1, .vote2{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.voteisok{
    opacity: 1 !important;
}

.vote1 input[type="submit"], .vote2 input[type="submit"]{
    margin: 0;
    font-size: 2vh;
    border:none;
    text-decoration: none;
    color: black;
    font-family: arial;
    font-weight: 800;
    padding: 1vh 3vh 1vh 3vh;
    background-color: white;
    border-radius: 0vh 2vh;
    position:relative;
    margin:0vh;
    opacity: 0;
    transition: opacity 2s linear(0 0%, 0 90%, 1 100%), filter 0.5s ease;
}





/* pop up */

.txt1, .txt2{
    visibility:hidden;
}

.active{
    visibility: visible;
}

/* infos bouton */

.lien-vote1, .lien-vote2{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 6vh;
    width: 6vh;
    background-color: white;
    border: 0.5vh solid black;
    border-radius: 10vw;
    margin-left: auto;
    margin-right: auto;
    filter: drop-shadow(-0.5vh 0.5vh 0px #000000);
    text-decoration:none;
    color:black;
    font-family:arial;
    font-weight: 800;
    font-size:4vh;
    transition: filter 0.5s ease;
}

.lien-vote1:hover, .lien-vote2:hover{
    filter: drop-shadow(-1vh 1vh 0px #000000);
}

/* text d'info*/

.txt1{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding-right: 3vw;
}

.txt2{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 3vw;
}


/* player video*/

.player1, .player2, .player{
    display:flex;
        align-items: center;
}

#play-pause1 , #play-pause2, .player button{
    width:5vh;
    height:5vh;
    background:none;
    border:none;
    cursor:pointer;
}

#play-pauseimg1 , #play-pauseimg2, .player button img{
    width:5vh;
    height:5vh;
    transition: 0.2s;
    filter:drop-shadow(-0.5vh 0.5vh 0px black);
}

#play-pauseimg1:hover , #play-pauseimg2:hover, .player button img:hover{
    opacity:0.8;
}


input[type="range"]{
    width:100%;
    margin:0px 1vw 0px 1vw;
  -webkit-appearance: none;
  width: 100%;
  height: 1vh;
  background: #FFFFFF;
  border-radius:100px;
  filter:drop-shadow(-0.5vh 0.5vh 0px black);
  cursor: pointer;
  
}


input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 3vh;
  height: 3vh;
  border-radius:100px;
  background: #ffffff;
  border: black solid 0.5vh;
  transition: background 0.2s;
}

input[type="range"]::-moz-range-thumb {
  width: 3vh;
  height: 3vh;
  border-radius:100px;
  background: #ffffff;
  border: black solid 0.5vh;
  transition: background 0.2s;
}

input[type="range"]::-webkit-slider-thumb:hover{
    background: #b8b8b8;
}

input[type="range"]::-moz-range-thumb:hover{
    background: #b8b8b8;
}


/* Recherche */

.divrecherche, .leaderdiv{
    display: grid;
    grid-template-columns: 1fr 30vw 1fr;
    justify-items: center;
    padding-bottom: 2vh;
}

.divrecherche h2, .switch_page, .statrecherche, .divrecherche h3, .divrecherche form, .divrecherche p, .divrecherche video, .divrecherche a, .divrecherche .resultats, .leaderdiv .stats, .leaderdiv p, .leaderdiv .leaderboard{
    grid-column:2;
}

.lien-infos{
    height: 3vw;
    width: 3vw;
    background-color: white;
    border: 0.5vh solid black;
    border-radius: 10vw;
    margin-left: auto;
    margin-right: auto;
    filter: drop-shadow(0.5vh 0.5vh 0px #000000);
    text-decoration:none;
    color:black;
    font-family:arial;
    font-weight: 800;
    font-size:2vw;
    transition: filter 0.5s ease;
    display:flex;
    justify-content: center;
    margin: 2vh 0 4vh;
}

.lien-infos:hover{
    filter: drop-shadow(1vh 1vh 0px #000000);
}


.statrecherche{
    grid-row:3;
}

.switch_page a{
    color: black;
    background-color: white;
    text-decoration: none;
    font-size: 2vh;
    font-weight: 700;
    margin: 2vh;
    padding: 1vh 2vh;
    border:0.5vh black solid;
    border-radius:2vh 0vh;
    grid-column: auto;
    transition:filter 0.5s;
    
}

.switch_page a:hover{
    filter:drop-shadow(0.5vh 0.5vh 0px black);
}

.switch_page {
    grid-row:5;
    display:flex;
    justify-content: space-around;
    grid-template-columns: 1fr 1fr;
}

.resultat_vid{
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Leaderboard */

.leaderboard-video, .leaderboard-infos{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.stats{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.divrecherche input[type="text"]{
    border-radius: 2vw 0px;
    padding: 1vw 2vw;
    border: black solid 0.3vw;
    font-size: 1vw;
    width: 15vw;
    filter: drop-shadow(1vh 1vh 0px black);
    outline: none;
    
}

.divrecherche input::placeholder{
    color:rgb(163, 163, 163);
}
.resultat_vid .media, .leaderboard-video .media{
    width:100%;
}

.resultat_vid h3, .leaderboard-video h3{
    display: flex;
    background-color: #ffffff;
    color: #000000;
    font-family: arial;
    font-weight: 800;
    width: 100%;
    height: 100%;
    margin: 0 0 2vh 0;
    padding: 2vh 0vh;
    border-radius: 2vh 0;
    justify-content: center;
    filter: drop-shadow(1vh 1vh 0px black);
}


/* infos */

.infos{
    display: grid;
    grid-gap: 3vw;
    grid-template-columns: 1fr 1fr;
}

.infos .txt{
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    font-size: 3vh;
}

.infos video{
    height: 100%;
    width: 100%;
    max-height: 70vh;
    max-width: 40vw;
}