/* General Styles */
html,
body {
    height: 100%;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
    /* Prevents scrollbars */
}

.hero-container {
    position: relative;
    /* Establishes a positioning context for child elements */
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.content {
    position: absolute;
    top: 80%;
    /* Positions the top of the element 80% down from the top of the container */
    left: 50%;
    transform: translate(-50%, -50%);
    /* Centers the element perfectly on the 80% mark */
    text-align: center;
    width: 90%;
    /* Ensures content doesn't touch screen edges */
}

h1 a {
    color: blue;
    text-decoration: none;
    font-weight: bold;
    /* Adds a slight shadow to make the text more readable against a busy background */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
}

/* --- Responsive Rules --- */

/* Phone (Default): Screens up to 767px wide */
.hero-container {
    background-image: url('phone.jpg');
}

h1 a {
    font-size: 1.8rem;
}

/* Tablet: Screens between 768px and 1024px wide */
@media (min-width: 768px) {
    .hero-container {
        background-image: url('tablet.jpg');
    }

    h1 a {
        font-size: 2.5rem;
    }
}

/* Large Screens / Desktop: Screens 1025px wide and up */
@media (min-width: 1025px) {
    .hero-container {
        background-image: url('large.jpg');
    }

    h1 a {
        font-size: 3.5rem;
    }
}