body {
    font-family: Arial, sans-serif; /* Set a default font for the body */
    color: white; /* Set text color to white for better contrast */
    background-color: black; /* Set a solid background color */
    background-position: center top; /* Center the background image */
    background-repeat: no-repeat; /* Prevent the background image from repeating */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

.logo {
    display: flex; /* Ensure the logo is displayed as a block-level element */
    margin: 20px auto; /* Center the logo horizontally and add space above */
    width: 55%; /* Set a reasonable size for the logo */
    height: auto; /* Maintain aspect ratio */
    position: relative; /* Ensure it doesn't overlap with other elements */
    z-index: 3; /* Ensure it appears above other elements */
}

.bio {
        display: block; /* Make the heading a block-level element */
        margin: 20px auto; /* Center the heading horizontally and add space above */
        text-align: center; /* Center the heading text */
        font-family: 'Arial', sans-serif; /* Set a specific font for the heading */
        font-size: 15px; /* Reduce the font size for a more condensed look */
        color: white; /* Set heading color to white */
        max-width: 75%; /* Limit the width of the heading for better centering */
        line-height: 1.2; /* Adjust line height for better readability */
    }
.shirt-design1-image {
    display: flex; /* Make the shirt design image a block-level element */
    margin: 20px auto; /* Center the image horizontally and add space above */
    width: 35%; /* Set width to 100% of the container */
    max-width: 75%; /* Ensure the image scales properly */
    height: auto; /* Maintain aspect ratio */
    z-index: 2; /* Ensure it appears above other elements if needed */
}

h1 {
    display: block; /* Make the heading a block-level element */
    margin: 20px auto; /* Center the heading horizontally and add space above */
    text-align: center; /* Center the heading text */
    font-family: 'Arial', sans-serif; /* Set a specific font for the heading */
    font-size: 28px; /* Reduce the font size for a more condensed look */
    color: gray; /* Set heading color to white */
    max-width: 80%; /* Limit the width of the heading for better centering */
    line-height: 1.2; /* Adjust line height for better readability */
}

.DeathReigns-Video {
    display: block; /* Ensure the video is a block-level element */
    margin: 20px auto; /* Center the video horizontally */
    width: 80%; /* Set the width to fit within the container */
    max-width: 800px; /* Set a maximum width to prevent it from being too wide */
    aspect-ratio: 16 / 9; /* Maintain the 16:9 aspect ratio */
    border: none; /* Remove any border around the iframe */
}

.shop-now {
    display: block; /* Make the button a block-level element */
    margin: 20px auto; /* Center the button horizontally and add space above */
    padding: 10px 20px; /* Add padding to the button */
    background-color: white; /* Background color for the button */
    color: black; /* Text color for the button */
    text-align: center; /* Center the text inside the button */
    text-decoration: none; /* Remove underline from links */
    border-radius: 5px; /* Rounded corners for the button */
    font-size: 18px; /* Font size for the button text */
    width: 200px; /* Set a fixed width for the button */
    z-index: 2; /* Ensure it appears above other elements if needed */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

.shop-now:hover {
    background-color: gray; /* Darker shade on hover */
} 

@media screen and (max-width: 768px) {
    .logo, .bio, h1, .DeathReigns-Video, .shop-now {
        width: 90%; /* Adjust width for smaller screens */
        max-width: 100%; /* Allow full width on small screens */
    }
    h1 {
        font-size: 24px; /* Adjust font size for smaller screens */
    }
    .shop-now {
        width: 150px; /* Adjust button width for smaller screens */
    }
    
    .shirt-design1-image {
        width: 50%;
    }
    
}