body {
    background-color: #29ADCE; /* SunSMP Sky Blue */
    margin: 0;
    font-family: 'Titillium Web', sans-serif;
    color: #20150F;
}

#wrap {
    width: 100%;
    margin: 0;
    margin-left: auto;
    margin-right: auto;
}

a {
    text-decoration: none;
}

/* Animations */
@-webkit-keyframes logo {
    0% { -webkit-transform: scale(1); transform: scale(1); }
    50% { -webkit-transform: scale(1.05); transform: scale(1.05); }
    100% { -webkit-transform: scale(1); transform: scale(1); }
}

@keyframes logo {
    0% { -webkit-transform: scale(1); transform: scale(1); }
    50% { -webkit-transform: scale(1.05); transform: scale(1.05); }
    100% { -webkit-transform: scale(1); transform: scale(1); }
}

/* Header Section */
#headerwrapper {
    position: relative;
    width: 100%;
    height: 570px;
    max-height: 550px;
    overflow: hidden;
}

header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(41, 173, 206, 0), rgba(41, 173, 206, 1)), url(../images/background.png);
    background-size: cover;
    background-position: no-repeat;
    z-index: -1;
}

#minecraftserver a:nth-child(2) {
    display: inline-block;
    text-decoration: none;
    color: #FFFFFF;
    font-weight: 800;
}

#server_status {
    color: #FFD633; /* SunSMP Yellow */
}

/* Discord Section */
#discord a:nth-child(2) {
    display: inline-block;
    text-decoration: none;
    color: #FFFFFF;
    font-weight: 800;
    margin: 13px 0 0 7px;
}

#discord_status {
    color: #4df14d; /* Bright Green */
}


#menu {
    width: 100%;
    padding: 0 20px; /* Matches the horizontal padding of feature containers */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    margin-bottom: 70px; /* Adds the exact missing spacing to match feature gaps */
}

#menu ul {
    display: grid;
    width: 100%;
    max-width: 850px; /* Locks to the exact width of the feature containers */
    padding: 0;
    margin: 0;
    list-style: none;
}

#menu li {
    margin: 0;
    width: 100%;
}

/* Neo-Brutalist Nav Buttons */
#menu a {
    text-decoration: none;
    font-size: 18px;
    font-weight: 800;
    color: #20150F;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: linear-gradient(135deg, #FF5A1F, #F05252);
    border: 4px solid #20150F;
    box-shadow: 6px 6px 0px #20150F;
    transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.2s ease;
    width: 100%;
    height: 65px;
    box-sizing: border-box;
}

#menu a i {
    margin-right: 8px;
}

#menu a:hover {
    filter: brightness(1.1);
}

#menu a:active {
    transform: translate(4px, 4px);
    box-shadow: 2px 2px 0px #20150F;
}

/* Play button specific styling to stand out */
/* Play button specific styling to stand out */
#menu a#playBtnContainer {
    background: #FFD633; /* Forces the main container to be green so it never flashes orange */
    cursor: pointer;
}

#playBtnContainer #playBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 11px;
}

/* Menu Grid Breakpoints */

/* 1. Desktop (Wide Screens): 3 Buttons per Row (3x2) */
@media (min-width: 851px) {
    #menu ul {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-top: 155px; /* Keeps the spacing flush with the header */
    }
}

/* 2. Tablets (Medium Screens): 2 Buttons per Row (2x3) */
@media (max-width: 850px) and (min-width: 551px) {
    #menu ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* 3. Mobile (Small Screens): 1 Button per Row (1x6) */
@media (max-width: 550px) {
    #menu ul {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}


.main_feature {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    padding: 0 20px;
}

.featurecontainer {
    background-color: #FFFFFF;
    border: 4px solid #20150F;
    box-shadow: 8px 8px 0px #20150F;
    border-radius: 20px;
    margin-bottom: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 850px;
}

.feature_img_wrapper {
    border-bottom: 4px solid #20150F;
    background-color: #20150F;
}

.main_feature_desc {
    color: #20150F;
    padding: 25px;
    text-align: left;
}

.title {
    font-size: 35px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 10px 0;
    color: #20150F;
}

.desc {
    color: #20150F;
    font-size: 18px;
    font-weight: 400;
    margin: 0;
    line-height: 1.6;
}

#image1, #image2, #image3 {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 190px;
}

#image1 { background-image: url('../images/m_dungeon.png'); }
#image2 { background-image: url('../images/m_plugin.png'); }
#image3 { background-image: url('../images/m_furniture.png'); }


@media(max-width: 850px) {
    #mainpic img {
        width: 350px;
        height: auto;
        margin-top: 30px;
        -webkit-animation: logo 5s infinite ease-in-out;
        animation: logo 5s infinite ease-in-out;
    }

    #main {
        margin: -150px 0 0 0;
        position: relative;
    }

    #minecraftserver, #discord {
        display: none;
    }

    #headerlogo {
        display: flex;
        justify-content: center;
    }

    .main_feature_desc {
        text-align: center;
    }
}

/* Desktop Base Structural Queries */
@media(min-width: 851px) {
    #headerwrapper {
        display: flex;
        justify-content: space-between;
    }

    #minecraftserver a:nth-child(2) {
        margin: 15px 0 0 7px;
    }

    nav#menu {
        position: relative;
        z-index: 1; 
        margin-top: -210px;
    }
    
    #mainpic {
        margin-top: 40px;
    }
    
    #mainpic img {
        width: 350px;
        height: auto;
        margin: auto;
        z-index: 0;
        margin-top: 70px;
        position: relative;
        -webkit-animation: logo 5s infinite ease-in-out;
        animation: logo 5s infinite ease-in-out;
    }
    
    .logo {
        width: 57px;
        height: auto;
        margin: 10px 0 0 13px;
        float: left;
        border-radius: 30px;
    }
    
    #discord {
        margin-right: 13px;
        height: 100px;
        width: 210px;
    }
    
    #minecraftserver {
        height: 100px;
        width: 220px;
        margin-top: -3px;
    }
    
    #server_status, #discord_status {
        margin-top: -3px;
    }
    
    /* Layout shift for Desktop features */
    .featurecontainer {
        flex-direction: row;
        height: 350px;
    }

    .feature_img_wrapper {
        border-bottom: none;
        border-right: 4px solid #20150F;
        width: 450px;
        flex-shrink: 0;
    }

    #image1, #image2, #image3 {
        height: 100%;
    }
}