/* COLOR PALETTE */

:root {
  --blue:#11b5c2;
  --darkGreen:#003333;
  --green:#027c68;
  --lightGreen:#b0e892;
  --brightGreen:#009933;
  --yellow:#fae403;
  --white: #fff;
  --black: #000;
}

/* COLOR PALETTE ENDS */

body{
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: var(--darkGreen);
  color: var(--brightGreen);
  background-image: linear-gradient(#003333,#027c68, #003333)

}

main{
  margin: .25rem;
}

section{
  margin: 2rem auto;
  padding: 1rem;
}


header{
  margin: -9px;
  text-align: center;
  padding: 0.5rem;
  background-color: var(--darkGreen);
  color: var(--darkGreen);
  text-shadow: 
  0 0 10px var(--white);
  border: outset var(--darkGreen);
  border-radius: 0.75rem;
  border-width: 1rem;
}

.jac-logo{
  filter: invert(100%);
  max-width: 15rem;
  height: auto;
  margin-bottom: .75rem;
}



.giveaway{

  color: var(--brightGreen);
  border: .75rem double;
  border-radius: .75rem;
  border-color: var(--darkGreen);
}

.giveaway .column.one img{
  border: none 1rem;
  border-radius: 1rem;
}





.macmarket{
  
  border: .75rem double;
  border-radius: .75rem;
  border-color: var(--darkGreen);
}

 .macmarket{
      overflow: hidden;
    }

    .macmarket .column.one img{
      width: 8rem;
      height: auto;
      float: right;
      margin: -1rem 0rem 1rem 1rem;
    }



 .macmarket .column.two img{
      width: 8rem;
      height: auto;
      float: left;
      margin: 1px 11px 1rem 0rem;
    }





.gwd{
  
  color: var(--brightGreen);
  border: .75rem double;
  border-radius: 1rem;
  border-color: var(--darkGreen);
}

.gwd .column.one img{
  border: none 1rem;
  border-radius: 1rem;
}

.transplant{
  
  color: var(--brightGreen);
  border: .75rem double;
  border-radius: 1rem;
  border-color: var(--darkGreen);
}

.transplant .column.one img{
  border: none 1rem;
  border-radius: 1rem;
}

.logos{
  
  color: var(--brightGreen);
  border: .75rem double;
  border-radius: 1rem;
  border-color: var(--darkGreen);
}

.logos .two {
        padding: .75rem;
        flex-direction: column;
        align-content: center;
        justify-content: space-evenly;
        align-items: center;
        flex-wrap: wrap;
    }

.logos .two img{
  filter: invert(100%);
}

ul.column.two{
  display: flex;
}

.logos .two li{
  width: 100%;
}
   

     .logos .two li:nth-child(1) {
        width: 100%;  /* width for first logo, adjust to taste */
    }

    .logos .two li:nth-child(2) {
        width: 60%; /* more specific "powerful" width rule wins */
        margin: 0 auto;
    }

     .logos .two li:nth-child(3) {
        width: 80%;  /* width for fourth logo, adjust to taste */
    }

     .logos .two li:nth-child(4) {
        width: 90%;  /* width for fourth logo, adjust to taste */
        
    }
     
    .logos .two li:nth-child(4) img{
      filter: none !important;
    }


     .logos .two li:nth-child(5) {
        width: 55%;  /* adjust to taste: for row only */
        margin: .75rem auto; /* margin for all logos */
    }

 

   

.earthday{
  
  color: var(--brightGreen);
  border: .75rem double;
  border-radius: 1rem;
  border-color: var(--darkGreen);
}


.earthday .flex-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.50rem;
  margin: 0.25rem;
  margin-top: 1.9rem;
  
} 

 .earthday .flex-container li:nth-child(even){
    background-color: #003333;
    border: none 0.50rem;
    border-radius: 0.50rem;
   }

    .earthday .flex-container li:nth-child(odd){
    background-color: #b0e892;
    border: none 0.50rem;
    border-radius: 0.50rem;
   }

footer{
  margin: -9px;
  padding: 1rem;
  text-align: center;
  background-color: var(--darkgreen);
  color: var(--green);
  border: 1rem outset;
  border-radius: .75rem;
  border-color: var(--darkGreen);
}

footer .gwd{
  color: var(--darkGreen);
  border: none;
}


/* START OF TEXT/FONT DESIGN/SIZE */

h1 {font-size: 2.25em;}
h2 {font-size: 1.9656em;}
h3 {font-size: 1.7171em;}
h4 {font-size: 1.5em;}
h5 {font-size: 1.3104em;}
h6 {font-size: 1.1447em;}
p {font-size: 1em;}
small {font-size: 0.8736em;}
p {margin: 0.8rem 0.2rem 0.5rem 0.2rem;
}

h1 {
  font-family: "oi", 'Times New Roman', Times, serif;
  font-weight: 400;
  font-style: normal;
  margin: 0.70rem;
  line-height: 1;
}

h2,h3,h4,h5,h6,label,legend {
  font-family: "Ranchers", sans-serif;
  margin: .45rem;
}

body{
  font-family: "Andika", sans-serif; 
  margin: .55rem;
}

/* END OF TEXT/FONT DESIGN/SIZE */


/* START OF TABLET DESIGN */

@media screen and (min-width: 60rem) and (max-width: 89.9999rem) {
 
 .wrapper {
        max-width: 60rem;
        margin: 0 auto;
        
    }



    .jac-logo {
    max-width: 18rem; /* limit the width of the JAC logo */
    display: block;
    margin: 0 auto;
    margin-bottom: 2rem;
    filter: invert(0%);
    filter: drop-shadow(1px 1px 1px white);
}
header img{
  max-width: 40rem;
  display: block;
  margin: 0 auto;
}

header{
  background-image: url(bgimg/earth-globe.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 100%;
}

section {
    padding-left: calc(50% - (60rem / 2));
    padding-right: calc(50% - (60rem / 2));

    margin: 2rem; /* optional */
    border-radius: 4rem;  /* optional */
    }


    .giveaway .flex-container{
      display: flex;
      flex-direction: row;
      align-items:center;
      gap: 10px;
    }

    section.giveaway{
      position: relative;
    }

    section.giveaway::before{
      content: " ";
      display: block;
      position: absolute;
      height: 23%;
      width: 12%;
      background-image: url(bgimg/leaves-1.svg);
      background-repeat: no-repeat;
      background-size: 95%;
      transform: rotate(35deg);
      top: -13%;
      left: 94%;
    }



   section.giveaway::after{
     content: " ";
      display: block;
      position: absolute;
      height: 20%;
      width: 11%;
      background-image: url(bgimg/leaves-1.svg);
      background-repeat: no-repeat;
      background-size: 100%;
      transform: scaleX(-1) rotate(51deg);
      top: 19%;
      left: -2%;
    }

   
   

     .giveaway .column.one img{
      width: 50rem;
      margin: 2rem 2rem 2rem 2rem;
      border: ridge 1.5rem;
      border-radius: 2rem;
      border-color: var(--brightGreen);
    }

    .giveaway .column.two{
      margin-left:2rem ;
      margin-bottom: 2rem;
    }

    .macmarket{
      overflow: hidden;
      background-image: url(bgimg/vines.png), url(bgimg/vines.png);
      background-repeat: no-repeat;
      background-size: 18%, 28%;
      background-position: 111% -159%, -11% -9%;
    }
    .macmarket .column.one img{
      width: 10rem;
      height: auto;
      float: left;
      margin: 0 1rem 1rem 1rem;
    }

    .macmarket .column.two img{
      width: 10rem;
      height: auto;
      float: right;
      margin: -4px 30px 0rem 3rem;
    }

 

    .gwd .flex-container{
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      gap: 10px;
    }

    .gwd{
      background-image: url(bgimg/earth-day-person.svg), url(bgimg/earth-day-person.svg), url(bgimg/earth-day-person.svg), url(bgimg/earth-day-person.svg), url(bgimg/earth-day-person.svg),  url(bgimg/earth-day-person.svg);
      background-size: 14%;
      background-position: 60% 103%, 39% 103%, 19% 103%, -1% 103%, 81% 103%, 101% 103%;
      background-repeat: no-repeat;
    }

    .gwd .column.one img{
      width: 133rem;
      margin: -3rem 2rem 6rem -2rem;
      border: ridge 1.5rem;
      border-radius: 2rem;
      border-color: var(--brightGreen);
    }

    .gwd .column.two{
      margin-left: 1rem;
      margin-right: 2rem;
      margin-bottom: 5rem;
    }

    section.transplant{
      position: relative;
    }

    section.transplant::before{
        content:" " ;
        display:block;
        position: absolute;
        height: 17%;
        width: 10%;
        background-image: url(bgimg/earth-day-calendar-svgrepo-com.svg);
        background-size: contain;
        background-repeat: no-repeat;
        top: 2%;
        left: 25%;
        animation: slideInLeft 8s ease-in forwards;
      }

      @keyframes slideInLeft {
        from{
          transform: translateX(700%);
        }
        to {
          transform: translateX(265%);
        }
      }

    .transplant{
        background-image: url(bgimg/vines.png), url(bgimg/vines.png);
        background-repeat: no-repeat;
        background-size: 48%, 60%;
        background-position: 150% 39%, 95% 28%;
      }


      .transplant .flex-container{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
      }


    .transplant .column.one img{
      width: 50rem;
      margin: 2rem -5rem 2rem 1rem;
      border: ridge 1.5rem;
      border-radius: 2rem;
      border-color: var(--brightGreen);
    }

    .transplant .column.two{
      margin-left: 1rem;
      margin-bottom: 1rem;
    }

    section.logos{
      position: relative;
    }

    section.logos::before{
        content:" " ;
        display:block;
        position: absolute;
        height: 50%;
        width: 10%;
        background-image: url(bgimg/leaves-2.svg);
        background-size: contain;
        background-repeat: no-repeat;
        transform: rotate(275deg);
        top: -24%;
        left: -4%;
    }

   section.logos::after{
        content:" " ;
        display:block;
        position: absolute;
        height: 53%;
        width: 13%;
        background-image: url(bgimg/leaves-2.svg);
        background-size: 100%;
        background-repeat: no-repeat;
        transform: scaleX(-1) rotate(211deg);
        top: 65%;
        left: 91%;
   }

   .earthday{
    background-image: url(bgimg/earth-globe.svg), url(bgimg/vines.png);
    background-repeat: no-repeat;
    background-position: 405px 97%, 475px 36%;
    background-size: 19%, 59%;
   }
   

   /* Logos start here */

    .earthday .flex-container{
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      margin: 2rem 2rem 1rem 2rem;
    }

   .earthday .flex-container li:nth-child(odd){
    background-color: #003333;
    border: none 0.50rem;
    border-radius: 1rem;
   }

    .earthday .flex-container li:nth-child(even){
    background-color: #b0e892;
    border: none 0.50rem;
    border-radius: 1rem;
   }

    ul.column.two{
      flex-direction: row;
      padding: 0.75rem;
    }

    .logos .two li{
      width: 25% !important;
    }

    .logos .two li:nth-child(1){
      width: 28% !important;
    }

    .logos .two li:nth-child(2){
      width: 14% !important;
    }

    .logos .two li:nth-child(3){
      width: 18% !important;
    }
    .logos .two li:nth-child(4){
      width: 25% !important;
    }

    .logos .two li:nth-child(5){
      width: 15% !important;
    }

    /* logos end here */ 

    /* START OF TEXT/FONT DESIGN/SIZE */

h1 {font-size: 2.55em;}
h2 {font-size: 1.9656em;}
h3 {font-size: 1.7171em;}
h4 {font-size: 1.5em;}
h5 {font-size: 1.3104em;}
h6 {font-size: 1.1447em;}
p {font-size: 1em;}
small {font-size: 0.8736em;}
p {margin: 0.8rem 0.8rem 0.2rem 0.8rem;
}

h1 {
  font-family: "oi", 'Times New Roman', Times, serif;
  font-weight: 400;
  font-style: normal;
  margin: 0.70rem;
  line-height: 1;
}

h2,h3,h4,h5,h6,label,legend {
  font-family: "Ranchers", sans-serif;
  margin: .55rem;
}

 h2,h3 {
  filter: drop-shadow(1px 0px 5px black);
}

body{
  font-family: "Andika", sans-serif; 
  margin: .75rem;
}

/* END OF TEXT/FONT DESIGN */

/* END OF TABLET DESIGN */

}

/* START OF DESKTOP DESIGN */

@media screen and (min-width:90rem) {

.jac-logo{
  max-width: 20rem;
  display: block;
  margin: 0 auto;
  margin-bottom: 2rem;
  filter: invert(0%);
  filter: drop-shadow(1px 1px 1px white);
}

header{
  background-image: url(bgimg/earth-globe.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 100%;
}

/* START OF TEXT/FONT DESIGN/SIZE */

h1 {font-size: 3.25em;}
h2 {font-size: 2.9656em;}
h3 {font-size: 1.9656em;}
h4 {font-size: 1.5em;}
h5 {font-size: 1.3104em;}
h6 {font-size: 1.1447em;}
p {font-size: 1.15em;}
small {font-size: 0.8736em;}
p {margin: 0.8rem 0.2rem 0.5rem 0.2rem;
}

h1 {
  font-family: "oi", 'Times New Roman', Times, serif;
  font-weight: 400;
  font-style: normal;
  margin: 0.70rem;
  line-height: 1;
}

h2,h3,h4,h5,h6,label,legend {
  font-family: "Ranchers", sans-serif;
  margin: .45rem;
}

 h2,h3 {
  filter: drop-shadow(3px 2px 1px black);
}

body{
  font-family: "Andika", sans-serif; 
  margin: .55rem;
}

/* END OF TEXT/FONT DESIGN/SIZE */

main{
  display: grid;
  grid-template-columns: repeat(16,1fr);
  grid-template-rows: repeat(5, minmax(30px,auto));
  gap: 10px;
}

.giveaway{
  grid-column: 1/6;
  grid-row: 1/2;
  
}


    section.giveaway{
      position: relative;
    }

    section.giveaway::before{
      content: " ";
      display: block;
      position: absolute;
      height: 20%;
      width: 28%;
      background-image: url(bgimg/leaves-1.svg);
      background-repeat: no-repeat;
      background-size: 92%;
      transform: rotate(35deg);
      top: 19%;
      left: 81%;
    }

    section.giveaway::after{
      content: " ";
      display: block;
      position: absolute;
      height: 18%;
      width: 34%;
      background-image: url(bgimg/leaves-1.svg);
      background-repeat: no-repeat;
      background-size: 73%;
      transform:scaleX(-1) rotate(351deg);
      top: 89%;
      left: -17%;
    }

.giveaway .column.one img{
      width: 50rem;
      margin: 2rem 0rem 1rem 0rem;
      border: ridge 1rem;
      border-radius: 2rem;
      border-color: var(--brightGreen);
}

.macmarket{
  grid-column: 6/12;
  grid-row: 1/2;
  background-image: url(bgimg/vines.png);
  background-repeat: no-repeat;
  background-size: 28%;
  background-position: 60% 118%;
  
}

section.macmarket{
  position: relative;
}

section.macmarket::before{
      content: " ";
      display: block;
      position: absolute;
      height: 76%;
      width: 34%;
      background-image: url(bgimg/vines.png);
      background-repeat: no-repeat;
      background-size: 97%;
      top: -8%;
      left: -6%;
}


 .macmarket .column.one img{
      width: 9rem;
      height: auto;
      float: left;
      margin: 1rem 2rem 2rem 1rem;
    }

      .macmarket .column.two img{
      width: 9rem;
      height: auto;
      float: right;
      margin: 1rem 1rem 3rem 5rem;
    }

.gwd{
  
  grid-column: 8/14;
  grid-row: 2/3;
}

    section.gwd{
      position: relative;
    }

    section.gwd::before{
      content: " ";
      display: block;
      position: absolute;
      height: 17%;
      width: 29%;
      background-image: url(bgimg/leaves-1.svg);
      background-repeat: no-repeat;
      background-size: 86%;
      transform: rotate(35deg);
      top: 7%;
      left: 85%;
    }

    section.gwd::after{
      content: " ";
      display: block;
      position: absolute;
      height: 46%;
      width: 48%;
      background-image: url(bgimg/leaves-1.svg);
      background-repeat: no-repeat;
      background-size: 49%;
      transform:scaleX(-1) rotate(142deg);
      top: 69%;
      left: 4%;
    }

.gwd .column.one img{
      width: 50rem;
      margin: 1rem 0rem 1rem 0rem;
      border: ridge 1rem;
      border-radius: 2rem;
      border-color: var(--brightGreen);
}

.transplant{
  grid-column: 12/17;
  grid-row: 1/2;
}

 section.transplant{
      position: relative;
    }

    section.transplant::before{
        content:" " ;
        display:block;
        position: absolute;
        height: 13%;
        width: 20%;
        background-image: url(bgimg/earth-day-calendar-svgrepo-com.svg);
        background-size: contain;
        background-repeat: no-repeat;
        top: 11%;
        left: 26%;
        animation: slideInLeft 5s ease-in forwards;
      }

      @keyframes slideInLeft {
        from{
          transform: translateX(700%);
        }
        to {
          transform: translateX(250%);
        }
      }

    section.transplant::after{
      content: " ";
      display: block;
      position: absolute;
      height: 24%;
      width: 34%;
      background-image: url(bgimg/leaves-1.svg);
      background-repeat: no-repeat;
      background-size: 97%;
      top: 89%;
      left: 72%;
    }

.transplant .column.one img{
      width: 50rem;
      margin: 1rem 0rem 1rem 0rem;
      border: ridge 0.75rem;
      border-radius: 2rem;
      border-color: var(--brightGreen);
}

.logos{
  grid-column: 14/17;
  grid-row: 2/3;
  background-image: url(bgimg/vines.png), url(bgimg/vines.png);
  background-repeat: no-repeat;
  background-size: 123%, 115%;
  background-position: 97px -47%, -36px 117%;
}




 .earthday .flex-container{
      
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      margin: 3rem 1rem 1rem 1rem;
    }

  .earthday .flex-container li:nth-child(even){
    background-color: #003333;
    border: none 0.50rem;
    border-radius: 1rem;
   }

  .earthday .flex-container li:nth-child(odd){
    background-color: #b0e892;
    border: none 0.50rem;
    border-radius: 1rem;
   }

    ul.column.two{
      display: grid;
      flex-direction: column;
      padding: 0.75rem;
      display: block;
      
    }

    .logos .two li{
      width: 100% !important;
    }

    .logos .two li:nth-child(1){
      width: 100% !important;
      padding-bottom: 3rem;
     
    }

    .logos .two li:nth-child(2){
      width: 70% !important;
      padding-bottom: 3rem;
    }

    .logos .two li:nth-child(3){
      width: 100% !important;
      padding-bottom: 3rem;
    }
    .logos .two li:nth-child(4){
      width: 110% !important;
      padding-bottom: 3rem;
     
    }

    .logos .two li:nth-child(5){
      width: 90% !important;
    }


section.earthday{
  position: relative;
}

section.earthday::before{
      content: " ";
      display: block;
      position: absolute;
      height: 100%;
      width: 100%;
      background-image: url(bgimg/leaves-2.svg);
      background-repeat: no-repeat;
      background-size: 20%;
      top: -8%;
      left: 92%;

}


.earthday{
     grid-column: 1/8;
     grid-row: 2/3;
     background-image: url(bgimg/earth-day-person.svg), url(bgimg/earth-day-person.svg), url(bgimg/earth-day-person.svg), url(bgimg/earth-day-person.svg);
     background-size: 25%;
     background-position: 97% 100%, 66% 100%, 34% 100%, 1% 100%;
     background-repeat: no-repeat;
}








}


/* End of DESKTOP DESIGN */