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

body {
    background-color: whitesmoke;
}

.container {
    border: 1px solid black;
    background-color: white;
    border-radius: 4px;
    width: 800px;
    height: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.game {
    position: absolute;
    top: 50%;
    left: 35%;
    transform: translate(-50%, -50%);
    width: 510px;
    height: 510px;
    display: flex;
    flex-wrap: wrap;
}

.boton {
    flex: 1 0 50%;
    border: 5px solid black;
}

.UpLeft {
    background-color: red;
    border-top-left-radius: 100% ;
}

.UpRight {
    background-color: blue;
    border-top-right-radius: 100%;
}

.BottonLeft {
    background-color: green;
    border-bottom-left-radius: 100%;
}

.BottonRight {
    background-color: yellow;
    border-bottom-right-radius: 100%;
}

.UpLeft:hover {
    border: 6px solid red;
}
.UpRight:hover {
    border: 6px solid blue;
}
.BottonLeft:hover {
    border: 6px solid green;
}
.BottonRight:hover {
    border: 6px solid yellow;
}

.UpLeft:active {
    border: 6px solid tomato;
    background-color: tomato;
}
.UpRight:active {
    border: 6px solid steelblue;
    background-color: steelblue;
}
.BottonLeft:active {
    border: 6px solid greenyellow;
    background-color: greenyellow;
}
.BottonRight:active {
    border: 1px solid gold;
    background-color: gold;
}

.center {
    position: absolute;
    background-color: black;
    width: 250px;
    height: 250px;
    border-radius: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: whitesmoke;
}

.score {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 100px;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 85px;
}

.btn_Container {
    width: 25%;
    height: 20%;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translate(0%, -50%);
    padding: 4px;
}

.btn {
    margin-top: 4px;   
    width: 160px;
    height: 50px;
    font-size: 20px;
}

#restart {
    display: none;
}

.UpLeft.flash {
    border: 6px solid tomato;
    background-color: tomato;
}
.UpRight.flash {
    border: 6px solid steelblue;
    background-color: steelblue;
}
.BottonLeft.flash {
    border: 6px solid greenyellow;
    background-color: greenyellow;
}
.BottonRight.flash {
    border: 1px solid gold;
    background-color: gold;
}

/* .boton:active {
    background-color: white;
} */

.info {
    border: 1px solid black;
    background-color: whitesmoke;
    border-radius: 4px;
    width: 760px;
    height: 520px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
    text-align: center; 
    display: none;
}

.info h1 {
    margin-top: 45px;
}

.info p {
    margin-top: 20px;
    font-size: 25px;
    padding: 20px;
}