@import url("https://fonts.googleapis.com/css2?family=Baskervville:ital@0;1&family=Didact+Gothic&display=swap");

:root {
  --maincolor: #3c5335;
  --mainfont: "Didact Gothic", sans-serif;
  --serif: "Baskervville", serif;
  --azulescuro: #041c3c;
  --azul: #00ccff;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

body {
  height: 100dvh;
  width: 100vw;
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  width: 100vw;
  color: #fff;
  font-family: var(--mainfont);
}

.background {
  background: linear-gradient(rgba(8, 109, 143, 0.95), rgba(0, 20, 49, 0.897)),
    url(assets/bg-unsplash.jpg) no-repeat fixed;
  background-size: cover;
  background-position: center;
  height: 100dvh;
  width: 100vw;
}

#minnutti {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#minnutti p {
  text-align: center;
}

.logo svg {
  display: none;
  width: 550px;
  height: auto;
  filter: invert(51%) sepia(69%) saturate(910%) hue-rotate(156deg)
    brightness(106%) contrast(106%);
  cursor: pointer;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.logo span:hover {
  filter: invert(51%) sepia(69%) saturate(910%) hue-rotate(156deg)
    brightness(106%) contrast(106%) drop-shadow(1px -1px 56px #00ccff);
}

.contato {
  margin-top: 80px;
}
.contato ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

.contato__btns li a {
  color: #fff;
  border: 2px solid var(--azul);
  text-decoration: none;
  font-size: 1.2rem;
  padding: 20px 30px;
  border-radius: 5px;
}

a:visited, a:active  {
  color: #fff;
  border: 2px solid pink;
  text-decoration: none;
  font-size: 1.2rem;
  padding: 20px 30px;
  border-radius: 5px;
}

.contato__btns li a:hover {
  background-color: var(--azul);
  color: #000;
  font-weight: bold;
}

#about {
  background-color: #fff;
}
.about__teste {
  padding: 5% 10%;
  font-family: var(--serif);
}

.about__teste h2 {
  color: var(--azulescuro);
  font-family: var(--mainfont);
}

#footer {
  background: var(--azulescuro);
}
footer .rodape {
  color: #fff;

  padding: 2% 10%;
}

@media (min-width: 482px) {
  .header p {
    margin-left: -30px;
  }
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .big-logo svg {
    display: block;
    width: 550px;
    height: auto;
  }
}

@media (max-width: 481px) {
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .sm-logo svg {
    display: block;
    width: 220px;
    height: auto;
  }
}