/* 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 {

      background-color: pink;
      font-family: Delius Swash Caps, cursive;
      color: black;
    }
    /*fonte bonitas!!!*/
    .bonbon-regular {
      font-family: "Bonbon", cursive;
      font-weight: 500;
      font-style: normal;
      color: deeppink;
      font-size: 30px;   /* 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;
    }
    
    /*TITULO*/
    .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;
    }
    
    
    .conteiner{
      width: 90%;
      max-width: 1400px;
      margin: 70px 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;
      }
      
    .bloco-inicial{
      display: flex;
      justify-content: center;
      gap: 5px;/*distancia entre os blocos*/
      margin-top: 5px;
      }  
    
    .menu-produtos {
      color: yellow;
      border: 3px solid pink;
      background-color:yellow;
      border-color:black;
      padding: 20px;
      margin-top: 0px;
      width: 30%;
      border-radius: 0px;
      text-align: justify;
      transition: box-shadow 0.3s ease;
      }
      
    .texto{
      margin-top: 0px;
      width: 70%;
      background: white;
      border-radius: 0px;
      padding: 10px;
      text-align: justify;
      transition: box-shadow 0.3s ease;
      border: 3px solid pink
    }
    
    
    /* 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;
    }
    
    .todos-os-produtos{
      max-width: 2000px;
      margin: 0px auto 0 auto;
      padding: 5px;
      background-color: transparent; /* 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*/
      border: 5px solid deeppink;
    
      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;
      border: 5px solid orange;
      }

  /* Efeito ao passar o mouse */
    .produto-branco:hover {
      background-color: #ff85c1;
      transform: scale(1.05);
      }