@charset "utf-8";

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('./red_clouds.png');
    background-size: cover;
    background-position: top;
	background-color: #611024;
    opacity: 0;
    transition: opacity 0.5s ease-in;
    z-index: -1; /* This makes sure the image stays behind your content */
}

body.loaded::before {
  opacity: 1;
}

body {
    margin: 0;
    padding: 0;
    background-color: #611024;
}

/* This is your default scrolling border class */
#scrolling-border {
    position: relative;
    height: 60px;
    width: 100%;
    background-image: url('palm-mini_w.png');
    background-size: auto 60px;
    background-repeat: repeat-x;
}

/* This is the animation class for left scrolling */
#scrolling-border.scroll-left {
    animation: scroll-left 2.5s linear infinite;
}

@keyframes scroll-left {
    0% {
        background-position: 57px, 0;
        animation-timing-function: linear;
    }
    100% {
        background-position: 0, 0;
        animation-timing-function: linear;
    }
}

/* This is the animation class for right scrolling */
#scrolling-border.scroll-right {
    animation: scroll-right 2.5s linear infinite;
}

@keyframes scroll-right {
    0% {
        background-position: -57px, 0;
        animation-timing-function: linear;
    }
    100% {
        background-position: 0, 0;
        animation-timing-function: linear;
    }
}

/* ... rest of your code ... */

#heading {
    font-family: "Palatino Linotype", serif;
    font-size: 24px;
    color: #FFFDD0;  /* Cream */
    margin-top: 16px; /* Adjust the value as needed */
    text-align: center;
    background-color: transparent;
}

#heading h2 {
      text-shadow: 
    3px 3px 0 #800000, 
    -3px -3px 0 #800000, 
    3px -3px 0 #800000, 
    -3px 3px 0 #800000, 
    3px 0px 0 #800000, 
    0px 3px 0 #800000,
    -3px 0px 0 #800000,
    0px -3px 0 #800000,
    0 0 10px #800000, 
    0 0 20px #800000, 
    0 0 30px #800000, 
    0 0 40px #800000;
}

.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

.navbar li {
    float: left;
}

.navbar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar li a:hover {
    background-color: #111;
}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}