.header-navbar-conteiner{
    position: fixed;
    width: 100%;
    z-index: 99;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.header-navbar-conteiner .header{
    background-color: #222831;
    display: flex;
    height: 60px;
    width: 100%;
    justify-content: flex-start;
}

/* atur image dari logo*/
.header-navbar-conteiner .header .besar{
    width: 180px;
    margin-left: 40px;
}

/* image ketika window dikecilkan */
.header-navbar-conteiner .header .kecil{
    display: none;
}

.header-navbar-conteiner .navbar{
    width: 100%;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #31363f;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.header-navbar-conteiner .navbar-img    {
    display: none;
}

.header-navbar-conteiner .navbar-img .login2{
    display: none;
}

.header-navbar-conteiner .navbar ul li{
    list-style: none;
    display: inline-block;
    margin: 0 20px;
    margin-left: 40px;
}

.header-navbar-conteiner .navbar .login{
    text-decoration: none;
    background: linear-gradient(to top, #f6452e, #ff9636, #ffd859, #ffd859, #ffd859);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    margin-right: 40px;
}

.header-navbar-conteiner .navbar .login:hover{
    text-shadow:0px 0px 7px #fdec6e9b;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.header-navbar-conteiner .navbar ul li .navAll{
    text-decoration: none;
    background: linear-gradient(to top, #f6452e, #ff9636, #ffd859, #ffd859, #ffd859);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    text-transform: uppercase;
}

.header-navbar-conteiner .navbar ul li .navAll:hover{
    text-shadow:0px 0px 7px #fdec6e9b;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

@media (max-width: 820px){
    .header-navbar-conteiner .header{
        height: 50px;
    }
    
    .header-navbar-conteiner .navbar,
    .header-navbar-conteiner .navbar ul li{
        display: none;
    }

    .header-navbar-conteiner .navbar-img{
        width: 100%;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #31363f;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .header-navbar-conteiner .navbar-img img:hover{
        transform: translateY(-5px);
        transition: all 0.2s ease;
    }

    .header-navbar-conteiner .navbar-img a{
        width: 20px;
        height: 20px;
        margin-right: 35px;
    } 

    .header-navbar-conteiner .navbar-img img{
        width: 20px;
        height: 20px;
        display: flex;
        flex-wrap: wrap;
    }   

    .nav-img {
        display: flex;
        flex-direction: row;
        margin-left: 20px;
    }

    .nav-img .homeImg{
        margin-right: 35px;
    }

    .nav-img .homeImg:hover{
        filter: drop-shadow(0 0 0.65rem #fdec6e9b);
    }

    .nav-img .characterIcon{
        margin-right: 35px;
    }

    .nav-img .characterIcon:hover{
        filter: drop-shadow(0 0 0.65rem #fdec6e9b);
    }

    .nav-img .dragonClassIcon{
        margin-right: 35px;
    }

    .nav-img .dragonClassIcon:hover{
        filter: drop-shadow(0 0 0.65rem #fdec6e9b);
    }

    .nav-img .isleOfBerkIcon{
        margin-right: 35px;
    }

    .nav-img .isleOfBerkIcon:hover{
        filter: drop-shadow(0 0 0.65rem #fdec6e9b);
    }

    .header-navbar-conteiner .navbar-img a{
        display: inline-block;
    }

    .header-navbar-conteiner .navbar-img .log{
        margin-right: 30px;
        text-decoration: none;
        background: linear-gradient(to top, #f6452e, #ff9636, #ffd859, #ffd859, #ffd859);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;;
    }

    .header-navbar-conteiner .navbar-img .log:hover{
        text-shadow:0px 0px 7px #fdec6e9b;
        -moz-transition: all 0.2s ease-in;
        -o-transition: all 0.2s ease-in;
        -webkit-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
    }

    .header-navbar-conteiner .navbar-img .log .login2{
        display: contents;
        text-decoration: none;
        text-transform: uppercase;
    }

    .header-navbar-conteiner .navbar-img .log .login2:focus{
        color: white;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
    }
}

@media (max-width: 290px)
{
    .header-navbar-conteiner .navbar-img a{
        margin-right: 25px;
    }  
}