@import url('https://fonts.googleapis.com/css2?family=Notable&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Notable&family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');
@keyframes wobbler {
    from { transform: rotate(0.5deg); }
    to { transform: rotate(-0.5deg); }
}
@keyframes float {
    from { transform: translateY(2px); }
    to { transform: translateY(-2px); }
}
@keyframes aparicion {
    from { opacity: 0%;}
    to { opacity: 100%;}
}
* {
    box-sizing: border-box;
}
p, a {
    font-family: 'Roboto Flex';
    text-decoration: none;
    animation: aparicion 1s ease-in-out;
}
.pregunta {
    background-image: radial-gradient(circle at 50% 50%, #000000, #ff000000);
}
h2 {
    font-family: 'Notable', fantasy;
    text-shadow: #ffffffcb 1px 2px 11px;
    animation: 1s aparicion ease,
                1s wobbler ease-in-out infinite alternate;
    padding: 0.2em;
}
body {
    display: block;
    margin: 0;
    overflow-y: hidden;
    color: white;
    background-image: linear-gradient(to bottom, rgba(48, 0, 0, 0.201), black), 
                        url(384863_51c62.gif);
    background-size: 100% 100%;
    background-attachment: fixed;
}
nav {
    display: flex;
    height: 5em;
    padding-bottom: 1em;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 1em;
    background-image: linear-gradient(to bottom, black, red);
    border-bottom: 3px solid white;
}
nav a {
    color: rgb(97, 0, 0);
    text-shadow: #001bac70 0px 0px 10px;
    transition: 1s ease;
}
nav a:not(:last-child)::after {
    content: " ♩ ";
    color: white;
    margin-left: 0.5em;
    margin-right: 0.5em;
}
nav a:hover {
    color: white;
    letter-spacing: 2px;
}
nav :first-child {
    font-weight: bold;
}
.container {
    display: grid;
    overflow-y: scroll;
    scrollbar-color: white black;
    scrollbar-width: medium;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    height: 80vh; /* Puedes ajustar este valor según lo que necesites */
    place-items: center;
    grid-template-areas:"header header header"
                        "main main main";
    grid-template-rows: 10em auto;
    background: rgb(255, 0, 0);
    border: 3px solid #fff;
}
header {
    display: flex;
    overflow: hidden;
    height: auto;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-bottom: 4em;
    background-color: black;
    grid-area: header;
}
header h1 {
    font-size: 4em;
    animation: float 2s ease-in-out infinite alternate,
                1s aparicion ease;
    text-shadow: #ffffffcb 1px 2px 11px;
    font-family: 'Notable', fantasy;
}
main {
    grid-area: main;
}
h2 {
    font-size: 1.2em;
    text-align: center;
    margin: 0;
}