/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

    body {
      margin: 0;
      padding: 0;
      background-image: url("https://e0.pxfuel.com/wallpapers/468/503/desktop-wallpaper-little-red-hearts-and-dots-on-white-background-paper-papel-de-parede-de-fundo-papel-de-parede-simples-desenhos-para-papel-de-parede.jpg");
      font-family: Delius Swash Caps, cursive;
    }
    
    .bonbon-regular {
      font-family: "Bonbon", cursive;
      font-weight: 500;
      font-style: normal;
      color: deeppink;
      font-size: 38px;   /* aumenta o tamanho da fonte */
    }

    .hachi-maru-pop-regular {
      font-family: "Hachi Maru Pop", cursive;
      font-weight: 400;
      font-style: normal;
      font-size: 20px;
    }
    
    .delius-swash-caps-regular {
      font-family: "Delius Swash Caps", cursive;
      font-weight: 400;
      font-style: normal;
    }

    
    .container {
      width: 90%;
      max-width: 1400px;
      margin: 100px auto 0 auto; /*espaço em cima + centralização*/
      background-image: url("https://i.pinimg.com/736x/b3/19/29/b31929597334fd607f03312dc89f1494.jpg");
      padding: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      border:3px;
    }

    /* Grid para os produtos */
    .produtos {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }

    /* Estilo do bloco do produto */
    .produto {
      
      background: #fafafa;
      border: 1px solid #ddd;
      border-radius: 5px;
      padding: 10px;
      text-align: center;
      transition: box-shadow 0.3s ease;
    }

    .produto:hover {
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }

    .produto img {
      max-width: 100%;
      height: auto;
      border-radius: 5px;
    }

    .descricao {
      margin-top: 10px;
      font-size: 14px;
      color: purple;
    }
    
    /* titulo(o primeiro ne bb) */
    .titulo{
      display: grid;
      gap: 20px;
      margin-top: 30px;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      font-weight: bold;
    }
    .titulo {
      
      background-image: url("https://i.pinimg.com/1200x/75/29/03/752903a725dbd29a790ec7989450e57d.jpg");
      border-top:30px solid transparent;
      border-image: url("https://i.pinimg.com/1200x/c7/5f/47/c75f47a7da8cc5a46fda2ad61fb77b53.jpg") 30 round;
      border-radius: 0px;
      padding: 10px;
      text-align: center;
      transition: box-shadow 0.3s ease;
    }
    
    /* bloco 1 aNTES doas produtos(agr virou texto base para blocos;() */
    .todos-os-produtos{
      max-width: 2000px;
      margin: 20px auto 0 auto;
      padding: 20px;
      background-color: #f2f2f2; /* cor de fundo do bloco */
      border-radius: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 20px; /* espaço entre os botões */
      justify-content: center;
  }

  /* Estilo dos botões menores */
  .produto-rosa {
    padding: 15px 25px;
    background-color: #ff69b4; /* rosa */
    color: white;
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 16px;
    border-radius: 8px;
    transition: transform 0.2s, background-color 0.2s;
    width: 70px;/*largura*/
    height:10px;/*altura*/
    
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Efeito ao passar o mouse */
  .produto-rosa:hover {
    background-color: #ff85c1;
    transform: scale(1.05);
  }
    .produto-branco {
    padding: 15px 25px;
    background-color: white; /* rosa */
    color: deeppink;
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 16px;
    border-radius: 8px;
    transition: transform 0.2s, background-color 0.2s;
    width: 70px;/*largura*/
    height:10px;/*altura*/
    
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Efeito ao passar o mouse */
  .produto-branco:hover {
    background-color: #ff85c1;
    transform: scale(1.05);
  }
    
    /* os tres primeiros blocos!!!!! */
   .container-inicio{
      display: flex;
      justify-content: center;
      gap: 5px;/*distancia entre os blocos*/
    }
    
    .menor{
      margin-top: 0px;
      width: 30%;
      background: pink;
      border-radius: 0px;
      padding: 10px;
      text-align: center;
      transition: box-shadow 0.3s ease;
    }
    
    
    .meio{
      margin-top: 0px;
      width: 70%;
      background: white;
      border-radius: 0px;
      padding: 10px;
      text-align: center;
      transition: box-shadow 0.3s ease;
    }
    .meio h3 {
      background-color: #adff9a;
      text-align: center;
      padding: 5px;
      font-weight: bold;
      font-family: "Bonbon", cursive;
  
    }
    .meio p {
      text-align: left;
      padding: 5px;
      font-family: "Delius Swash Caps", cursive;
  
    }
    
    /* aqui sao as bordinhasss de cada bixinho */
    .container-bordinha{
      margin-top: 10px;
      display: flex;
      justify-content: center;
      gap: 5px;/*distancia entre os blocos*/
      border-top: 100px pink;
      border-left: 100px pink;
      border-right: 100px pink;
      border-bottom: 100px pink;
    }
    
    .borda-menor{
      width: 30%;
      background-image: url("https://i.pinimg.com/1200x/c7/5f/47/c75f47a7da8cc5a46fda2ad61fb77b53.jpg");
      border-radius: 0px; /* deixa a borda arredondada!!! */
      padding: 10px;
      text-align: center;
      transition: box-shadow 0.3s ease;
    }
    
    .borda-meio{
      width: 70%;
      background-image: url("https://i.pinimg.com/1200x/c7/5f/47/c75f47a7da8cc5a46fda2ad61fb77b53.jpg");
      padding: 10px;
      text-align: center;
      transition: box-shadow 0.3s ease;
    }
    
    .container-chat {
      display: flex;
      justify-content: center;
      gap: 5px;/*distancia entre os blocos*/ 
      margin: 10px auto 0 auto;/* distancia entre o de cima e o de baixo */
    }

/* Bloco de imagem */
    .bloc-img {
      background-color: #fff;
      border: 5px solid #ff66cc; /* borda rosa */
      padding: 5px;
      text-align: center;
      width: 200px;
    }
    .bloc-img img {
      max-width: 100%;
    }

/* Bloco de texto */
    .bloc-text {
      background-color: #ffe6ea; /* fundo claro */
      border: 3px solid #ff66cc;
      padding: 10px;
      flex: 1; /* ocupa o espaço restante */
    }

/* Bloco de menu */
    .bloc-menu {
      background-color: #d9ffd9;
      border: 3px solid #000;
      width: 250px;
      padding: 10px;
    }
    .bloc-menu h3 {
      background-color: #adff9a;
      text-align: center;
      padding: 5px;
      font-weight: bold;
      font-family: "Bonbon", cursive;
      height: 20px;
    }
  .bloc-menu a {
      display: block;
      background-color: #ffd699;
      border: 1px solid white;
      margin: 5px 9;
      padding: 5px;
      text-decoration: none;
      color: #000;
    }
  .bloc-menu a-b { /* menu botao rosa*/
      display: block;
      background-color: #f7ccf7;
      border: 1px solid white;
      margin: 5px 9;
      padding: 5px;
      text-decoration: none;
      color: #000;
    }
  .bloc-menu a:hover {
      background-color: #ffc266;
  }
  .bloc-menu a-b:hover {
      background-color: #ffb3ff;
  }
  
  .footer {
      margin-top: 65px;
      text-align: right
    }