header {
    max-width: 1440px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(1, 1fr);
    width: 100%;
    height: 86px;
    margin: 0 auto;
    grid-column: 1/-1;
    grid-row: 1/2;
    order: 1;
}

#header-txt{
    display: none;
}

nav {
    display: grid;
    grid-column: 1/-1;
    grid-row: 1/-1;
    order: 1;
    margin: 0 auto;
    grid-column: 1/-1;
    width: 100%;
    background-color: #00000085;
}

#nav {
    grid-column: 2/7;
    justify-content: space-between;
}

#some {
    grid-column: 10/12;
}

nav ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
}

ul a {
    font-size: 20px;
    color: rgb(255, 255, 255);
    text-decoration: none;
}

nav a:hover {
    font-weight: bold;
}

#on {
    font-weight: bold;
}

.fa-solid {
    color: white;
}

.fa-bars{
    display: none;
}

@media screen and (max-width:599px) {

    header {
        grid-row: 1/-1;
        height: 100vh;
        display: unset;

    }

    #nav ul {
        flex-direction: column;
    }

    #some ul {
        display: flex;
        justify-content: space-evenly;
        list-style: none;
    }

    #nav {
        grid-column: 2/-2;
        grid-row: 5/-1;
        justify-content: center;
        justify-self: center;
        display: flex;
    }

    #some {
        grid-column: 5/9;
        grid-row: 1/4;
    }

    nav {
        grid-column: 3/-3;
        grid-row: 1/-1;
        align-self: auto;
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-around;
        height: 100%;
    }

    #header-txt h1 {
        font-size: 5e;
    }

    #header-txt {
        display: block;
        grid-column: 1/-1;
        grid-row: 1/2;
    }

    .fa-solid {
        display: block;
        position: absolute;
        top: 5vw;
        right: 5vw;
        font-size: 3em;
    }
}