:root{
    --white: #FFFFFF;
    --grey: #b3b3b3;
}

*{
    box-sizing: border-box;
    font-family: "DotGothic16", sans-serif;
    color: var(--white);
}

body{
    background-color: #353535;
    background-image: url("/assets/images/backgrounds/bg-main-dom.png");
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: url("/assets/images/elements/pointer2.svg") 12 12, auto;
}

.hidden{
    visibility: hidden;
}


.audio{
    position: absolute;
    right: 0px;
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: right;
    width: 100%;
    padding: 2%;
}

i{
    color: var(--white);
}

i:hover {
    cursor: pointer;
}

.main-screen {
    display: flex;
}

.start-screen {
    display: flex;
    position: absolute;
    width: 802px;
    height: 802px;
    z-index: 5;
    /* background-color: rgba(255, 255, 255, 0.05); */
}

.start-screen .empty {
    width: 400px;
    /* background-color: rgba(128, 9, 9, 0.384); */
    z-index: 6;
}

.start-screen .load {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 401px;
    background-color: rgba(0, 0, 0, 0.658);
    z-index: 6;
    border-radius: 15px;
}

.start-screen .load h1{
    font-size: 4rem;
    margin: 0px;
}

.start-screen .load h2{
    font-size: 1.1rem;
    padding: 4% 10%;
    margin: 0px;
}

.start-screen .load p {
    text-align: center;
    margin: 0px;
    padding: 10% 5%;
}

.start-screen .load a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background-color: #4b4b4b94;
    border-radius: 10px;
    width: 15rem;
    height: 2rem;
}

.start-screen .load a:hover{
    background-color: rgba(250, 3, 147, 0.623);
}

.extra{
    display: flex;
    flex-direction: column;
    text-align: justify;
    width: 400px;
    height: 800px;
    margin-right: 1%;
}

.game-info-card, .game-instructions{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.089);
    padding: 5%;
    border-radius: 15px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.game-info-card {
    justify-content: space-around;
    margin-bottom: 5%;
}

.game-info {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
}

.game-info-score h1, .game-instructions h1, .game-info-lives h1 {
    text-align: center;
    margin: 3px;
    letter-spacing: 0.5rem;
}

canvas {
    border: 1px solid black;
}

#score {
    font-size: 3rem;
    margin: 0px;
    font-weight: 800;
    color: yellow;
    text-align: center;
}

#lives {
    font-size: 3rem;
    margin: 0px;
    font-weight: 800;
    color: yellow;
    text-align: center;
}

#time{
    font-size: 2rem;
    margin: 0px;
    font-weight: 800;
}

img[name="keys"] {
    width: 10rem;
}

img[name="space-bar"] {
    width: 10rem;
}

canvas{
    border-radius: 15px;
}

/* Borde de referencia para mantener una cierta separación */
.framework, .inner-framework{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    width: 400px;
    height: 800px;
}

.inner-framework{
    position: absolute;
    height: calc(100% - 80px);
    width: calc(100% - 80px);
    border: 1px solid rgba(255, 0, 0, 0.4);
    border-style: dotted;
    z-index: 2;
}