
.ui{
    scroll-behavior: smooth !important;
    //scroll-margin-top: 30px;
    //overflow: scroll !important;
    overflow-y: auto;
    max-height: 100vh !important;
    padding-top: 2rem;
    padding-left: 20rem;
    padding-right: 20rem;
    position: relative;
    .menu-ui{
        top: 0;
        left: 0;
        bottom: 0;
        position:fixed;
        overflow-y:scroll;
        width: 15rem;
        padding-left: 30px;
        padding-right: 10px;
        padding-top: 40px;
        .content-title{
            font-size: 15px;
            color: rgb(173, 173, 173);
            cursor: pointer;
        }
        .menu-title{
            margin-top: 1rem;
            margin-bottom: 1rem;
            flex-wrap: wrap;
            .arrow{
                cursor: pointer;
            }
            a{
                font-size:medium;
                font-weight: 700;
                cursor: pointer;
                display: flex;
                flex-direction: row;
            }
            & .subtitle-menu{
                overflow: hidden;
                transition: transform 0.3s ease-out;
                height: auto;
                transform: scaleY(1);
                transform-origin: top;
                //padding-top: 20px;
                & a.menu-option{
                    text-decoration: none;
                    color: black;
                    margin-left: 10px;
                    font-size: 15px;
                    font-weight: 300;
                    margin-top: 20px;
                    margin-bottom: 20px;
                    
                    &.selected{
                        color: $primary-brand;
                    }
                }
                
                
                &.show{
                  
                    transform: scaleY(1);
                }
                &.hidden {
                    height: 0;
                    padding-top: 0px;
                    padding-bottom: 0px;
                    transform: scaleY(0);
                }
            }
        }
    }
    .content-ui{
        margin-top: 2rem;      
        .section{
            margin-top: 50px;
            margin-bottom: 50px;
            .title-ui{
                font-size: xxx-large;
                font-weight: bolder;
            }
            .subtitle-ui{
                font-size: x-large;
                font-weight: 500;
            }
            .description-ui{
                padding-right: 2rem;
                font-weight: 200;
                font-size: large;
                color: rgb(168, 168, 168);
            }
            .spacing{
                &.small{
                    margin-top: 1rem;
                    margin-bottom: 1rem;
                }
                &.medium{
                    margin-top: 2rem;
                    margin-bottom: 2rem;
                }
                &.large{
                    margin-top: 3rem;
                    margin-bottom: 3rem;
                }
               
            }
            .code-section{
                
                border-radius: 5px;
                padding-bottom: 20px;
                padding-left: 20px;
                padding-right: 20px;
                display: flex;
                flex-wrap: wrap;
                color: white;
                background-color: rgba(0, 5, 14, 0.836);
                
            }
        }  
       
    }

}
.menu-option :focus{
    
    background: yellow !important;
    color: blue !important;
}
    
.menu-ui::-webkit-scrollbar {
    width: 5em;
  }
pre, code{
    white-space:pre-line;
}



