@font-face {
  font-family: 'start2p';
  src: url('/wiwiwi/PressStart2P.ttf') format('truetype');
}


body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 20px;
            background-color: #950000;
        }
.container {
            max-width: 1000px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
}
.contenedor-grafico {
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
            margin:20px;
        }
.contenedor-grafico2 {
            height: 500px;
            width:650px;
            background-color: #ffffff;
            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
            border-radius: 8px;
            overflow-y: scroll;
            display: block;
        }

.contenedor-grafico2::-webkit-scrollbar {
    width: 8px;
}

.contenedor-grafico2::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 10px;
}

.contenedor-grafico2::-webkit-scrollbar-thumb {
    background: #b84545;
    border-radius: 10px;
}

.contenedor-grafico2::-webkit-scrollbar-thumb:hover {
    background: #cb6262; 
}

.corazonn {
    display: inline-block;
    color: #ff4d4d;
    animation: latido 1.2s infinite;
    width: 120px;
    height: auto;
}

@keyframes latido {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

h1 {
    font-family:'start2p';
    font-size: 3rem;
    color: #ffffff;
    }

p {
    font-family: monospace;
    color: #ac3c3c;
    margin: 20px;
    }



#portada {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tnt-container {
    align-items: center;
    justify-content: center;
    position: relative;
    width: 749px;
    height: 474px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.tnt-animada {
    align-items: center;
    justify-content: center;
    border-radius:20px;
    position: absolute;
    width: 100%;
    opacity: 0;
    animation: rotarFotos 9s infinite;
}

#img1 { animation-delay: 0s; }
#img2 { animation-delay: 3s; }
#img3 { animation-delay: 6s; }

@keyframes rotarFotos {
    0%, 33% { opacity: 1; }
    34%, 100% { opacity: 0; }
}

#btn-abrir {
    position: absolute;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    
    width: 200px;
    height: auto;
    cursor: pointer;
    z-index: 100;
    
    transition: transform 0.2s ease;
    animation: latido 1.2s infinite;
}


#btn-abrir:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

#btn-abrir:active {
    transform: translate(-50%, -50%) scale(0.9);
}

#btn-regreso {
  cursor: pointer;
  }