@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

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

body{

    font-family:'Press Start 2P', cursive;

    background:
    radial-gradient(
        circle at top,
        #3b0000 0%,
        #170000 40%,
        #050505 100%
    );

    width:100%;
    height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;
}

/* Borne */
.arcade-machine{

    width:1000px;

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

/* Haut arcade */
.arcade-top{

    width:100%;
    height:140px;

    background:linear-gradient(
        to bottom,
        #8b0000,
        #3b0000,
        #120000
    );

    border-radius:25px 25px 0 0;

    border:8px solid #550000;

    display:flex;
    justify-content:center;
    align-items:center;

    box-shadow:
    0 0 30px rgba(0,0,0,0.8),
    inset 0 0 20px rgba(255,255,255,0.05);
}

/* Titre */
.arcade-title{

    color:#ffcc00;

    font-size:28px;

    text-shadow:
    0 0 5px #ff0000,
    0 0 15px #ff3300,
    0 0 30px #ff6600,
    0 0 50px red;

    letter-spacing:4px;
}

/* Écran */
.screen-container{

    width:100%;

    background:
    linear-gradient(
        to bottom,
        #220000,
        #050505
    );

    padding:30px;

    border-left:8px solid #550000;
    border-right:8px solid #550000;
    border-bottom:8px solid #550000;

    border-radius:0 0 20px 20px;

    display:flex;
    justify-content:center;
    align-items:center;

    box-shadow:
    inset 0 0 30px rgba(255,0,0,0.1);
}

/* Canvas */
canvas{

    display:block;

    border:10px solid #000;

    border-radius:10px;

    box-shadow:
    0 0 25px rgba(255,0,0,0.8),
    inset 0 0 20px black;

    filter:
    contrast(1.1)
    saturate(1.2);
}

/* Contenere p5 */
#mainContainer{

    width:800px;
    height:600px;

    display:flex;
    justify-content:center;
    align-items:center;
}