html {
    height: 100vh;
    padding: 0;
}

body {
    background-image: url('/images/background.png');
    background-size: 20%;
    image-rendering: pixelated;
    min-height: 100vh;
    padding: 0;
    margin: 0;
}

#rain {
    background-image: url('/images/rain.gif');
    display: flex;
    width: 100%;
    min-height: 100vh;
    background-size: 20%;
    image-rendering: pixelated;
}

#lightning {
    width: 100%;
    min-height: 100vh;
    background-color: rgba(0, 0, 0, 0.2);
    animation: lightning 200s infinite;
}

@keyframes darkening {
    0% {
        background-color: rgba(0, 0, 0, 0);
    }
    100% {
        background-color: rgba(0, 0, 0, 0.4);
    }
}

/* Define the lightning animation */
@keyframes lightning {
    0% {
        background-color: rgba(255, 255, 255, 0.5);
    }
    0.1%, 0.12% {
        background-color: rgba(0, 0, 0, 0.4);
    }
    0.13% {
        background-color: rgba(255, 255, 255, 0.65);
    }
    0.16% {
        background-color: rgba(0, 0, 0, 0.1);
    }
    
    100% {
        background-color: rgba(0, 0, 0, 0.4);
    }
}

header {
    background-image: url('/images/title_background.png');
    background-repeat: no-repeat;
    background-size: contain;
    padding: 15px;
    margin: 30px 60px;
}

header > * {
    margin: auto;
    color: #e3b075;
    text-shadow: black 0.1em 0.1em 0.2em;
}

a {
    position: relative;
    color: #f3cfa5;
    text-shadow: rgb(24, 23, 23) 0.1em 0.1em 0.2em;
}
a:hover {
    top: -2px;
}

article {
    margin: 15px auto;
    background-image: url('/images/article_background.png');
    background-size: 25%;
    padding: 15px;
    border-radius: 20px;
    border: 3px solid #aaa;
    min-height: 500px;
    max-width: 800px;
    image-rendering: pixelated;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
}

.content {
    background-image: url('/images/content_background.png');
    background-size: 20%;
    padding: 5px;
    border-radius: 3px;
    border: 3px solid #624017;
    margin-bottom: 20px;
}

.content > * {
    color: #f3cfa5;
    text-shadow: rgb(24, 23, 23) 0.1em 0.1em 0.2em;
}

code {
    background-color: rgba(0, 0, 0, 0.4);
    padding: 10px;
    display: block;
}