body {

    background:
    radial-gradient(circle at center, #222, #050505);

    color:white;

    font-family:
    "Helvetica Neue",
    Arial,
    sans-serif;

    text-align:center;

    margin:0;

    height:100vh;

    overflow:hidden;

}



h1 {

    margin-top:25px;

    font-size:42px;

    letter-spacing:8px;

    font-weight:300;

}



video, canvas {

    width:640px;

    height:480px;

    border-radius:20px;

}



video {

    margin-top:20px;

    opacity:0.85;

}



canvas {

    position:absolute;

    top:120px;

    left:50%;

    transform:translateX(-50%);

}



button {

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);


    background:#ffffff10;

    color:white;

    border:1px solid white;

    border-radius:50px;


    padding:

    15px 45px;


    font-size:18px;

    letter-spacing:2px;


    cursor:pointer;


    backdrop-filter:blur(10px);


    transition:0.3s;

}



button:hover {

    background:white;

    color:black;

}

.controles {

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:20px;

}



.controles button {

    position:relative;

    bottom:auto;

    left:auto;

    transform:none;

}



select {


    background:#ffffff10;

    color:white;

    border:1px solid white;

    border-radius:50px;


    padding:

    15px 25px;


    font-size:16px;


    backdrop-filter:blur(10px);

}



select option {

    color:black;

}