.stats,h1{
    margin:20px 0
}
.overlay,.stats div{
    text-align:center
}
.main-button,.navigation a{
    color:#fff;
    text-decoration:none;
    font-weight:700
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"greenway"
}
@font-face{
    font-family:"greenway";
    src:url('font/argentum-sans.extralight.ttf')
}
body{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background:url('images/Untitled-2.webp') center center/cover no-repeat fixed #0e0b0b;
    height:100vh;
    color:#fff
}
.page-transition{
    opacity:0;
    transition:opacity .5s ease-in-out
}
.page-transition-in{
    opacity:1;
    transition:opacity .5s ease-in-out
}
.navigation{
    position:sticky;
    top:0;
    left:0;
    width:100%;
    z-index:100;
    padding:10px 0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px
}
.navigation a{
    font-size:1rem;
    padding:12px 24px;
    border-radius:50px;
    background-color:#1a4314;
    transition:.3s
}
.main-button:hover,.navigation a:hover{
    background-color:#0a1a08;
    transform:scale(1.1);
    box-shadow:0 6px 10px rgba(0,0,0,.3)
}
.discord-button{
    display:flex;
    align-items:center;
    gap:10px
}
.discord-icon{
    width:20px;
    height:auto;
    display:inline-block
}
.hero,.stats{
    display:flex
}
.hero{
    position:relative;
    height:80vh;
    align-items:center;
    justify-content:center
}
.overlay{
    background:rgba(0,0,0,.6);
    padding:20px;
    border-radius:20px;
    max-width:800px;
    width:90%
}
h1{
    font-size:1.8rem
}
.stats{
    justify-content:space-around
}
.stats h2{
    font-size:2rem;
    margin:0
}
.stats p{
    margin:0;
    font-size:1rem
}
.main-button{
    display:inline-block;
    border: none;
    outline: none;
    cursor: pointer;
    background-color:#1a4314;
    padding:12px 24px;
    font-size:1.2rem;
    border-radius:50px;
    box-shadow:0 4px 6px rgba(0,0,0,.2);
    transition:transform .2s,box-shadow .2s,background-color .2s
}
.loader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,.8);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:1000
}
.loader::after{
    content:'';
    border:8px solid #fff;
    border-top:8px solid transparent;
    border-radius:50%;
    width:50px;
    height:50px;
    animation:1s linear infinite spin
}
@keyframes spin{
    0%{
        transform:rotate(0)
    }
    100%{
        transform:rotate(360deg)
    }
}
.content{
    opacity:0;
    visibility:hidden;
    transition:opacity .5s ease-in-out,visibility .5s ease-in-out
}
.content.show{
    opacity:1;
    visibility:visible
}