*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    color:white;
}
@font-face {
    font-family: main;
    src: url(Elemental\ End.ttf);
}
body{
    margin: 0;
    height: 100vh;
    background-color: #1c1c1c;
    background-image: 
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 50px 50px;
}
nav{
    width:85%;
    margin: 30px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
nav .name{
    font-family: main;
    text-transform: uppercase;
    color:rgb(255, 255, 255);
    font-size: clamp(15px,2.5vw,35px);
    letter-spacing: 2.5px;
    pointer-events: none;
    z-index: 5;
}
nav .name .brand{
    color: rgb(164, 255, 28);
}
nav .name .title{
    color:rgba(255, 255, 255, 0.328);
    font-size: 12px;
    display: block;
    margin-top: -2,5px;
}
nav .links{
    /* change back - display:flex */
    display: none;
}
nav .links a{
    font-family: main;
    margin: auto 12px;
    text-transform: uppercase;
}
nav .links a:hover{
    color:rgba(255, 255, 255, 0.588);
    transition: .75s;
}
nav .menu_button{
    height: 15px;
    width:25px;
    justify-content: space-between;
    display: none;
    flex-direction: column;
    cursor: pointer;
    z-index: 5;
}
nav .menu_button div{
    background-color: white;
    height:2px;
    width:100%;
    border-radius: 21px;
}
footer{
    width:100%;
    text-align: center;
}
@media(max-width:1250px){
    body.active {
        overflow: hidden;
    }
    nav .background {
        position: fixed;
        background-color: rgba(0, 0, 0, 0.837);
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        opacity: 0; 
        transition: opacity 0.55s ease-in-out;
        align-content: center;
    }
    nav .background.active {
        opacity: 1;
    }
    nav .links{
        display: none;
    }
    nav .links.active{
        display: flex;
        flex-direction: column;
        text-align: center;
        height: 75vh;
        margin: 50px auto auto auto;
    }
    nav .links a{
        display: inline-block;
        margin: auto;
        font-size: 50px;
        color:white;
    }
    nav .links a:hover{
        color:white;
    }
    nav .menu_button{
    /* change back - display:flex */
        display: none;
    }
    nav .menu_button.active{
        align-items:flex;/*remove or change*/
    }
    nav .menu_button.active div{
        background-color: white;
    }
    img{
        width:100%;
}
}
/* Message */

.text{
    text-align: center;
    align-content: center;
    height:75%;
    font-family: main;
    letter-spacing: 5px;
}