/* Global Styles */
body {
    margin: 0;
    padding-bottom: 0;
    padding-top: 2.5rem;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

html {
    font-family: Verdana ,sans-serif;
    box-sizing: border-box;
}

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

a:hover {
    background-color: rgb(63, 63, 63);
}

/* Navbar Styles */
navbar {
    background-color: rgb(32, 32, 32);
    color: #ffffff;
    left: 0.5rem;
    right: 0.5rem;
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    height: 4rem;
    border-radius: 2rem;
    align-content: top;
    position: fixed;
    top: 0.5rem;
    z-index: 100;
}

navbar img {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    display: block;
    border: none;
}

.logo-button {
    display: flex;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    align-items: center;
}

.logo-button:hover {
    background-color: transparent;
}

navbar nav ul {
    display: flex;
    list-style: none;
    gap: 0rem;
    margin: 0;
    padding: 0;
}

navbar nav a {
    color: #ffffff;
    font-size: 1.5rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 4rem;
    padding: 0.5rem;
}

navbar nav a:hover {
    background-color: rgb(63, 63, 63);
}

/* Footer Styles */
footer {
    background-color: rgb(32, 32, 32);
    color: #ffffff;
    padding: 1rem;
    left: 0;
    right: 0;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

footer h1 {
    margin: 0;
    font-size: 1rem;
}

footer nav ul {
    display: flex;
    list-style: none;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

footer nav a {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.8rem;
}

footer p {
    margin: 0;
    font-size: 0.6rem;
}

/* Content Styles */
content {
    color: black;
    display: block;
    padding: 2rem;
    flex: 1;
}

content h1 {
    font-size: 3rem;
    font-weight: 750;
    width: fit-content;
    margin-bottom: 0.5rem;
    text-decoration: none;
}

content h2 {
    font-size: 2rem;
    font-weight: 750;
    width: fit-content;
    margin-bottom: 0.5rem;
    text-decoration: none;
}

content h3 {
    font-size: 1.5rem;
    font-weight: 750;
    width: fit-content;
    margin-bottom: 0.5rem;
    text-decoration: none;
}

content a{
    text-decoration: none;
}

content a:hover {
    background-color: transparent;
} 

content b {
    font-weight: 750;
    font-size: 1.5rem;
}

content ip {
    font-size: 1.25rem;
    font-weight: 750;
    background-color: rgb(48, 92, 130);
    color: white;
    display: block;
    width: fit-content;
    padding: 1rem;
    border-radius: 0.75rem;
    margin-right: 0;
}

/* Container Styles */
.ip-container {
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.roundbutton {
    margin-bottom: 1rem;
}

/* Modlist Styles */
content modlist {
    font-size: 1rem;
    font-weight: 500;
    background-color: #74C8FC;
    color: black;
    width: fit-content;
    padding: 0;
    border-radius: 0.75rem;
    margin-bottom: 0.5rem;
    display: block;
}

content modlist a {
    color: black;
    text-decoration: none;
    display: block;
    padding: 1rem;
}

content modlist:hover {
    background-color: #74F3FC;
}

content modlist a:hover {
    color: black;
    text-decoration: none;
    background-color: transparent;
}

.Launch {
    background-color: rgb(48, 92, 130);
    color: white;
    border-radius: 0.75rem;
    margin: 1rem 0;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;                /* Allow wrapping on small screens */
}

/* Remove default margins from the first h3 */
.Launch > h3:first-child {
    margin: 0;
    line-height: 1.5;
    font-size: 1.25rem;
    white-space: nowrap;            /* Prevent heading from breaking */
}

.Launch .Countdown {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    flex-wrap: wrap;                /* Allow countdown items to wrap if needed */
}

.Launch .Countdown h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 750;
    line-height: 1.5;
    white-space: nowrap;            /* Keep each "X Days," on one line */
}

/* 📱 Mobile adjustments */
@media screen and (max-width: 600px) {
    .Launch {
        flex-direction: column;      /* Stack heading above countdown */
        align-items: flex-start;     /* Align to left (or center if preferred) */
        gap: 0.5rem;
        padding: 0.75rem;            /* Slightly smaller padding */
    }

    .Launch > h3:first-child {
        font-size: 1rem;             /* Reduce heading size */
        margin-bottom: 0.25rem;       /* Add tiny space below */
    }

    .Launch .Countdown {
        gap: 0.5rem;                 /* Slightly more gap for wrapped items */
        justify-content: flex-start;  /* Keep items left-aligned */
        width: 100%;                  /* Take full width for better wrapping */
    }

    .Launch .Countdown h3 {
        font-size: 1rem;              /* Smaller numbers */
        background: rgba(255,255,255,0.1); /* Optional: add subtle background for separation */
        padding: 0.25rem 0.5rem;       /* Optional: make each unit look like a pill */
        border-radius: 1rem;
    }
}

/* 📱 Even smaller screens (optional) */
@media screen and (max-width: 400px) {
    .Launch .Countdown {
        gap: 0.25rem;
    }
    .Launch .Countdown h3 {
        font-size: 0.9rem;
        padding: 0.2rem 0.4rem;
    }
}