/*--------Reset----------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	position: relative; /* Added in v.2.1 */
	box-sizing: border-box; /* Added in v.2.2 */
}
/* HTML5 tags */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
	display: block;
	position: relative;  /* Added in v.2.1 */
	box-sizing: border-box;  /* Added in v.2.2 */
}


  

.facebook-icon img {
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle default shadow */
  border-radius: 8px; /* Optional: soften edges */
  }
  
  .facebook-icon:hover img {
    transform: translateY(-5px) scale(1.1); /* Moves the icon up by 5px */
    transform: translateY(-5px) scale(1.05);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Deeper shadow on hover */
}
  

.logos h2 {
    color: rgb(242, 241, 241);
}
.gwd h2{
    color: rgb(242, 241, 241);
}

.transplant h2{
    color: rgb(242, 241, 241);
}

.giveaway{
    margin-top: 82%;
}

.giveaway h3{
    font-family: "Limelight", sans-serif;
    font-weight: 400;
    font-style: normal;
    bottom: -1rem;
}

.transplant h3{
    font-size: 108%;
}

.earthday h2{
    color: rgb(242, 241, 241);
}

.earthday h3{
    font-size: 22px;
}






body{
    background-image: url(img/bigbackground.svg);
    background-repeat: no-repeat;
    background-size: 100%;
}

@media screen and (min-width: 60rem){
.flex-container{
    display: flex;
}

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

}/* closes media query*/

.earthday .flex-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.75rem;
    width: 80vw;
    margin: 0.75rem auto;
    max-width: 500px;
    
}

section{
    background-color: #ffffff6b;
    padding: 1rem;
    margin: 1rem;
    /* border: 10px solid #708f6e; */
    border-radius: 10px 10px 10px 10px;
  }
  




h1 {  
    text-align: center;
    font-size: 2rem;
    font-family: "Cherry Bomb One", system-ui;
    font-weight: 400;
    font-style: normal;}
h2 {font-size: 28px;
    font-family: "Ranchers", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: rgb(55, 68, 55);
    text-align: center;
    padding: 13px;}
h3 {font-family: "Ranchers", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    color: rgb(46, 53, 46);}
h4 { font-size: 1.4142em; margin-top: 2.5rem; }
h5 { font-size: 1.2599em; }
h6 { font-size: 1.1225em; }
p { font-family: "Winky Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;; margin: 1rem 0 0.5rem 1rem;line-height: 1.4;}
small { font-size: .8909em; }




section.header h3{
    font-size: 1rem;
    top: -0.3rem;
  }


  #earth-picture{
    width: 16rem;
  left: 2rem;
  border-radius: 1rem;
  bottom: -1rem;
    
        
  }

#jac-logo{
width: 12rem;
bottom: -6px;
}


#mac-logo{
    width: 7rem;
    left: 93px;
}

#facebook-logo{
    width: 3rem;
    left: 129px;
    
}

#other-jac-logo{
    width: 8rem;
    bottom: 1rem;
}

#gwd-logo{ 
    width: 9rem;
    bottom: -1rem;
    left: 41px;
}

#mcgill{
    width: 9rem;
    left: 31px;
    bottom: -1rem;
}

#edc-logo{
    width: 9rem;
    left: 178px;
    bottom: -1rem;
}
#edo-logo{
    width: 9rem;
}

#sun{
    width: 4rem;
    bottom: -22px;
    left: -8rem;
}

#tomatos {
    width: 14rem;
  left: 3rem;
  bottom: -28px;
  padding: 30px;
  }


/*----------------------TABLET STYLES----------------------------------*/
@media only screen and (min-width: 675px){

    .earthday h2 {
        color: rgb(255, 255, 255);
      }

    .logos h2 {
        color:  rgb(55, 68, 55);
    }
    .gwd h2{
        color:  rgb(55, 68, 55);
    }
    
    .transplant h2{
        color:  rgb(55, 68, 55);
    }

    body{
        background-color: rgb(255, 255, 255);
       
    }
   
    #facebook-logo {
      width: 3rem;
      left: 18rem;
    
    }

    #earth-picture{
        width: 18rem;
        left: 1rem;
        border-radius: 1rem; 
        bottom: 0rem;     
      }

    #mac-logo{
        width: 8rem;
        left: 15rem;
        }

    #jac-logo{
            width: 20rem;
            bottom: -6px;
        }

    #other-jac-logo{
        width: 12rem;
        bottom: 2rem;
        left: 1rem;
        }

        #gwd-logo{ 
            width: 12rem;
            bottom: -20rem;
            left: -11rem;
        }
        
        #mcgill{
            width: 12rem;
            bottom: 8rem;
            left: 26rem;
        }
        
        #edc-logo{
            width: 12rem;
            bottom: 17rem;
            left: 14rem;
        }

        
        #edo-logo{
            width: 12rem;
            bottom: -8rem;
            left: -23rem;
        }

        #sun {
            width: 8rem;
            bottom: -22px;
            left: -135px;
          }

          #tomatos {
            width: 14rem;
            left: 5rem;
            bottom: 0rem;
          }
            
        footer{
            left: 5rem;
        }
}
    

/*---------------------END OF MEDIA QUERY--------------------*/

/*-------------------DESKTOP STYLES------------------------------------*/
@media only screen and (min-width:1000px){

    .flex-container{
        justify-content: center;
        text-align: center;

    }

    #tomatos {
        width: 14rem;
        left: 17rem;
        padding: 0rem;
      }

      .earthday h2 {
        color: rgb(55, 68, 55);;
      }



    

    .column one{
        height: 200px;
    }

    .macmarket p{
       left: -2rem; 
    }


    .logos h2 {
        color: rgb(55, 68, 55);
        left: 27rem;
      }

    .transplant h3 {
        font-size: 140%;
      }



    #earth-picture {
        width: 19rem;
        left: 5rem;
        border-radius: 1rem;
      }

   

    #facebook-logo {
        width: 3rem;
        left: -2rem;
        bottom: -8px;
      }


    #mac-logo{
        width: 20rem;
    }

    #jac-logo{
        width: 20rem;
        bottom: -6px;
        }
    #other-jac-logo{
            width: 12rem;
            bottom: -34px;
            left: -14rem;
    }
    #gwd-logo{ 
        width: 12rem;
        bottom: -4rem;
        left: 18rem;
    }
    #mcgill{
        width: 12rem;
        bottom: 1rem;
        left: -16rem;
    }
    
    #edc-logo{
        width: 12rem;
        bottom: 2rem;
        left: 16rem;
      }
    
    #edo-logo{
        width: 12rem;
        bottom: -12rem;
        left: -38rem;
    }

    #sun {
        width: 8rem;
        bottom: -22px;
        left: -16rem;
      }
}
    
/*---------------------END OF MEDIA QUERY----------------*/

footer{
    left: 1rem;
}