/* Basic reset for margin and padding */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'PJSMedium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Full-page gradient background with stars */
body {
    background: linear-gradient(to top, #0f0c29, #302b63, #24243e);
    background-attachment: fixed;
    color: white; /* Ensures text is visible on the dark background */
}

/* Additional styling for the starry specks */
body::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('specks.webp') center center / cover no-repeat; /* Scales image to cover */
    opacity: 0.2; /* Sets the opacity of the stars */
    pointer-events: none; /* Ensures clicks pass through to elements below */
    z-index: -1; /* Ensures the stars appear behind all other content */
}

/* Styling for the hero section */
.hero {
    text-align: center;
    position: absolute;
    width: calc(100% - 40px); /* Accounts for padding */
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    padding: 20px;
    box-sizing: border-box;
    z-index: 1;
}

/* Logo, Company Name, and Tagline Styling */
@media (orientation: landscape) and (min-height: 769px) {
    .company-logo {
        width: 180px;
    }
}
@media (orientation: portrait) and (min-height: 769px) {
    .company-logo {
        width: 100px;
    }
}
@media (max-height: 768px) {
    .company-logo {
        width: 80px;
    }
}
.company-logo {
    height: auto;
    display: block;
    margin: 0 auto;
}

@media (orientation: landscape) and (min-height: 769px) {
    .company-name {
        margin: 30px 0 20px;
    }
}
@media (orientation: portrait) and (min-height: 769px) {
    .company-name {
        margin: 10px 0 20px;
    }
}
@media (max-height: 768px) {
    .company-name {
         visibility: hidden;
         height: 0;
         margin: 0;
     }
 }
.company-name {
    font-size: 3rem;
}

@media (max-height: 768px) {
     .tagline {
         margin-top: 0;
     }
 }
.tagline {
    font-size: 1.8rem;
    font-weight: lighter;
    opacity: 0.9;
}

/* Moon container and image styling */
@media (orientation: landscape) {
    .moon-container {
        height: 50%;
    }
}
@media (orientation: portrait) {
    .moon-container {
        height: 60%;
    }
}
.moon-container {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: visible;
    display: grid;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 10px;
}

@media (orientation: landscape) {
    .moon-image {
        width: 100vw;
        margin-bottom: -80%;
    }
}
@media (orientation: portrait) {
    .moon-image {
        width: 200vw;
        margin-bottom: -75%;
    }
}
.moon-image {
    height: auto;
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.6));
    pointer-events: none; /* Ensures clicks pass through to elements below */
    z-index: -1; /* Ensures the stars appear behind all other content */
}