* {
    margin: 0;
    padding: 0;
    font-family: 'Roboto Mono', monospace;
    box-sizing: border-box;
}

.hero {
    width: 100%;
    min-height: 100vh;
    background-image: linear-gradient(45deg, rgba(83, 83, 85, 0.4), rgba(95, 95, 95, 0.4)), url(images/background-4.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
    position: relative;
}

nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bottom-left-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    padding-bottom: 1.25rem; /* 20px converted to rem */
    padding-left: 1.25rem; /* 20px converted to rem */
}

.logo {
    max-width: 7.5rem; /* 120px converted to rem */
    cursor: pointer;
}

.xbucket {
    margin-top: -1.25rem; /* -20px converted to rem */
    max-width: 31.25rem; /* 500px converted to rem */
    animation: slideInFromTop 1.5s ease-in-out forwards;
}

.header {
    margin-top: 16.25rem; /* 260px converted to rem */
    font-size: 3.75rem; /* 60px converted to rem */
    animation: fadeIn 2.5s ease-in-out 0s forwards;
}

.soon {
    color: #dfc926;
}

@keyframes slideInFromTop {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Media Queries for Responsive Design */
@media (max-width: 48em) {
    /* 768px / 16px = 48em */
    .header {
        font-size: 2.5rem; /* Adjusted font size */
        margin-top: 8rem; /* Adjusted margin-top */
    }

    .bottom-left-nav {
        padding-left: 2rem; /* Adjusted padding */
    }

    .xbucket {
        max-width: 80%; /* Adjusted max-width */
    }
}

@media (max-width: 36em) {
    /* 576px / 16px = 36em */
    .header {
        font-size: 2.25rem; /* Adjusted font size */
        margin-top: 6rem; /* Adjusted margin-top */
    }

    .bottom-left-nav {
        padding-left: 1rem; /* Adjusted padding */
    }

    .xbucket {
        max-width: 90%; /* Adjusted max-width */
    }
}