html {
    box-sizing: border-box;
    height: 100%;
    margin: 0;
    padding: 0;
}

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

.header-buttons {
    display: flex;
    align-items: center;
}

.play-early-access-buttons {
    display: flex;
    justify-content: space-between; /* This creates space on both sides */
    align-items: center;
    width: 100%; /* Full width */
    /* Add padding or margin as needed */
}

.dropbtn {
    background-color: #F0F0F0;
    color: #000000 !important; 
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content.show {
    display: block;
}


/* Mobile view adjustment for dropdown */
@media screen and (max-width: 600px) {
    .dropdown {
        display: none;
        
    }
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
 /* Use min-height to ensure at least viewport height */
}
body, html {
    height: 100%; /* Ensure the full height is used for the layout */
    margin: 0; /* Reset any default margin */
}

.main-content {
    min-height: 82.5vh; /* Adjust 40px to the height of your header */
    /* Other styles for .main-content */
}

body {
    font-family: 'Albert Sans', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    background-color: #fff; /* Assuming a white background */
}

.top-bar {
    display: flex;
    padding: 0.375rem 2.75rem; /* Adjust the padding as needed */
    align-items: center;
    gap: 0.625rem;
    width: 100%; /* Stretch to the full width of the viewport */
    background: #7AD900; /* The green color you specified */
    /* Add any other styles for top bar */
    height: 2em;
}

header, footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem; /* Adjust padding to match mock-up */
    background-color: #ffffff;
    height: 8rem;
    /* box-shadow: 0em 0.2em 0.5em rgba(0, 0, 0, 0.089); */
}

.logo {
    max-width: 20rem; /* Adjust logo size to match mock-up */
    height: auto; /* Keep the aspect ratio */
}

.main-content {
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 2rem; /* Add horizontal padding */
    min-height: calc(100vh - 150px);
    flex: 1; /* Allows .main-content to expand */
    padding-top: 50px; /* Adjust this value to the height of your top bar */
    padding-bottom: 4rem;
    display: flex;
    justify-content: flex-end;
    text-wrap: balance;

}

.main-content h1 {
    font-size: 6.8rem; /* Increase size to match mock-up */
    font-weight: 400; /* Bold font for the heading */
    margin: 1rem 0; /* Adjust margin to match mock-up */
    line-height: 1.1; /* Adjust line height for better readability */
    text-wrap: balance;
    width: 80%;
}


p {
    font-family: 'Source Serif 4', serif;
    font-family: 'Source Serif 4', italic;
    font-weight: 300;
    font-size: 3rem;
}



button {
    cursor: pointer;
    padding: 1rem 2rem; /* Increase padding to make buttons larger */
    margin: 1rem;
    font-size: 1rem; /* Adjust font size for buttons */
    border: none; /* Remove border */
    background-color: #000; /* Set button color to black */
    color: #fff; /* Set text color to white */
    border-radius: 40px; /* Add rounded corners to buttons */
    white-space: nowrap;
    transition: all 0.3s ease;
    margin-left: 0;
    /* border:0.2rem inset #ffffff00; !important */
}

button:hover {
    color: #ffffff;
    /* font-weight: 700;  !important */
    /* background-color: #BFF400; */
    /* box-shadow: 0px 5px 5px #00000058;  */
    transform: translateY(-2px);
    /* border:0.2rem inset #000; !important */
  }

  button:active {
    transform: translateY(0);
}

.play-button {
    background-color: #F0F0F0; /* Use the correct shade of grey */
    color: #000; /* Text/icon color */
    font-size: 1.5rem; /* Adjust size to match mock-up; may need to be smaller depending on your icon */
    margin-top: 2rem; /* Adjust margin to match mock-up */
    border-radius: 50%; /* Make it round */
    width: 64px; /* Fixed size */
    height: 64px; /* Fixed size */
    line-height: 64px; /* Center the icon vertically */
    background-position: center; /* Center the background image if used */
    background-repeat: no-repeat; /* No repeat for background image */
    display: inline-flex; /* Use inline-flex to center content */
    align-items: center; /* Align items vertically */
    justify-content: center; /* Align items horizontally */
    border: none; /* Remove border if not needed */
    outline: none; /* Remove outline to match mock-up */
    cursor: pointer; /* Change cursor to pointer to indicate it's clickable */
}



footer {
    background-color: #000000;
    color: white;
    padding: 2rem 2rem; /* Adjust padding to match mock-up */
    margin-top:auto;
    position: relative; /* Change to relative */
    width: 100%;
    bottom: 0;
    z-index: 10;
    /* border-radius: 1rem 1rem 0  0; */
    display: flex;
    justify-content: space-between;
    height: 125%; /* 25% taller */
}

.footer-wrapper {
    flex-shrink: 0; /* Prevent the footer from shrinking */
}

footer:before {
    content: "Hyperlocal © 2023";
    position: absolute;
    left: 2rem;
    bottom: 2rem;
    color: #ffffffa8 /* your choice of color */;
    font-size: 1em; /* Adjust size as needed */
}

#early-access {
    color: #111111; /* Grey text for early access message */
    font-size: 0.9rem; /* Smaller font size for the early access message */
    margin-bottom: 1rem; /* Space before the headline */
}

/* Additional styles for mock-up accuracy */
header img.logo, footer img.logo {
    /* filter: brightness(0) invert(1); Invert colors for logo if it's black */
}

/* Add any additional styles you need here */

/* Media query for tablet and desktop screens */
@media screen and (min-width: 768px) {
    .main-content {
        display: flex; /* Use flexbox for layout */
        flex-direction: column; /* Stack children vertically */
        align-items: flex-start; /* Align children to the start of the cross axis */
    }

    .main-content .early-access-btn {
        align-self: flex-start; /* Align button to the start */
        margin-top: 1rem; /* Provide some space from the top, adjust as needed */
    }

    .main-content h1 {
        text-align: left; /* Align the H1 text to the left */
        width: 100%; /* Ensure the heading uses the full width */
    }

    .main-content .play-button {
        align-self: flex-end; /* Align button to the end */
        margin-top: -4rem; /* Adjust this value so the button aligns horizontally with 'Get Early-Access' */
    }
}

/* Media query for mobile screens */
@media screen and (max-width: 767px), screen and (max-device-width: 767px) and (orientation: portrait) {
    .main-content .play-button {
        /* display: none; Hide the play button on mobile */
    }

    .header-buttons {
        display: none; /* Hide the play button on mobile */
    }

    .main-content .early-access-btn {
        width: 100%; /* Full width for mobile */
    }
    .main-content h1 {
        font-size: 4rem; /* Increase size to match mock-up */
        text-align: left;
    }

    .play-early-access-buttons {
        /* Adjust spacing for mobile if needed */
        flex-direction: row; /* Stack them on smaller screens */
    }

    button {
        padding: 1rem 2rem; /* Increase padding to make buttons larger */
        margin: 1.5rem;
        margin-left: 0;
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }

    .play-button {
    }

    .top-bar{
        justify-content: center;
    }

    .main-content h1 {
        width: 100% !important;
        letter-spacing: -2%;
    }

    header {
        justify-content: center;
    }

    p {
        margin-top: 1rem;
        margin-bottom: 0;
    }

    footer {
        flex-direction: column;
        align-items: initial;
    }

    footer:before {
        display: none;
    }
    
}