.logo{
    position: fixed;
    left:0px;
    align-items: center;
    cursor: pointer;
}
.flexbox-item-6{
    align-items: center;
    justify-content: center;
    display: flex;
    padding:0px;
}
.flexbox-item-6:hover{
    .accountimg{
        background-image: url(GeneralAssets/AccountSymbolhover.png);
    }
}
.button-image{
    margin:0;
    height: auto;
}
.button-text{
    transition: 0.4s;
}
.accountimg{
    width: 75%;
    height: 75%;
    background-size: cover;
    background-image: url(GeneralAssets/AccountSymbol.png);
}
.accountimg:hover{
    background-image: url(GeneralAssets/AccountSymbolhover.png);
}
@media only screen and (min-width: 1450px) {
    .button-text{
        font-size: x-large;
        font-weight: bold;
        background-image: linear-gradient(to bottom right,#448683,#5aa29f,#2f6665);
        color: transparent;
        background-clip: text;
        font-family: "Times New Roman", Times, serif;
    }
    .flexbox-item {
        display: flex;
        box-shadow: 5px 5px 8px #315b69;
        width: 110px;
        margin: 10px;
        min-height: 60px;
        line-height: 60px;
        justify-content: center;
        text-align: center;
        border: 5px solid;
        background-image: linear-gradient(to bottom right, #9fc5d1, #f3fcff);
        border-image: linear-gradient(to bottom right, #9fc5d1, #f3fcff);
        transition: 0.4s;
    }

    .flexbox-item:hover {
        transform: translateY(-15px);
        box-shadow: 5px 25px 23px #315b69;
        background-image: linear-gradient(to bottom right, #92c4c2, #afe0de);
        border-image: linear-gradient(to bottom right, #92c4c2, #afe0de);
        cursor: pointer;
        .button-text{
            background-image: linear-gradient(to bottom right,white,#daf3f2);
        }
    }
    .logoimg{
        transform:translateY(0);
        opacity: 100%;
        aspect-ratio : 1 / 1;
        width:16.5%;
        transition: 0.5s;
    }
    .logoimg:hover{
        transform:translateY(0);
        opacity: 100%;
        aspect-ratio : 1 / 1;
        width:17.5%;
        transition: 0.5s;

    }
    .logo-text {
        transform:translateY(0);
        opacity: 100;
        font-size: 100px;
        font-weight: bold;
        background-image: linear-gradient(to bottom right, #a4d5d3, #c6f2f0, #82bdbb);
        color: transparent;
        background-clip: text;
        cursor: pointer;
        transition: 0.5s;
    }
    .logo-text:hover {
        transform:translateY(0);
        opacity: 100;
        font-size: 105px;
    }
    .hotbar {
        min-width: 1000px;
        min-height:140px;
        user-select: none;
        position: fixed;
        justify-content: space-between;
        align-items: center;
        padding: 1px;
        margin:0px;
        width: 99.5%;
        top: 0;
        height: 150px;
        border: 3px solid;
        border-image: linear-gradient(to bottom right, #aacdd8, #f3fcff);
        background-image: linear-gradient(to bottom right,#8cefff,#23a4ab,#1d8b9a,#11769e);
        transition: 0.5s;
    }
    .shadow{
        position: fixed;
        z-index:50;
        width: 100%;
        top: 153px;
        background-image: linear-gradient(to bottom,#082e31, transparent);
        transition: 0.5s;
    }

}


@media only screen and (max-width: 950px){
    .button-text{
        font-size: x-large;
        font-weight: bold;
        background-image: linear-gradient(to bottom right,#448683,#5aa29f,#2f6665);
        color: transparent;
        background-clip: text;
        font-family: "Times New Roman", Times, serif;
    }
    .flexbox-item {
        display: flex;
        box-shadow: 5px 5px 8px #315b69;
        width: 110px;
        margin: 10px;
        min-height: 60px;
        line-height: 60px;
        justify-content: center;
        text-align: center;
        border: 5px solid;
        background-image: linear-gradient(to bottom right, #9fc5d1, #f3fcff);
        border-image: linear-gradient(to bottom right, #9fc5d1, #f3fcff);
        transition: 0.4s;
    }

    .flexbox-item:hover {
        transform: translateY(-15px);
        box-shadow: 5px 25px 23px #315b69;
        background-image: linear-gradient(to bottom right, #92c4c2, #afe0de);
        border-image: linear-gradient(to bottom right, #92c4c2, #afe0de);
        cursor: pointer;
        .button-text{
            background-image: linear-gradient(to bottom right,white,#daf3f2);
        }
    }
    .logoimg{
        transform:translateY(-200px);
        opacity: 0;
        aspect-ratio : 1 / 1;
        width:16.5%;
        transition: 0.5s;
    }
    .logoimg:hover{
        transform:translateY(-200px);
        opacity: 0;
        aspect-ratio : 1 / 1;
        width:17.5%;
        transition: 0.5s;

    }
    .logo-text {
        transform:translateY(-200px);
        opacity: 0;
        font-size: 100px;
        font-weight: bold;
        background-image: linear-gradient(to bottom right, #a4d5d3, #c6f2f0, #82bdbb);
        color: transparent;
        background-clip: text;
        cursor: pointer;
        transition: 0.5s;
    }
    .logo-text:hover {
        transform:translateY(-200px);
        opacity: 0;
        font-size: 105px;
    }
    .hotbar {
        min-height:140px;
        user-select: none;
        position: fixed;
        justify-content: space-between;
        align-items: center;
        padding: 1px;
        margin:0px;
        width: 99.5%;
        top: 0;
        height: 140px;
        border: 3px solid;
        border-image: linear-gradient(to bottom right, #aacdd8, #f3fcff);
        background-image: linear-gradient(to bottom right,#8cefff,#23a4ab,#1d8b9a,#11769e);
        transition: 0.5s;
    }
    .shadow{
        position: fixed;
        z-index:50;
        width: 100%;
        top: 143px;
        background-image: linear-gradient(to bottom,#082e31, transparent);
        transition: 0.5s;
    }

}
@media only screen and (max-width: 1450px) and (min-width: 950px) {
    .button-text{
        font-size: x-large;
        font-weight: bold;
        background-image: linear-gradient(to bottom right,#448683,#5aa29f,#2f6665);
        color: transparent;
        background-clip: text;
        font-family: "Times New Roman", Times, serif;
    }
    .flexbox-item {
        display: flex;
        box-shadow: 5px 5px 8px #315b69;
        width: 110px;
        margin: 10px;
        min-height: 60px;
        line-height: 60px;
        justify-content: center;
        text-align: center;
        border: 5px solid;
        background-image: linear-gradient(to bottom right, #9fc5d1, #f3fcff);
        border-image: linear-gradient(to bottom right, #9fc5d1, #f3fcff);
        transition: 0.4s;
    }

    .flexbox-item:hover {
        transform: translateY(-15px);
        box-shadow: 5px 25px 23px #315b69;
        background-image: linear-gradient(to bottom right, #92c4c2, #afe0de);
        border-image: linear-gradient(to bottom right, #92c4c2, #afe0de);
        cursor: pointer;
        .button-text{
            background-image: linear-gradient(to bottom right,white,#daf3f2);
        }
    }

    .logoimg{
        opacity: 100%;
        aspect-ratio : 1 / 1;
        width:16.5%;
        transition: 0.5s;
    }
    .logoimg:hover{
        opacity: 100%;
        aspect-ratio : 1 / 1;
        width:17.5%;
        transition: 0.5s;

    }
    .logo-text {
        transform:translateY(-200px);
        opacity: 0;
        font-size: 100px;
        font-weight: bold;
        background-image: linear-gradient(to bottom right, #a4d5d3, #c6f2f0, #82bdbb);
        color: transparent;
        background-clip: text;
        cursor: pointer;
        transition: 0.5s;
    }
    .logo-text:hover {
        transform:translateY(-200px) scale(130%);
        opacity: 0;
    }
    .hotbar {
        min-width: 1000px;
        min-height:140px;
        user-select: none;
        position: fixed;
        justify-content: space-between;
        align-items: center;
        padding: 1px;
        margin:0px;
        width: 99.5%;
        top: 0;
        height: 140px;
        border: 3px solid;
        border-image: linear-gradient(to bottom right, #aacdd8, #f3fcff);
        background-image: linear-gradient(to bottom right,#8cefff,#23a4ab,#1d8b9a,#11769e);
        transition: 0.5s;
    }
    .shadow{
        position: fixed;
        z-index:50;
        width: 100%;
        top: 146px;
        background-image: linear-gradient(to bottom,#082e31, transparent);
        transition: 0.5s;
    }

}
.nav-container {
    max-width: 1000px;
    position: fixed;
    right:0px;
    transform:translateY(-50%);
    align-items: center;
    cursor: pointer;
    flex-wrap: wrap;
    justify-content: center;
}
@media only screen and (max-width: 800px) and (min-width: 418px) {
    .flexbox-item {
        display: flex;
        box-shadow: 5px 5px 8px #315b69;
        width: 110px;
        margin: 10px;
        min-height: 60px;
        line-height: 60px;
        justify-content: center;
        text-align: center;
        border: 5px solid;
        background-image: linear-gradient(to bottom right, #9fc5d1, #f3fcff);
        border-image: linear-gradient(to bottom right, #9fc5d1, #f3fcff);
        transition: 0.4s;
    }

    .flexbox-item:hover {
        transform: translateY(-15px);
        box-shadow: 5px 25px 23px #315b69;
        background-image: linear-gradient(to bottom right, #92c4c2, #afe0de);
        border-image: linear-gradient(to bottom right, #92c4c2, #afe0de);
        cursor: pointer;
        .button-text{
            background-image: linear-gradient(to bottom right,white,#daf3f2);
        }
    }
    .hotbar {
        min-height:180px;
        user-select: none;
        position: fixed;
        justify-content: space-between;
        align-items: center;
        padding: 1px;
        margin:0px;
        width: 99.5%;
        top: 0;
        height: 180px;
        border: 3px solid;
        border-image: linear-gradient(to bottom right, #aacdd8, #f3fcff);
        background-image: linear-gradient(to bottom right,#8cefff,#23a4ab,#1d8b9a,#11769e);
        transition: 0.5s;
    }
    .shadow{
        position: fixed;
        z-index:50;
        width: 100%;
        top: 183px;
        background-image: linear-gradient(to bottom,#082e31, transparent);
        transition: 0.5s;
    }
}

@media only screen and (max-width: 418px) {
    .hotbar {
        min-height:100px;
        user-select: none;
        position: fixed;
        justify-content: space-between;
        align-items: center;
        padding: 1px;
        margin:0px;
        width: 99.5%;
        top: 0;
        height: 100px;
        border: 3px solid;
        border-image: linear-gradient(to bottom right, #aacdd8, #f3fcff);
        background-image: linear-gradient(to bottom right,#8cefff,#23a4ab,#1d8b9a,#11769e);
        transition: 0.5s;
    }
    .shadow{
        position: fixed;
        z-index:50;
        width: 100%;
        top: 103px;
        background-image: linear-gradient(to bottom,#082e31, transparent);
        transition: 0.5s;
    }
    .flexbox-item {
        top:5%;
        display: flex;
        box-shadow: 5px 5px 8px #315b69;
        width: 40px;
        margin: 7px;
        height: 40px;
        max-height: 40px;
        line-height: 0px;
        justify-content: space-evenly;
        align-items: center;
        align-content: center;
        text-align: center;
        border: 3px solid;
        background-image: linear-gradient(to bottom right, #9fc5d1, #f3fcff);
        border-image: linear-gradient(to bottom right, #9fc5d1, #f3fcff);
        transition: 0.4s;
        .button-image {
            max-width: 40px;
            max-height: 40px;
        }
        .button-text{
            opacity: 0;
            position: absolute;
            top:-100px;
            background-image: linear-gradient(to bottom right,#1a6164,#2f6665);
        }
    }
    .flexbox-item:hover {
        display: flex;
        transform: translateY(-15px);
        box-shadow: 5px 25px 23px #315b69;
        background-image: linear-gradient(to bottom right, #92c4c2, #afe0de);
        border-image: linear-gradient(to bottom right, #92c4c2, #afe0de);
        cursor: pointer;
        .button-image {
            max-width: 40px;
            max-height: 40px;
        }
        .button-text{
            font-size:1px;
            background-image: linear-gradient(to bottom right,transparent,transparent);
        }
    }
    .flexbox-item-6{
        max-width: 40px;
        max-height: 40px;
        align-items: center;
        justify-content: center;
        display: flex;
        padding:0px;
    }
    .flexbox-item-6:hover{
        max-width:40px;
        max-height: 40px;
        .accountimg{
            background-image: url(GeneralAssets/AccountSymbolhover.png);
        }
    }
    .nav-container {
        max-width: 1000px;
        max-height: 60px;
        position:  fixed;
        right:0px;
        transform:translateY(-50%);
        align-items: center;
        cursor: pointer;
        flex-wrap: wrap;
        justify-content: center;
    }
}
@media only screen and (max-width: 355.99px) {
    .hotbar {
        min-height: 200px;
    }
    .flexbox-item {
        top: 1%;
    }
    .nav-container {
        max-width: 1000px;
        max-height: 160px;
        position: fixed;
        right: 0px;
        transform: translateY(-50%);
    }
}
@media only screen and (max-width: 177.99px) {
    .hotbar {
        min-height: 250px;
    }
    .flexbox-item {
        top: 0%;
    }
    .nav-container {
        max-width: 1000px;
        max-height: 200px;
        position: fixed;
        right: 0px;
        transform: translateY(-60%);
    }
}