body {
    color: #ffdfbf;
    font-family: serif;
    background-color: #141428;
    margin: 0;
}

footer {
    text-align: center;
}

h1,
h2 {
    text-align: center;
    font-family: Garamond;
    text-shadow: 0px 0px 8px #777;
}

h3 {
    font-family: Garamond;
    font-size: x-large;
    text-decoration: underline;
    text-shadow: 0px 0px 6px #555;
}

p {
    font-size: larger;
}

a {
    color: 049dff;
}

a:hover {
    color: #b2efbe;
}

a:visited {
    color: #74296c;
}

/* Title and Pretty Scene! */
.sky_cover {
    background-color: #141428;
    margin: 0
}

.center_content {
    width: 100%;
    max-width: 1152px;
    margin: auto;
}

.scene_container {
    display: flex;
    justify-content: center;
}

.tower_img {
    position: fixed;
    width: 100%;
    height: auto;
    z-index: -1;
}

.title_img {
    position: absolute;
    width: 70%;
    max-width: 849px;
    height: auto;
    z-index: 2;
    margin: auto;
    padding: 16.25% 0;
    border: 0;
    text-align: center;
}

.scene_img {
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;

    width: 100%;
    height: auto;
    z-index: 1;
    margin: auto;
    padding: 0;
    border: 0;
    text-align: center;
}

/* Story Time! */
.trailer {
    width: 100%;
    height: 100%;
    max-width: 1152px;
    max-height: 648px;
}

.travel_heading {
    margin: 0 0 0.67em 0;
}

.story_chunk {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 8px;
    margin-right: 8px;
}

.story_right,
.story_left {
    width: 100%;
    max-width: 560;
    flex: 1;
}

.story_img_right {
    flex: 1;
    width: 100%;
    max-width: 560;
    margin-left: 12px;
}

.story_img_left {
    flex: 1;
    max-width: 560;
    width: 100%;
    margin-right: 12px;
}

/* Steam Wishlist */
.logo-link {
    display: inline-block;
    transition: color 0.3s;
}

.logo-link:hover .logo-steam {
    filter: hue-rotate(90deg);
}

.logo-steam {
    width: 64;
    margin-bottom: 20px;
}

/* Carousel of Screenshots */
.carousel-container {
    width: 100%;
    max-width: 1152px;
    padding-bottom: 56.25%;
    margin: 0 auto;
    max-height: 648px;
}

.carousel {
    position: relative;
    width: 100%;
    height: fit-content;
}

.carousel img {
    position: absolute;
    width: 100%;
    max-width: 1152;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.prev-btn,
.next-btn {
    cursor: pointer;
}

.arrow-left {
    width: 0;
    height: 0;
    background-color: transparent;
    border-style: solid;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 24px solid #888;
    border-left: 8px transparent;
}

.arrow-left:hover {
    border-right: 24px solid #cc7266;
}

.arrow-right {
    width: 0;
    height: 0;
    background-color: transparent;
    border-style: solid;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 0;
    border-left: 24px solid #888;
}

.arrow-right:hover {
    border-left: 24px solid #cc7266;
}

.dot {
    height: 12px;
    width: 12px;
    margin: -6px 2px;
    background-color: #444;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active {
    background-color: #cc7266;
    ;
}

.standalone_paragraph {
    width: 75%;
    margin: auto;
}

.lunar_logo_link {
    display: flex;
    justify-content: center;
}

.lunar_logo_img {
    width:100%;
    max-width: 538px;
}

.social_text {
    text-align: center;
}

/* Social Media */
.social-icons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.icon-link {
    display: inline-block;
    transition: filter 0.3s;
}

.icon-link img {
    width: 32px;
    filter: opacity(50%);
}

.icon-link:hover img {
    filter: opacity(100%);
}

/* General Things */
.line_separator {
    height: 1px;
    width: 66%;
    margin: 0 auto;
    background: #cc7266;
    border-bottom: 1px solid #a1444b;
}

.line_title {
    margin-top: -16px;
    margin-bottom: 10px;
}

.line_short {
    width: 50%;
}

.center {
    text-align: center;
}

@media (min-width: 768px) {
    /* Apply these styles only when the screen width is 768px or larger */
    .story_chunk {
        flex-direction: row;
    }

    .story_left,
    .story_img_left {
        flex: 1;
        order: 1;
    }

    .story_right,
    .story_img_right {
        flex: 1;
        order: 2;
    }

    .scene_img {
        content: url(../images/scene.png)
    }
}

@media (max-width: 767px) {
    .scene_img {
        content: url(../images/scene_small.png)
    }
}