.sidebar {
    width: 280px;
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 40px;
    height: 100%;
    padding-left: 10px;
    box-shadow: 3px 0px 13px 1px rgba(0,0,0,0.29);
    transition: width 0.5s;
    background: #116466;
}

.sidebar-top{
    margin-top: 10px;
    user-select: none;
}

.sidebar-top img{
    position: relative;
    width: 90%;
}

.fa-solid{
    font-size: 40px;
    background: rgb(133, 20, 75);
    margin-top: 10px;
    padding: 20px;
    border-radius: 100%;
    box-shadow: -1px 12px 15px 0px rgba(0,0,0,0.2);
    margin-left: 30px;
    user-select: none;
    transition: box-shadow 0.5s, background 0.5s;
}

.fa-solid:hover{
    cursor: pointer;
    background: #b39f8e;
    box-shadow: -1px 12px 15px 0px rgba(0,0,0,0.3);
}

.options{
    margin-top: 105px;
    width: 280px;
    transition: width 0.5s;
}

.options section {
    font-size: 19px;
    padding: 20px;
    margin-bottom: 20px;
    color: rgb(180, 180, 180);
    user-select: none;
    transition: font-weight 0.5s, border-left-style 0.5s,  border-left-color 0.5s, background-color 0.5s;
    transition-timing-function: ease;
}

.options section:hover{
    font-weight: bold;
    border-left-width: 7px;
    border-left-style: solid;
    border-left-color: rgb(133, 20, 75);
    background-color: rgba(56,70,80,1);
    cursor: pointer;
}

.fa-fire-flame-curved:hover, .fa-masks-theater:hover, .fa-landmark:hover, .fa-children:hover, .fa-film:hover, .fa-award:hover, .fa-clock:hover, .fa-arrow-trend-up:hover{
    background: none;
    color: rgb(133, 20, 75);
}

.fa-fire-flame-curved, .fa-masks-theater, .fa-landmark, .fa-children, .fa-film, .fa-award, .fa-clock, .fa-arrow-trend-up{
    color: white;
    font-size: 28px;
    padding: 0px;
    margin-right: 15px;
    margin-left: -3px;
    position: relative;
    top: 5px;
    background: none;
}

.options hr{
    margin-top: 40px;
    color: lightgray;
    opacity: 0.2;
}

#crack{
    margin-top: 40px;
}


@media screen and (max-width: 1051px) {
    .sidebar{
        width: 100px;
    }

    .options{
        width: 100px;
    }

    .options section{
        visibility: hidden;
    }
    .fa-fire-flame-curved, .fa-masks-theater, .fa-landmark, .fa-children, .fa-film, .fa-award, .fa-clock, .fa-arrow-trend-up{
        visibility: visible;
        margin-left: 4px;
    }
    .sidebar-top span{
        display: none;
      }
    
      .fa-user-astronaut{
        position: relative;
        right: 25px;
      }
}