*{
    box-sizing:border-box;
}


html,body{

    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;

    background:#111;

    font-family:monospace;

}


/* Main pixel scene */

.race{

    position:relative;

    width:100vw;
    height:100vh;


    background:

    linear-gradient(
        #55bfff 0%,
        #bcecff 45%,
        #5eb83f 46%,
        #318b35 70%,
        #444 71%
    );

    image-rendering:pixelated;

}



/* Mountains */

.race:before{

    content:"";

    position:absolute;

    bottom:30%;

    width:100%;
    height:35%;


    background:

    linear-gradient(
        135deg,
        transparent 45%,
        #567070 46%,
        #567070 60%,
        transparent 61%
    ),

    linear-gradient(
        225deg,
        transparent 45%,
        #405858 46%,
        #405858 60%,
        transparent 61%
    );

}



/* Title */

.title{

    position:absolute;

    top:20px;

    width:100%;

    text-align:center;


    color:#ffe600;

    font-size:34px;

    letter-spacing:6px;

    text-shadow:

    4px 4px #000;

}



/* Camera bezel */

.bezel{

    position:absolute;

    left:50%;
    top:50%;

    transform:
    translate(-50%,-50%);


    width:65vw;

    aspect-ratio:16 / 9;


    background:#222;


    padding:18px;


    border:
    8px solid #666;


    box-shadow:

    inset 0 0 0 6px #111,

    0 15px 40px #000;


    z-index:5;

}



/* Camera screen */

.screen{

    width:100%;
    height:100%;


    background:#050505;


    border:
    4px solid #333;


    overflow:hidden;


    display:flex;

    justify-content:center;

    align-items:center;


    color:#00ff88;

    font-size:22px;


    text-align:center;

}

.screen iframe{

    width:100%;

    height:100%;


    border:0;

    display:block;

}



/* Road */

.road{

    position:absolute;

    bottom:0;

    width:100%;

    height:20%;


    background:#555;


}



.road:before{

    content:"";

    position:absolute;

    top:50%;

    width:100%;

    height:8px;


    background:

    repeating-linear-gradient(
        90deg,
        white 0 50px,
        transparent 50px 100px
    );

}



/* Finish sign */

.finish{

    position:absolute;

    right:10%;

    top:35%;


    background:

    repeating-conic-gradient(
        white 0 25%,
        black 0 50%
    );


    background-size:20px 20px;


    padding:20px;


    color:red;


    font-weight:bold;


    border:4px solid white;

}



/* Pixel bicycle */

.bike{

    position:absolute;

    bottom:20%;

    width:90px;

    height:50px;

}



.bike span{

    position:absolute;

    width:30px;

    height:30px;

    bottom:0;


    border:

    5px solid black;


    border-radius:50%;

}



.bike span:after{

    content:"";


    position:absolute;

    left:20px;

    top:-15px;


    width:30px;

    height:20px;


    background:#ff3333;

}



.bike:before{

    content:"";


    position:absolute;

    left:25px;

    top:10px;


    width:35px;

    height:8px;


    background:#0066ff;


}



.bike1{

    left:15%;

}



.bike2{

    left:75%;

    transform:scale(.8);

}



/* CRT pixel overlay */

.race:after{

    content:"";

    position:absolute;

    inset:0;


    pointer-events:none;


    background:

    repeating-linear-gradient(
        0deg,
        rgba(255,255,255,.08) 0 1px,
        transparent 2px 4px
    );

}