/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
    background-color: black;
    color: white;
    font-family: "Alata", sans-serif;
}

/* Style is unique to the homepage only */
.home-background{
    background-image: url("stars.gif");
    background-repeat: repeat;
    background-size: 200px 200px;
}

/* Centering Rules */
.center-content {
    text-align: center;
}

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Logo and Promo Images */
.logo-container img {
    width: 550px;
    height: auto;
}

.happyday-image img {
    width: 1688px;
    height: auto;
}

.comeback-image img {
    width: 300px;
    height: auto;
}

.promo-image img {
    width: 800px;
    height: auto;
}

/* Link Hover Effect */
a img {
    transition: filter 0.3s ease;
}

a img:hover {
    filter: brightness(0.7);
}

/* Fade-in Animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.fade-in-image {
    opacity: 0;
    animation: fadeIn 2s forwards; /* Added 'forwards' */
}

/* Text and Font Styles */
.left-aligned {
    text-align: left;
}

.red-text {
    color: red;
}

.large-text {
    font-size: 40px;
}