/* Base styles */
body {
    margin: 0;
    padding: 0;
    font-family: 'Lacquer', sans-serif;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    min-height: 50vh; /* Ensure full viewport height */
}

header {
    text-align: center;
    padding: 2vw 0; /* Responsive padding */
}

header img {
    max-width: 100%;
    height: auto;
    margin-bottom: 50px;
}

main {
    flex-grow: 1; /* Allow main content to grow to fill available space */
    text-align: center; /* Adjust alignment as needed */
}


  /* optional: restore layout rules */
  width: 100%;
  margin: 0;
  padding: 0;
}
a {
    text-decoration: none;
}

nav {
    margin-bottom: 72px; /* Responsive margin */
}

nav ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: center;
}

nav a {
    color: #000;
    text-decoration: none;
    padding: 1vw 2vw; /* Responsive padding */
    display: inline-block;
    margin-right: 1vw; /* Responsive margin */
}

.underline_text nav ul li a {
    text-decoration: underline; /* Add underline on specific text */
}

.underline_text nav ul li a:hover {
    text-decoration: none; /* Add no underline on hover */
}

.iframe-container {
    width: 90%; /* Use a percentage for responsive width */
    max-width: 560px; /* Limit maximum size */
    aspect-ratio: 16 / 9; /* Maintain aspect ratio */
    margin: 0 auto; /* Center horizontally */
    position: relative;
}

iframe {
    width: 100%; /* Full width of the container */
    height: 100%; /* Full height of the container */
    display: block;
}

.buy-button-container {
    margin: 20px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%; /* Responsive width */
    max-width: 560px; /* Limit maximum size */
}

.form-container  {
    margin: 20px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%; /* Responsive width */
    max-width: 560px; /* Limit maximum size */
}

.streaming-stores-nav {
    padding: 1vw 2vw; /* Responsive padding */
    margin-right: 1vw; /* Responsive margin */
    display: flex;
    justify-content: center;
    margin-top: 20px; /* Responsive margin */
    margin-bottom: 2vw; /* Responsive margin */
}

.streaming-stores-nav img {
    max-width: 10vw; /* Responsive width */
    max-height: 10vw; /* Responsive height */
}


/* Footer styles */
footer {
    margin-top: 38px; /* Push footer to bottom */
    margin-bottom:0px;
    text-align: center;
    padding: 2vw 0; /* Responsive padding */
}

footer nav ul {
    margin-top: auto; /* Push footer to bottom */
    display: flex;
    justify-content: center;
}

/* Media queries for different screen sizes */

@media only screen and (max-width: 48rem) {
    /* Styles for screens up to 768px wide */
    nav ul {  padding: 0.5vw 1vw; /* Responsive padding */
    }
    
    nav a {
        padding: 0.5vw 1vw; /* Responsive padding */
    }

    .streaming-stores-nav {
         padding: 0.5vw 1vw; /* Responsive padding */
    }
        

    .streaming-stores-nav img {
        max-width: 0.5rem; /* Responsive width */
        max-height: 0.5rem; /* Responsive height */
    }
}

@media only screen and (max-width: 30rem) {
    /* Styles for screens up to 480px wide */
    nav ul {  padding: 0.3vw 0.6vw; /* Responsive padding */
    }
    
    nav a {
        padding: 0.3vw 0.6vw; /* Responsive padding */
    }

    .streaming-stores-nav {
         padding: 0.3vw 0.6vw; /* Responsive padding */
    }

    .streaming-stores-nav img {
        max-width: 0.5rem; /* Responsive width */
        max-height: 0.5rem; /* Responsive height */
    }
}

@media only screen and (max-width: 20rem) {
    /* Styles for screens up to 280px wide */
    nav ul {  padding: 0.1vw 0.2vw; /* Responsive padding */
    }
    nav a {
        padding: 0.1vw 0.2vw; /* Responsive padding */
    }

    .streaming-stores-nav {
         padding: 0.1vw 0.2vw; /* Responsive padding */
    }

    .streaming-stores-nav img {
        max-width: 0.5rem; /* Responsive width */
        max-height: 0.5rem; /* Responsive height */
    }
}
@media (max-width: 768px) {
    .iframe-container {
        width: 100%; /* Take full width on smaller screens */
        max-width: none; /* Remove max-width */
    }

    .buy-button-container {
        width: 100%; /* Adjust to full width */
    }
}

@media (max-width: 480px) {
    .iframe-container {
        width: 100%; /* Full width for very small screens */
    }

    .buy-button-container {
        width: 100%; /* Full width */
        margin: 15px auto; /* Adjust margin for small screens */
    }
}