html {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: arial, sans-serif;
  font-weight: 16px;
  display: flex;
  flex-direction: row-wrap;
  background-color: #EBE9E7;
}

#navbar {
  background-color: #c2c0c4;
  border-right: 3px solid #838285;
  width: 17.2rem;
  position: fixed;
  top:0;
  left: 0;
  bottom: 0;
  z-index: 999;
}

.mobile-menu {
  display: none;
}

header h1 {
  padding: 1rem 2rem;
  font-size: 2rem;
}

/* TESTE */

// Animate the size, inside
.fill:hover,
.fill:focus {
  box-shadow: inset 0 0 0 2em var(--hover);
}

// Animate the size, outside
.pulse:hover, 
.pulse:focus {
  animation: pulse 1s;
  box-shadow: 0 0 0 2em transparent;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--hover); }
}

// Stack multiple shadows, one from the left, the other from the right
.close:hover,
.close:focus {
  box-shadow: 
    inset -3.5em 0 0 0 var(--hover),
    inset 3.5em 0 0 0 var(--hover);  
}

// Size can also be negative; see how it's smaller than the element
.raise:hover,
.raise:focus {
  box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
  transform: translateY(-0.25em);
}

// Animating from the bottom
.up:hover,
.up:focus {
  box-shadow: inset 0 -3.25em 0 0 var(--hover);
}

// And from the left
.slide:hover,
.slide:focus {
  box-shadow: inset 6.5em 0 0 0 var(--hover);
}

// Multiple shadows, one on the outside, another on the inside
.offset {  
  box-shadow: 
    0.3em 0.3em 0 0 var(--color),
    inset 0.3em 0.3em 0 0 var(--color);
  
  &:hover,
  &:focus {
    box-shadow: 
      0 0 0 0 var(--hover),
      inset 6em 3.5em 0 0 var(--hover);
  }
}

$colors: (
  fill: #a972cb,
  pulse: #ef6eae, 
  close: #ff7f82, 
  raise: #ffa260, 
  up: #e4cb58, 
  slide: #8fc866, 
  offset: #19bc8b
);

@each $button, $color in $colors {
  .#{$button} {
    --color: #{$color};
    --hover: #{adjust-hue($color, 45deg)};
  }
}

button {  
  color: var(--color);
  transition: 0.25s;
  text-decoration: none;
  
  &:hover,
  &:focus { 
    border-color: var(--hover);
    color: #fff;
  }
}

.button-link {

  text-decoration: none; /* Remover sublinhado */
  color:black
}


/* TESTE */



#navbar ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

#navbar ul li {
  border-top: 1px solid #838285;
  padding: 1rem 2rem;
}

.nav-link {
  color: #4F4E50;
  text-decoration: none;
  font-size: 1.5rem;
  padding: 0;
  line-height: 3rem;
}

.nav-link:hover {
  color: #000;
}

#main-doc {
  margin: 1.5rem 0 0 17.2rem;
  padding: 2rem;
  display: flex;
  flex-flow: column;
  gap: 1.5rem;
}

.main-section {
  width: 80%;
  max-width: 600px;
  margin: 0 auto;
}

.section-header {
  font-size: 2rem;
}

#main-doc p {
  padding-left: 1em;
}

#main-doc ul,
#main-doc ol {
  margin-left: 2em;
}

#main-doc ul li,
#main-doc ol li {
  margin-bottom: 1em;
}

#main-doc ul li:last-of-type,
#main-doc ol li:last-of-type {
  margin-bottom: 1.5em;
}

code {
  display: block;
  background-color: #DEDCD9;
  margin: 0 3em;
  padding: 1em 2em;
  border-radius: 0.5em;
}

.indent-1 {
  padding-left: 1ch;
}

.indent-2 {
  padding-left: 2ch;
}

.indent-5 {
  padding-left: 5ch;
}

.bold {
  font-weight: 700;
  padding-right: 1ch;
}

@media only screen and (max-width: 751px) {

  #navbar {
    width: 10rem;
    height: auto;
    border: none;
  }

  header h1 {
    font-size: 1.25rem;
  }
  
  #navbar ul li {
  padding: 1rem 1.5rem;
  }

  .nav-link {
    font-size: 1.25rem;
    padding: 0;
    line-height: 2rem;
  }

  #main-doc {
    margin-left: 10rem;
  }
}