* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}
img .card1 {
opacity: 50%;

}
.card1{
  background: #fff;
  background-image: url(imagens/istockphoto-1369019076-612x612.jpg) ;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  color: #c600f8;


}
.card2{
  background: #fff;
  background-image: url(imagens/estilo-tirado-social-diferente-dos-ícones-dos-meios-à-disposição-teste-padrão-sem-emenda-do-vetor-no-fundo-branco-93786140.jpg);
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  color: #8c0191;
  
}
.card3 {
  background: #fff;
  background-image: url(imagens/retro-gamer-room-artwork-pixel-art-s-s-nostalgia-vibrant-pixel-art-illustration-retro-gamer-room-filled-s-s-359720170.jpg);
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  color: #c600f8;

}
.card4 {
  background: #fff;
  
  background-image: url(imagens/molde-para-contatos-fundo-informações-de-contato-rotular-contacta-nos-no-caderno-na-mesa-do-trabalho-escritório-com-118309216.jpg);
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  color: #02d0e3;
}

body {
  background: #f4f4f4;
  color: #333;
  line-height: 1.6;
}

 #blogpessoal{
        background-color: #000;
        background-image: url(imagens/Nebulosa.jpg);
        background-repeat: no-repeat;
        background-position: center ;
        color:#ff0000
      
}

#blogjogos{
        background-color: #000;
        background-image: url(imagens/jogos.jpg);
        background-repeat: repeat;
        background-position: center ;

}

#projeto{
        background-color: #000;
        background-image: url(imagens/blueprint-background.jpg);
        background-repeat: no-repeat;
        background-position: right center, center center;
}
#focus{
        background-color: #fff;
        background-image: url(imagens/cadernos.jpg);
        background-repeat: no-repeat;
        background-position: center;

}
 #contato{
        background-color: #000;
        background-image: url(imagens/papel_de_parede_viagem_espacial_peb_105_1_ab73c33e36eab5fa5d7ec4d76cdba5a8.webp);
        background-repeat: no-repeat;
        background-position: center ;
      
}
#projeto h2{
  background-color: #fff;
  padding: 8px;
  border-radius: 8px;
}


header, footer {
  text-align: center;
  padding: 20px;
  background: #222;
  color: #fff;
}

main {
  max-width: 900px;
  margin: 30px auto;
  padding: 20px;
}

.card6 {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.cardj1 {
  background: #fff;
  background-image: url(imagens/mariofase.png);
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  color:#fff
}

.cardj2 {
  background: #fff;
  background-image: url(imagens/zelda-tears-of-the-kingdom-link.gif);
  background-repeat: no-repeat;
  background-position: right center, center center;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
}
/* LINKS */
.link-destaque {
  display: inline-block;
  margin-top: 10px;
  text-decoration: none;
  background: #c600f8;
  color: #fff;
  padding: 10px 15px;
  border-radius: 8px;
  transition: 0.3s;
}

.link-destaque:hover {
  background: #0206e3;
}

.voltar {
  background-color: #e918ec;
  border-radius: 8px;
  padding: 10px 15px;
  display: inline-block;
  margin-top: 20px;
  text-decoration: none;
  color: #fbf9f9;
  font-weight: bold;
}

/* PERFIL */
.perfil {
  display: flex;
  gap: 20px;
  align-items: center;
}

.foto-perfil {
  width: 120px;
  height: 120px;
  border-radius: 100%;
  object-fit: cover;
  border: 3px solid #222;
}

/* JOGOS */
.jogo {
  display: flex;
  gap: 20px;
  align-items: center;
}

.jogo img {
  width: 120px;
  border-radius: 8px;
}

/* PROGRESSO */
.barra {
  width: 100%;
  height: 20px;
  background: #ddd;
  border-radius: 10px;
  overflow: hidden;
}

.preenchimento {
  width: 60%;
  height: 100%;
  background: #8c0191;
}

/* FORMULÁRIO */
form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

input, textarea {
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

textarea {
  resize: vertical;
}

button {
  width: fit-content;
  padding: 8px 15px;
  background: #222;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

button:hover {
  background: #444;
}

.obs {
  font-size: 0.85rem;
  color: #666;
}