body {
    margin: 0px;
    padding: 0%;
}

header {
    background: whitesmoke;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: overlay;
    position: relative;
    display: flex;
}

.logo-nav {
    display: block;
    position: relative;
    margin: auto;
    margin-left: 15px;
    width: fit-content;
    height: fit-content;
}

.logo-nav img {
    width: 60px;
    height: auto;
    border: none;
}

.headName-nav {
    position: relative;
    margin: auto;
    margin-left: -100px;
    text-align: center;
    font-size: 18px;
    padding: 0%;
}

.iconImg-nav {
    position: relative;
    width: fit-content;
    height: auto;
    margin-left: 55%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.iconImg-nav img {
    width: 300px;
    height: 110px;
}

.contain-nav {
    background-color: #002b63;
    z-index: 1;
    color: white;
    border-radius: 30px;
    border: none;
    position: absolute;
    display: flex;
    gap: 20px;
    margin-top: 90px;
    width: fit-content;
    height: fit-content;
    left: 500px;
    padding: 5px;
    /* box-shadow: 4px 4px 8px gray; */
}

.home-nav,
.account-nav,
.login-nav,
.create-nav,
.rules-nav,
.about-nav {
    background: #002b63;
    display: flex;
    justify-content: center;
    column-gap: 5px;
    text-align: center;
    cursor: pointer;
    align-items: center;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 13px;
    margin: 0px;
    width: max-content;
    height: fit-content;
    border-radius: 20px;
    transition: all .15s;
}

.create-nav,
.login-nav {
    width: 250px;
    box-shadow: 2px 2px 8px gray;
}

.account-nav {
    overflow: hidden;
}

.home-nav img,
.rules-nav img,
.account-nav img,
.login-nav img,
.create-nav img,
.about-nav img {
    width: 25px;
    height: auto;
}

.ac-container-nav {
    display: none;
    margin-top: 36%;
    position: absolute;
    z-index: 1;
}

.home-nav:hover,
.account-nav:hover,
.login-nav:hover,
.create-nav:hover,
.rules-nav:hover,
.about-nav:hover {
    /* background-color: #ea4343; */
    background: #004eb3a8;
}

.account-nav:hover .ac-container-nav {
    display: block;
}