html, body, #home {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}

body {
  background:
    url(../imagens/capa.png),
    url(../imagens/ruido.png),
    linear-gradient(20deg, #12833b, #1ab64f);
  background-attachment: fixed;
  font-family: Arial, Helvetica, sans-serif;
}

.nav-container {
  display: flex;
  align-items: center;
}

nav.navbar-transparente {
  padding: 15px 0px;
  background: rgba(0,0,0,0.8);
}

.navbar-light .navbar-nav .nav-link {
  color: white;
}

.navbar-light .navbar-nav .nav-link:hover {
  color: white;
}

.navbar-light .navbar-toggler {
  color: rgba(255,255,255,0.5);
  border-color: rgba(255,255,255,0.5);
}

#entrar {
  color: #000;
  font-size: 0.8rem;
  margin: 0.8rem;
  font-weight: 750;
  border-radius: 40px;
  cursor: pointer;
  background-color: #fff;
}

#home {
  min-height: 100vh;
}

.divisor {
  width: 1px;
  background: white;
  margin: 12px 15px;
}

.capa {
  text-align: center;

}

 .btn-custom {
   color: white;
   border-radius: 500px;
   -webkit-border-radius: 500px;
   -moz-border-radius: 500px;
   text-transform: uppercase;
   transition: background 0.4s, color 0.4s;
   padding: 10px 20px;
 }

.btn-custom:hover {
  background: #1db954;
}

.btn-free {
  background: #1db954;
  color: black;
  font-weight: 700;
}

.btn-free:hover {
  color: #121212;
  background: #1ed760;
}

.btn-branco {
  background-color: #121212;
  color: #fff;
  border: 2px solid white;
  font-weight: 700;
}

.btn-branco:hover {
  background-color: #121212;
  color: #fff;
}

.caixa {
  padding-top: 20px;
  padding-bottom: 20px;
}

#servicos {
  background-color: #121212;
  color: white;
}

#recursos {
  color: white;
}

.resource {
  display: flex;
  flex-direction: column;
}

#servicos h2, h3 {
  padding-top: 20px;
  padding-bottom: 20px;
}

#recursos {
  padding-top: 20px;
  padding-bottom: 20px;
}

#recursos h2 {
  color: white;
}

#recursos h3 {
  color: white;
}

.albuns {
  padding: 10px 0;
}

.rotacionar {
  -ms-transform: : rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  padding-left: 80px;
  margin-top: 80px;
}

footer {
  background-color: #000;
  padding: 50px 0px 20px 0px;
  position: relative;
}

footer h4 {
  color: #919496;
  font-size: 0.8em;
  text-transform: uppercase;
}

.footer-nav {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 10px;
}

.navbar-nav li a {
  color: white;
  font-size: 0.8em;
}

footer .footer-nav li a:hover {
  color: #9bf0e1;
  text-decoration: none;
}

footer ul {
  list-style: none;
}

footer ul li{
  list-style: none;
}

h1 {
  font-weight: 900;
  letter-spacing: -0.05em;
  color: white;
  margin-bottom: 50px;
}

h2 {
  font-size: 3em;
  font-weight: 700;
  letter-spacing: -0.04em;
}

h3 {
  font-size: 2em;
  font-weight: 700;
  letter-spacing: -0.04em;
}

@media (max-width: 575.98px) {
  .btn-custom {
    margin: 10px 15px;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  h1 {
    font-size: 3em;
  }
  .btn-custom {
    margin: 10px 15px;
    font-size: 1em;
  }
  .rotacionar {
    transform: none;
    padding-left: 0;
    margin-top: 0;
    flex-direction: column;
    align-items: center;
  }

  .rotacionar img {
    max-width: 80%;
    margin-bottom: 20px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  h1 {
    font-size: 4em;
  }

  .btn-custom {
    margin: 10px 15px;
    font-size: 1em;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  h1 {
    font-size: 5em;
  }
}

@media (min-width: 1200px) {
  h1 {
    font-size: 6em;
  }
}