:root {
  --mainBgColor: Brown;
  --darkerMainBgColor: Brown;
  --lighterMainBgColor: LightGray;
  --mainColor: #666666;
}

#myDefaultLogo {
    color: var(--darkerMainBgColor);
    font-family: Helvetica;
    font-weight: bold;
    /*font-size: 60px;*/ 
}

#myLogo {
    color: var(--darkerMainBgColor);
    font-family: Helvetica;
    font-weight: bold;
    /*font-size: 22px; */
}

.form-control:focus {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem var(--mainBgColor);
    }

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: var(--darkerMainBgColor)!important;
    border-color: var(--darkerMainBgColor)!important;
}

p{
    font-size: 17px;
    color: black;
}

#sticky-sidebar{
    width: 230px;
    /*background-color: blue;*/
    display: block;
}

.side-link{
    width: 215px;
}

a.nav-link{
    color:var(--mainColor)!important;
    /*font-weight: bold;*/
    /*width: 200px;
    color: greenyellow!important;*/
}

a.nav-link:hover {
  background-color:var(--lighterMainBgColor);
  color:black!important;
}

#main{
    margin-left: 230px;
    /*color: red;*/
}

.edu-sidebar {
    width: 230px;
}

#sticky-sidebar/*.edu-sidebar*/ {
    -ms-flex: 0 0 230px;
    flex: 0 0 230px;
    /*background-color: greenyellow;*/
}

a.active {
    background-color:var(--mainBgColor);
    color:white!important;
}

a.active:hover {
    background-color:var(--mainBgColor);
    color:white!important;
}

li.active > a {
    background-color:var(--mainBgColor);
    color:white!important;
}

li.active:hover > a{
    background-color:var(--mainBgColor);
    color:white!important;
}

code.example {
    border-radius: 15px; 
    border-left: 10px solid antiquewhite;
    border-top: 30px solid lightgrey;
    border-bottom: 10px solid lightgrey;
    border-right: 10px solid lightgrey;
}

/*
pre > code.hljs { display: inline; }

pre > code {
    background-color: red;
    display: inline  !important;

}

code {
    background-color: red;
    display: inline  !important;
}

.mainMenu{
    font-weight: bold;
    color:white;
}

@media (max-width: 690px) {
    #sticky-sidebar the following was commented out .edu-sidebar {
        display: none;
        width: 0px;
    }

    #main{
        margin-left: 0px;
    }

    .edu-article {
        margin-left: 0px;
    }
}
*/
/*
@media screen and (max-width: 690px)  {
    
    body {
    background-color: lightblue;
  }
  
    #sticky-sidebar {  this is the lef menu with all the links *
        background-color: lightblue;
        display: none;
        width: 0px;
    }
    
    .edu-sidebar { /* it's not in the main page'*
        display: none;
        width: 0px;
    }
    
    #vertical-bar {/* this is inside the stick-sidebar*
        class: collapse;
    }

.nav-link {
    color: green;
}
}
*/