:root {
  --button-hover: #d7d17a;
}

body {
  header {
    padding-bottom: 0;
    background-color: #4bc0e3;

    .main-title {
      font-size: clamp(3rem, 16vw, 4rem);
      font-weight: bold;
      text-align: center;
    }

    nav a:hover {
      background: var(--button-hover);
    }

    p {
      margin: 0 auto;
    }
  }

  main {
    padding: 1rem;

    h1 {
      text-align: center;
    }

    a {
      text-decoration: none;
    }

    a:hover {
      font-weight: bold;
    }

  }

  #liste_themes li {
    padding: 0.75rem 0;
  }
}

#caixa {
  background: url(/img/caixa.webp) no-repeat;
  background-size: contain;
  padding-left: 90px;
}

#surdo {
  background: url(/img/surdo.webp) no-repeat;
  background-size: contain;
  padding-left: 90px;
}

#agogo {
  background: url(/img/agogo.webp) no-repeat;
  background-size: contain;
  padding-left: 90px;
}

#tambourim {
  background: url(/img/tambourim.webp) no-repeat;
  background-size: contain;
  padding-left: 90px;
}