* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

video {
    position: fixed;
    top: 2;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 75%; 
    z-index: -2;
}

@font-face {
    font-family: 'Greenscr';
    src: url('Greenscr.ttf');
}

@font-face {
    font-family: 'PixelSplitter';
    src: url('PixelSplitter-Bold.ttf');
}

@font-face {
    font-family: 'Hardpixel';
    src: url('Hardpixel.OTF');
}

.yes, .no, .yesnt {
    
    text-decoration: none;
}
.accueil {
    text-decoration: none;
    
}

.accueil:hover {
    text-decoration: underline;;
    color: #ff0066;
}

.username {
    font-size: 1.9em;
    color: #30acff;;
    text-shadow:
        3px 3px 0px #ed2a18,
        5px 5px 0px #000;
    letter-spacing: 3px;
    font-weight: 900;
    margin-top: 40px;
    font-family: 'Greenscr', monospace;
    line-height: 1.3;
}


.gameover {
    
    position: fixed;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    
    

    
}

.container {
    
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-top: 44px;
    font-size: 1.5em;
    color: white;
    font-family: 'Greenscr', monospace;
}
.ball {
   
    width: 30px;
    height: 30px;
    margin-top: 0px;

}
.gameover h1 {
    font-size: 3em;
    color: #e52828;
    text-shadow:
        4px 4px 0px #ffb811,
        8px 8px 0px #000;
    letter-spacing: 7.5px;
    font-weight: 900;
    font-family: 'Hardpixel', monospace;
}

.play-again {
    font-size: 1.66em;
    color: #ff0066;;
    text-shadow:
        px 3px 0px #cc0e009c,
        5px 5px 0px #605e5e;
    letter-spacing: 3px;
    font-weight: 700;
    margin-top: 260px;
    font-family: 'Hardpixel', monospace;
    
}

.choices {
    margin-top: 10px;
    font-size: 1.2em;
    color: white;
    letter-spacing: 4px;
    font-family: 'PixelSplitter', monospace;
   
}

.choices .yes {
    color: white;
    cursor: pointer;
    margin-left: 20px
}

.choices .yes::before {
    display:none;
    content: '▶';
    color: #ff40a0;
}

.choices .no::before {
    display : none;
    content: '▶';
    color: #ff40a0;
}

.choices .no:hover:before {
    display : inline;
    content: '▶ ';
    color: #ff40a0;
}


.choices .yes:hover:before {
    display : inline;
    content: '▶ ';
    color: #ff40a0;
}
.choices .yesnt {
    color: white;
    cursor: pointer;
    margin-left: 20px
}

.choices .yesnt::before {
    display:none;
    content: '▶';
    color: #ff40a0;
}

.choices .yesnt:hover:before {
    display : inline;
    content: '▶ ';
    color: #ff40a0;
}


.choices .no {
    color: white;
    margin-left: 20px;
    cursor: pointer;
}

.choices .yes:hover,
.choices .no:hover,
.choices .yesnt:hover {
    color: #00d5ff;

}