@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');
@media(max-width:992px){
    .desktop{
        display:none;
    }
    .mobile{
        display:block;
    }
}
@media(min-width:992px){
    .desktop{
        display:block;
    }
    .mobile{
        display:none;
    }
}

.brandName span{
    font-size: 28pt;
    font-family: "DM Serif Display",serif;
    font-weight: 600;
}
.brandName{
    display:flex;
    align-items: center;
    justify-content: first baseline;
    gap:10px;
    cursor: pointer;
}
.menu{
    padding:25px;
    display:flex;
    flex-direction: column;
    gap:20px;
    border-right: 1px solid var(--bs-border-color);
    width:100%;
    height:100dvh;
    max-width:300px;
    position:sticky;
    top:0;
    left:0;
}
.menu .menuLinks{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.menu .menuLinks a, .additionalInfo > .dropdown > a {
    text-decoration: none;
    color:var(--first-color);
    font-size: large;
    padding: 5px;
    border-radius: 7px;
}
.menu .menuLinks a:hover{
    background-color: #475058;
}
.menu .menuLinks a > i, .additionalInfo > .dropdown > a > i {
    padding-right: 10px;
}

.additionalInfo {
    display:flex;
    flex-direction: column-reverse;
    gap:20px;
    width:100%;
    height:100%;
    max-width:300px;
    font-size: large;
}
.additionalInfo > *{
    border-radius: 7px;
    padding: 5px;
}
.additionalInfo > *:hover{
    cursor: pointer;
    background-color: #3a4249;
}
.additionalInfo > .dropdown > a {
    border: none;
    background-color: transparent;
    width: 100%;
    text-align: left;
}

.navbarMobile{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content: space-between;
    align-items: center;
    z-index:1000;
    background-color:black;
    padding-left:10px;
    padding-right:10px;
    padding-top:5px;
    padding-bottom:5px;
    color:var(--primary-color-text-variant);
}
.textLogo{
    font-family: "DM Serif Display",serif;
    font-weight: 600;
    font-size:28pt;
}
.btnToggle{
    background:none;
    border:none;
    color:var(--primary-color-text-variant);
    font-size:20pt;
}
.profileNavbar{
    border-radius:100%;
}
.mobileMenu{
    position:fixed;
    top:0;
    left:0;
    width:100dvw;
    height:100dvh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:10px;
    z-index:99999;
    display:none;
    background:var(--bs-body-bg);
    color:var(--bs-boody-color);
    font-size:16pt;
}
.mobileMenu i{
    color:var(--secondary-color);
}
.mobileMenu a{
    text-decoration: none;
    color:var(--bs-boody-color);
    text-align:left;
    width:80%;
}
.mobileMenu span{
    width:80%;
}
.mobileMenu a:hover{
    text-decoration:underline;
}
#closeMenuMobile{
    position:fixed;
    top:2%;
    right:2%;
    background:none;
    border:none;
    color:var(--primary-color-text-variant);
    font-size:24pt;
}

.footerMobile .col{
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    gap:5px;
    padding:2%;
    cursor:pointer;
    color:var(--bs-secondary-color);
}

.footerMobile .col span{
    width:100%;
    text-align:center;
}
.footerMobile .active{
    background-color: var(--secondary-color);
    color:white;
    border-radius:25px;
}


.footerMobile{
    margin:auto;
    width:100dvw;
    position:fixed;
    bottom:0;
    left:0;
    padding:1%;
    background:var(--bs-body-bg);
}
.footerMobile .row{
    max-width:500px;
    margin:auto;
}
.footerMobile .col i{
    color:var(--secondary-color);
}
.footerMobile .active i{
    color:white;
}


.myProfile{
    display:flex;
    flex-direction: row;
    gap:10px;
    align-items: center;
    cursor:pointer;
}
.myProfile img{
    border-radius:100%;
}

@media(max-width:992px){
    .mainContainer{
        margin-top:75px;
        margin-bottom:70px;
        height:100%;
    }
    .content-menu{
        height:100%;
    }
}
@media(min-width:992px){
}