:root{
    --background-color: white;
    --text-title-color: #053D4E;
    --text-color: #32363b;
    --icon-color: #32363B;
    --icon-menu-color:#707780;
    --menu-color:#707780;

    --text-selected-color:#355CC0;
    --background-selected:#edf0ff;
    --background-hover: #f7f9fa;

    --border-color: #e6e9ed;
}
/*Global stlyes*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Courier New', Courier, monospace;
}
/*body*/
body{
    width: 100%;
    height: 100vh;
}

/*header*/
header{
    border: 2px solid red;
    z-index: 200;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0.45rem 2rem 0.45rem 1.27rem;
    border-bottom: 1px solid var(--border-color);
    position: fixed;
    background-color: var(--background-color);
    top: 0;
    left: 0;
}
.left{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
}
/*menu*/
.menu-container{
    border: 2px solid red;
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.menu {
    border: 2px solid black;
    width: 1.5rem;
    height: 37%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.menu div{
    width: 1.5rem;
    height: 37%;
    background-color: var(--menu-color);
    transition: all 0.2s ease;
}
.menu.menu-toggle div:first-child{
    width: 40%;
    transform: rotate(-35deg) translate(-30%,175%);
}
.menu.menu-toggle div:last-child{
    width: 40%;
    transform: rotate(35deg) translate(-30%,160%);
}
/*BRAND*/
.brand{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
}
.brand .logo{
    width: 1.7rem;
}
.brand .name{
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text-title-color);

}
/*rigth section*/
.right{
    border: 2px solid green;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.6rem;
}
.right a{
    border: 2px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
}
.right a:hover{
    background-color: var(--background-hover);
}

.right img{
    width: 1.5rem;
    margin: 0.5rem;
}
.right .user{
    width: 2.1rem;
    border-radius: 50%;
}
/*sidebar*/
.sidebar{
 border: 2px solid red;   
 margin-top: 4rem;
 width: 4rem;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 100;
 padding: 1.1rem 0;
 border-right: 1px solid var(--border-color);
 overflow-y: auto;
 background-color: var(--background-color);
 transition: width 0.5s ease;
}
.sidebar.menu-toggle{
    width: 18.75rem;
}
.sidebar a{
    border: 2px solid green;
    display: flex;
    align-items: center;
    gap: 1.3rem;
    padding: 0.9rem 0.7rem;
    text-decoration: none;
    margin: 0 0.5rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    color: var(--text-color);
}
.sidebar a:hover{
    background-color: var(--background-hover);
}
.sidebar a.selected{
    border: 2px solid red;
    color: var(--text-selected-color);
    background-color: var(--background-selected);
}
.sidebar a.search{
    border: 2px solid red;
    padding: 1rem 0.7rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.2rem;
   
}

.sidebar img{
    width: 1.6rem;
}
/*MAIN*/
main{
    border: 2px solid red;
    margin-top: 4rem;
    margin-left: 4rem;
    padding: 2rem;
    transition: margin-left 0.5s ease;
}
main.menu-toggle{
    margin-left: 18.75rem;
}

/*responsive*/
@media (max-width:500px){
    .right .icons-header{
        display: none;
    }
    .sidebar{
        width: 0;
    }
    main{
        margin-left: 0;
    }
    main.menu-toggle{
        margin-left: 0;
    }
    .menu.menu-toggle div:first-child{
        width: 100%;
        transform: rotate(-45deg) translate(-0.2rem,0.3rem);
    }
    .menu.menu-toggle div:nth-child(2){
        opacity:0;
    }
    .menu.menu-toggle div:last-child{
        width: 100%;
        transform: rotate(45deg) translate(-0.2rem, -0.3rem);
    }

    
}