@font-face {
    font-family: 'fight';
    src: url('fonts/fightthis.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

header, nav, main, footer {
    margin: 0;
}

header {
    background-color: black;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#headertitle {
    color: white;
    font-size: 26pt;
    font-family: 'fight';
    transform: skewX(12deg);
    font-weight: 400;
    font-style: normal;
}

    #headertitle:hover {
        color: yellow;
        transition-duration: 1.8s;
    }
    
nav {
    background-color: black;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    nav a {
        padding: 0 30px;
        font-family: "Aldrich", sans-serif;
        color: white;
        text-decoration: none; 
        font-size: 16pt;
    }

        nav a:hover {
            color: #f2ae09;
            text-shadow: 2px 4px 10px #f2ae09b0;
        }
        
footer {
    background-color: black;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    footer h1 {
        color: white;
        font-size: 13px;
        font-family: "Aldrich", sans-serif;
    }
#clans {
    color: white;
    position: relative;
    left: 10%;
    margin-top: 75px;
    width: 77%;
}
    #clans h1 {
        font-family: "Aldrich", sans-serif;
        font-size: 22pt;
        position: relative;
        left: 75%;
    }
#stf, #jedaii, #dn, #cerberus, #symbiosis {
    background-color: rgb(32, 32, 32);
    display: flex;
}
    #stf:hover, #jedaii:hover, #dn:hover, #cerberus:hover, #symbiosis:hover {
        background-color: rgb(64, 64, 64);
        transition-duration: 0.5s;
    }
    #stf:hover h1, #jedaii:hover h1, #dn:hover h1, #cerberus:hover h1, #symbiosis:hover h1 {
        transition-duration: 0.5s;
        font-size: 25pt;
    }
.desc {
    position: relative;
    left: 15%;
    width: 70%;
    text-align: center;
    bottom: 140px;
    pointer-events: none;
    font-size: 16pt;
    font-family: 'Franklin Gothic Book';
}

body {
    overflow-x: hidden;
    background-color: black;
    margin-left: 0;
}
@media (max-width: 1081px){
    .desc{
        left: 24%;
        bottom: 160px;
    }
    #clans h1{
        bottom: 60px;
        left: 58%;
    }
}

@media (max-width: 768px) {
    .desc{
        left: 29%;
        bottom: 190px;
    }
    #clans h1{
        left: 40%;
        bottom: 60px;
    }

    nav a {
        font-size: 14px;
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    .desc {
        left: 48%;
        bottom: 185px;
        font-size: 11pt;
        width: 50%;
    }

    #clans h1 {
        left: 5%;
        bottom: 60px;
    }

    nav a {
        font-size: 12px;
        padding: 0 10px;
    }
}