body {
  margin: 0; /* zerando a margem padrão */
  padding: 0; /* zerando a margem de dentro do obj padrão */
  background: #ccee66; /* Fundo */
  color: rgb(43, 43, 43); /* cor da fonte */
  padding: 20px 120px; /* Depois de zerada , temos que colocar o quanto a gente quer */
  height: 100vh; /* Altura e 100vh significa que queremos ocupar a tela toda */
  font-family: "Righteous", sans-serif;
  overflow: hidden;
  /* O  que fazer com oq sobra?*/
}

/*After ( Antes) , before ( Depois ) */

body::before {
  content: "";
  background: rgb(255, 255, 255);
  position: absolute;
  top: 0;
  left: -600px;
  transform: rotate(-70deg);
  width: 100%;
  height: 120%;
}

body::after {
  content: "CodeBy Ryan";
  color: rgb(36, 36, 36);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 125px;
  font-weight: bold;
  opacity: 0.5;
}

.Navbar img {
  width: 80px; /* Largura */
  position: relative;
  z-index: 1;
}

h4 {
  font-size: 30px; /* Mudar a font */
}

h1 {
  font-size: 80px;
}

p {
  font-size: 16px;
  margin-bottom: 40px; /* Margem so em baixo */
}

.botão-carrinho {
  background: #a3be52;
  padding: 10px 25px;
  border-radius: 20px;
  font-size: 16px;
  color: rgb(255, 255, 255);
  cursor: pointer;
  transition: 0.5s;
}

.botão-carrinho:hover {
  opacity: 0.7;
}

.img-tenis {
  transform: rotate(-25deg);
  width: 800px;
  filter: drop-shadow(30px 45px 40px #161616);
  transition: 1s;
}

.troca-efeito {
  opacity: 0;
  transform: rotate(-25deg) translateY(-30px);
}

.caixa-Principal {
  display: flex; /* Ativa superpoderes */
  justify-content: space-between; /* Alinha na horizontal */
  align-items: center; /* Alinha na Vertical */
  height: 75%; /* Colocando no centro */
  position: relative;
  z-index: 1;
}

.caixa-txt {
  max-width: 500px;
}

.caixa-botão {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 20px;
}

.botão {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  cursor: pointer;
}

.botão:active {
  opacity: 0.5;
}

.verde {
  background: #a3be52;
}

.azul {
  background: #5293be;
}
.rosa {
  background: #9c52be;
}