@font-face {
    font-family: 'Bilgres';
    src: url(../fonts/Bilgres.woff2) format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face{
    font-family: 'Smack';
    src: url(../fonts/smackattackbb_reg.woff2) format('woff2');
    font-weight: normal;
    font-style: normal;
}

#title{background-color: #efc30c;
        border: 4px solid black;
        border-radius: 3rem;
        font-size: 80px;
        color: #077b30;
        -webkit-text-stroke-width: 3px;
        -webkit-text-stroke-color: black;
        font-family:'Bilgres', sans-serif;
        text-shadow: -5px 5px 0px black;
        text-align: center;
    padding: 2.5rem;}

    #earth{
        max-width: 70%;
        display: flex;
        justify-content: center;
        background-color: #455ba8;
        border: 4px solid black;
        padding-left: 5rem;
        padding-right: 5rem;
        border-radius: 3rem;
        margin-top: 4rem;
        display: block;
    margin: 0 auto;
        

      }

header{background-color: #6FC276;
padding: 2%;}

#tomato{
    background-color: #efc30c;
        border: 4px solid black;
        border-radius: 3rem;
        font-size: 80px;
        color: #077b30;
        -webkit-text-stroke-width: 3px;
        -webkit-text-stroke-color: black;
        font-family:'Bilgres', sans-serif;
        text-shadow: -5px 5px 0px black;
        text-align: center;
    padding: 2.5rem;
}

.brandy{background-color: #6bc111;
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
        border: 4px solid black;
        border-radius: 3rem;
        max-height: 60vh;
      }

      .image-wrapper {
        position: relative; /* Anchor for the absolute bubble */
        width: 80%;
        margin: 0 auto;
      }
      
      .bubble {
        position: absolute;
        top: -10%; /* Adjust these */
        left: -30%;
        width: 70%; /* Scale bubble appropriately */
        z-index: 10;
      }
      
      .bubble img {
        width: 100%;
        height: auto;
        display: block;
      }

      

.wrapper{ background-color: #6FC276;
padding: 2%;}

main{ background-color: #6FC276;
padding: 2%;}

.giveaway{ background-color: #6FC276;
padding: 2%;}

.flex-container{
    background-color: #6FC276;
    padding: 2%;
}

.column{ background-color: #6FC276;
padding: 2%;}

.two{ background-color: #6FC276;
padding: 2%;}

.earthday .flex-container{width: 100%;
flex-wrap: wrap;}



.earthday .flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem; /* space between items */
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto; /* centers the whole grid */
}

.earthday .flex-container img {
  width: 150px; /* slightly smaller if needed */
  height: auto;
  padding: 0;
  display: block;
}
#mac-market{
  max-width: 40%;
  background-color: #ed4c4c;
  border: 4px solid black;
  border-radius: 3rem;
  margin: 0 auto;
  margin-bottom: -7rem;
  
}

.column.one{
  display:flex;
  justify-content: center;
}

#mmtitle{background-color: #efc30c;
  border: 4px solid black;
  border-radius: 3rem;
  font-size: 80px;
  color: #077b30;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: black;
  font-family:'Bilgres', sans-serif;
  text-shadow: -5px 5px 0px black;
  text-align: center;
padding: 2.5rem;}

.bubble-box {
  background: url('../img/thinkspeech.svg') no-repeat center center;
  background-size: contain;
  width: 110%;
  max-width:1000px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5%;
  box-sizing: border-box;
  text-align: center;
  font-family: "Smack", sans-serif;
  font-size: 1.2rem;
  line-height: 1.5;
  margin-left: -5%;
  margin-top: 1rem;
  margin-right: 3rem;
  
  
      margin-bottom: 5rem;

}

#boxed {
  background-color: #f6e9d2;
  font-family: 'smack', sans-serif;
  padding: 1rem;
  border: 4px solid black;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: -25%;
  font-size: 1rem;
  
}

.earthday .flex-container img:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

#facebook{
  max-width: 50px;
  margin-left: 1rem;
  margin-top: 1rem;
}

#gwd{background-color: #efc30c;
  border: 4px solid black;
  border-radius: 3rem;
  font-size: 80px;
  color: #077b30;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: black;
  font-family:'Bilgres', sans-serif;
  text-shadow: -5px 5px 0px black;
  text-align: center;
padding: 2.5rem;}

#e{background-color: #efc30c;
  border: 4px solid black;
  border-radius: 3rem;
  font-size: 80px;
  color: #077b30;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: black;
  font-family:'Bilgres', sans-serif;
  text-shadow: -5px 5px 0px black;
  text-align: center;
padding: 2.5rem;}

#a{
  background-color: #f6e9d2;
  font-family: 'smack', sans-serif;
  padding: 1rem;
  border: 4px solid black;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: 1rem;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.plants{background-color: #efc30c;
  border: 4px solid black;
  border-radius: 3rem;
  font-size: 80px;
  color: #077b30;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: black;
  font-family:'Bilgres', sans-serif;
  text-shadow: -5px 5px 0px black;
  text-align: center;
padding: 2.5rem;}

#by{background-color: #efc30c;
  border: 4px solid black;
  border-radius: 3rem;
  font-size: 80px;
  color: #077b30;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: black;
  font-family:'Bilgres', sans-serif;
  text-shadow: -5px 5px 0px black;
  text-align: center;
padding: 2.5rem;}

.Jiffy{
  background-color: #f6e9d2;
  font-family: 'smack', sans-serif;
  padding: 1rem;
  border: 4px solid black;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: 1rem;
  font-size: 1.5rem;
}

.studs{
  background-color: #f6e9d2;
  font-family: 'smack', sans-serif;
  padding: 1rem;
  border: 4px solid black;
  
  font-size: 1rem;
}

.pl{background-color: #E04BC2;
  width: 50%;
  height: auto;
  display: block;
  margin: 0 auto;
  border: 4px solid black;
  border-radius: 3rem;
  }

  .www{background-color: #f6e9d2;
  font-family: 'smack', sans-serif;
  padding: 1rem;
  border: 4px solid black;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: 0.2rem;
  font-size: 1rem;}

  #jac-logo{max-width: 50%;
    
      display: block;
      margin: 0 auto;
      margin-bottom: 3.5rem;
      margin-top: 1rem;
    
  }
  
  #goal{background-color:#4169e0;
  border-radius: 1rem;}

  @media screen and (min-width: 1100px) {
    .bubble-box{display: block;
      margin: 0 auto;
    margin-bottom: 8rem;
  }
  }

  @media screen and (min-width: 890px) {
    .bubble-box{margin-bottom: 9rem;}
  }

  @media screen and (min-width: 1300px){
    .bubble-box{display: block;
      margin: 0 auto;
    margin-bottom: 15rem;}
  }   
  @media screen and (max-width: 650px) {
    .bubble-box{
      
    margin-top: 5rem;
  margin-bottom: 4rem;
margin-right: 1rem;}

#mac-market{padding:2rem;
max-width: 80%;}

.pl{width: 100%;}

}

  @media screen and (max-width: 440px) {
    #tomato{font-size: 50px;}

    #title{font-size: 50px;}

    #mmtitle{font-size: 50px;}

    #gwd{ font-size:50px;}

    .plants{ font-size: 50px;}

    #by{ font-size: 50px;}
  }

  footer{background-color:#6FC276;
  padding:2rem;
font-family: 'smack', sans-serif;}
  



#border{border: 4px solid black}

.logs{
  max-width: 20%;
  display: block;
  margin: 0 auto;

}