center.red {
    color: red;
}

h1, h2, h3, b {
    color: brown;
}

p, span, lu, li, table, tr, td, center {
    /*backdrop-filter: blur(6px);*/
    color: orange;
    animation: textshake 10s linear infinite;
}

hr {
    height: 2px;
    background-color: brown;
    border: none;
    width: 100%;
}

html {
}

body {
    margin: 0; padding: 0;
    background: black;
    color: brown;
    font-family: "JetBrains Mono", "Fira Code", "Courier New", monospace;
    font-size: 18px;
    line-height: 1.7;
    display: flex;
    justify-content: center;
    /* background-image: url('911.jpg'); */
    background-repeat: repeat;
    background-size: auto;
    animation: scrollTexture 20s linear infinite;
}

div.hate {
    background: #222222fa;
    padding: 3rem 1.5rem;
    border: 1em solid brown;
}

main {
    max-width: 60em;
    width: 100%;
    padding: 3rem 1.5rem;
    animation: shake 10s linear infinite;
}

a {
    color: brown;
}

@keyframes shake {
    0% { width: 15em; }
    5% { width: 25em; }
    15% { width: 70em; }
    90% { width: 25em; }
    100% { width: 15em; }
}

@keyframes textshake {
    0% { width: 15em; }
    5% { width: 25em; }
    20% { width: 35em; }
    25% { width: 40em; }
    80% { width: 40em; }
    90% { width: 25em; }
    100% { width: 15em; }
}

@keyframes scrollTexture {
    0% { background-position: 0% 0; }
    50% { background-position: 100% 0; }
    100% { background-position: 0% 0; }
}

div.science {
    height: 300px;
}

table tr:first-child td {
    text-align: center;
    border-bottom: 3px solid #333;
}

audio::-webkit-media-controls-play-button {
    background-color: brown; /* This was just randomly picked by computer god */
    margin-radius: 50%; /* not from computer god, but looks nice on Chrome */
}

audio::-webkit-media-controls-enclosure {
    border-radius: 0;
    background-color: brown;
}

/* Style the progress bar */
audio::-webkit-media-controls-timeline {
    color: #FF5722;
}

audio {
    height: 24px;
}

#back {
font-size: 8px;
padding: 0px;
margin: 0px;
}