:root{
    /* Colors */

    --azul: hsl(202, 100%, 50%);
    --roxo: hsl(262, 100%, 50%);
    --larj: hsl( 22, 100%, 50%);
    --verd: hsl( 82, 100%, 50%);

    --azulx: hsl(202, 100%, 75%);
    --roxox: hsl(262, 100%, 75%);
    --larjx: hsl( 22, 100%, 75%);
    --verdx: hsl( 82, 100%, 75%);

    /* Sizes */
    --side-bar-width: 180px;
    --lmargin: 40px;
    --tpad: 60px
}

/* Sidebar */
nav {
  height: 100%; /* remove for auto */
  width:  var(--side-bar-width);
  position: fixed; /* stay in place on scroll */
  z-index: 1;
  top: 0;
  left: 0;
  background-color: var(--azulx);
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: var(--tpad);
  margin-left: var(--lmargin);
  text-align: right;
  font-family: monospace;
  line-height: 38px;
  font-size: 14px;
}

/* The navigation menu links */
nav a {
  text-decoration: none;
  color: white;
  display: block;}

.hoverable:hover {
  background-color: var(--larj);
}

nav div {
  text-decoration: none;
  color: black;
  display: block;
  padding-left: 10px;
  padding-right: 10px;

}

.atual{
    background-color: var(--azul);
      transition: background-color 0;
}


/* Style page content */
main {
  text-align: left;
  margin-top: var(--tpad);
  margin-left: calc(var(--side-bar-width) + var(--lmargin));
  padding: 0px 10px;
  font-family: sans-serif;
}

h1 {
    color: var(--larj);
    font-size: 36px;
    font-weight:300;

}
h2 {
    color: var(--azulx);
    font-size: 15px;
    font-weight: 300;
}

.destaque {
    font-weight: 900;
}
/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}