/* ===================================== COLOR PALETTE ===================================== */ 

:root { 
--darkgreen: #386641; 
--darkgreen1: #38664195;
--medium-green: #6a994e;
--medium-green1: #6a994e7f;  
--light-green: #a7c957; 
--light-green1: #a7c95782; 
--cream: #f2e8cf; 
--red: #bc4749;
--red1: #bc474982; 
}  

 

/* ===================================== FONTS ===================================== */ 

h1, h2 { 
font-family: "Pacifico", cursive; 
font-weight: 400; 
font-style: normal; 
margin: 2rem; /*top, right, bottom, left*/ 
padding: 2rem; /*top, right, bottom, left*/ 
text-align: center;
} /*heading text*/ 

h3, h4, h5, h6 { 
font-family: "Inconsolata", monospace; 
font-weight: 700; 
font-style: normal; 
margin: 1rem; 
padding: 1rem; 
text-align: center; 
} /* subheadings */ 


body {  
font-family: "Inconsolata", monospace; 
font-weight: 200; 
font-style: normal; 
margin: 1rem 0 1rem 0; /*top, right, bottom, left*/ 
padding: 1rem 0 2rem 0; /*top, right, bottom, left*/ 
} /*body text*/ 

/* ===================================== TYPOGRAPHY ===================================== */ 
h1 {  
font-size: 3em;  
margin: .5rem; 
padding: .5rem; 
text-align: center;
} 

h2 {  
font-size: 2.6117em; 
margin: .5rem; 
padding: .5rem; 
text-align: center;
} 

h3 {  
font-size: 2.2736em;
margin: .5rem; 
padding: .5rem;  
text-align: center;
}  

h4 {  
font-size: 1.9793em;  
margin: .5rem; 
padding: .5rem; 
text-align: center;
} 

 h5 { 
font-size: 1.723em;   
margin: .5rem; 
padding: .5rem; 
text-align: center;
} 

p {  
font-size: 1.5em; 
} 

small {  
font-size: 1.3058em;
margin: .5rem; 
padding: .5rem;  
} 

/* ===================================== INDEX ===================================== */ 
.index{ 
background-image: url(bgimg/bg1.jpg); 
background-size: cover; 
background-attachment: fixed; 
background-repeat: no-repeat; 
} 

/* ================= IMGs ====================== */ 
img{
  margin: 1rem 0.5rem 1rem 0.5rem;
  width: 100%;
  height: auto;
}

.container {
  position: relative;
  width: 100%;}
  
.overlay {
  position: absolute;
  bottom: 0;
  left: 100%;
  right: 0;
  background-color: var(--red1);
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: 1s ease;
  color: var(--cream);
}

.container:hover .overlay {
  width: 100%;
  left: 0;
}

.text {
  color: var(--cream);
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;}

/* ===================================== HEADER ===================================== */ 
header{ 
text-align: center; 
margin: 0 2rem 2rem 2rem; 
padding-bottom: 1rem; 
background-color: var(--medium-green); 
border-radius: 25px; 
border: 5px solid var(--darkgreen); 
}  

#jac-logo { 
display: block;  
width: 10rem; 
height: auto; 
margin: 1rem auto; 
}  
/* ===================================== MAIN ===================================== */
main{ 
padding: 1rem; 
background-color: var(--cream); 
margin: 1rem; 
border-radius: 5rem;
border: 5px solid var(--red);
} 

/* ========================= Giveaway ========================= */
.giveaway{
  background-color: var(--darkgreen1);
  padding: 3rem;/*top, right, bottom, left*/ 
  border-radius: 10rem;
  border: 5px solid var(--darkgreen);
}

/* ========================= Mac Market ========================= */
.macmarket{
  background-color: var(--medium-green1);
  padding: 3rem;/*top, right, bottom, left*/ 
  border-radius: 10rem;
  border: 5px solid var(--medium-green);
}

.macmarket-logo{
  display: block;
  width: 40%;
  margin: auto;
}

.fb-logo{
  display: block;
  width: 40%;
}

.facebook{
  display: flex;
}

/* ========================= GWD ========================= */
.gwd{
  background-color: var(--light-green1);
   padding: 3rem;/*top, right, bottom, left*/ 
  border-radius: 10rem;
  border: 5px solid var(--light-green);
}

/* ========================= Transplant ========================= */
.transplant{
  background-color: var(--darkgreen1);
    padding: 3rem;/*top, right, bottom, left*/ 
  border-radius: 10rem;
  border: 5px solid var(--darkgreen);
}

.agora{
  margin: 1rem;
}

/* ========================= Logos ========================= */

.logos{
  background-color: var(--medium-green1);
    padding: 3rem;/*top, right, bottom, left*/ 
  border-radius: 10rem;
  border: 5px solid var(--medium-green);
}

.logos .column-two{
display: grid;
      grid-template-columns: 1fr 1fr  1fr 1fr; /*fraction of available space*/
      gap: 0.25rem;
      margin: 0.25rem;
}
/* ========================= Earth Day Pictures ========================= */
.earthday{
  background-color: var(--light-green1);
   padding: 3rem;/*top, right, bottom, left*/ 
  border-radius: 10rem;
  border: 5px solid var(--light-green);
}

.earth-day-text{
font-size: 1.4359em;  
margin: 1rem; 
padding: .5rem; 
text-align: left;
}

.earthday .flex-container{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr; /*fraction of available space*/
      gap: 0.25rem;
      margin: 0.25rem;
    }

/* ===================================== ASIDE =====================================*/

/* ===================================== FOOTER ===================================== */
footer{ 
text-align: center; 
margin: 0 2rem 2rem 2rem; 
padding-bottom: 1rem; 
background-color: var(--medium-green); 
border-radius: 25px; 
border: 5px solid var(--darkgreen); 
} 

/* ===================================== MEDIA QUERY ===================================== */
/* All Desktop Styles Go In The Media Query Below */

    @media screen and (min-width: 60rem) and (max-width: 89.9999rem) {
   
       /* =================== Tablet Media Quiery: Index =================== */
      section {
            padding-left: calc(50% - (60rem / 2));
            padding-right: calc(50% - (60rem / 2));

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

            /* =================== Tablet Media Quiery: Header =================== */
            header img {
    max-width: 40rem; /* limit the width of the JAC logo */
    display: block;
    margin: 0 auto;
}

 /* =================== Tablet Media Quiery: Main =================== */
  /* =============== Tablet Media Quiery: Giveaway =============== */
  
  .giveaway {
        position: relative; /* enables accurate absolute positioning for the pseudo-element */
    } 

    .transplant-text {
      margin: 1rem;
      padding: 1rem;
    }

.giveaway .flex-container{
  display: flex;
}
  /* =============== Tablet Media Quiery: Mac Market =============== */

  .macmarket-logo{
  display: block;
  width: 20%;
  margin: auto;
}

  .fb-link{
    display: flex;
  }

  .fblink{
width: 20%;
  }
 
  /* =============== Tablet Media Quiery: GWD =============== */

  .gwd .flex-container {
     display: grid;
     grid-template-columns: repeat(2, 1fr); /* 16 columns each equal to one fraction of the available space */
     grid-template-rows: repeat(2, minmax(40px, auto)); /* 4 rows for 4 sections*/
     gap: 2rem;  /* both row and column gap */
     height: fit-content;
   }

   .gwd .column-one{
    grid-column: 1/1;
    grid-row: 1/1;
   }

   .gwd .column-two{
    grid-column: 2/2;
    grid-row: 1/1;
   }

   .gwd .column-three{
    grid-column: 1/1;
    grid-row: 2/2;
   }
   
  

  /* =============== Tablet Media Quiery: Transplant =============== */
  /* =============== Tablet Media Quiery: Logos =============== */
 .logos .two {
     display: grid;
     grid-template-columns: repeat( 5, 1fr);
     grid-template-rows: repeat(1, minmax(40px, auto)); /* 4 rows for 4 sections*/
     gap: 2rem;  /* both row and column gap */
   }
  /* =============== Tablet Media Quiery: Earth Day =============== */
.earthday .flex-container {
    grid-template-columns: repeat(6, 1fr);  /* 6 columns of 1fr each */
    /* because we are on a bigger screen, we can reduce the size of the icons */
    }

       /* INDEX */
  
  /* MAIN */
  /* ASIDE */
  /* FOOTER */

    } /* close media query */

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

  

} /* Never delete closing media query bracket */

 /* ============================================== Desktop Media Quiery ================================ */
 @media screen and (min-width: 90rem){

  section {
     padding-left: unset;
     padding-right: unset;
     margin: 0;
 } 

 /* =================== Desktop Media Quiery: Index =================== */
 .wrapper {
        max-width: 80rem;
        margin: 0 auto;
    }

  /* =================== Desktop Media Quiery: Header =================== */

 /* =================== Desktop Media Quiery: Main =================== */
 
 main {
     display: grid;
     grid-template-columns: repeat(16, 1fr); /* 16 columns each equal to one fraction of the available space */
     grid-template-rows: repeat(4, minmax(40px, auto)); /* 4 rows for 4 sections*/
     gap: 2rem;  /* both row and column gap */
     height: fit-content;
   }
   
      /* =============== Desktop Media Quiery: Giveaway =============== */
      .giveaway {
     grid-column: 1/7;
     grid-row: 2/3;
     padding: 1rem 15% 1rem 15%;  /* note that percentages scale better when the window width changes */
     }
      /* =============== Desktop Media Quiery: Mac Market =============== */
      .macmarket {
     grid-column: 1/13;
     grid-row: 1/2;
     padding: 1rem 8.5% 1rem 8.5%;  /* note that percentages scale better when the window width changes */
     }

     .mac-market{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(3, minmax(40px, auto));
      gap: 2rem;
     }

     .mcgill-text{
      grid-column: 1/2;
      grid-row:1/2 ;
     }

     .mac-market-logo{
      grid-column: 2/2;
     grid-row: 1/2;
     padding: 1rem 8.5% 1rem 8.5%;  /* note that percentages scale better when the window width changes */
     }

.macmarket-img{
  grid-column: 1/2;
  grid-row: 2/2;
}

.macmarket-column-two{
  grid-column: 2/2;
  grid-row: 2/2;
}

.fb-logo{
  display: block;
  width: 40%;
}
.fb-link{
  grid-column: 2/2;
  grid-row: 3/3;
}

.fb-text{
  grid-column: 1/2;
  grid-row: 3/3;
}
     
      /* =============== Desktop Media Quiery: GWD =============== */
      .gwd {
     grid-column: 2/13;
     grid-row: 3/4;
     padding: 1rem 8.5% 1rem 8.5%;  /* note that percentages scale better when the window width changes */
     }

     .gwd .flex-container {
     display: grid;
     grid-template-columns: repeat(2, 1fr); /* 16 columns each equal to one fraction of the available space */
     grid-template-rows: repeat(2, minmax(40px, auto)); /* 4 rows for 4 sections*/
     gap: 2rem;  /* both row and column gap */
     height: fit-content;
   }

   .gwd .column-one{
    grid-column: 1/1;
    grid-row: 1/1;
   }

   .gwd .column-two{
    grid-column: 2/2;
    grid-row: 1/1;
   }

   .gwd .column-three{
    grid-column: 1/1;
    grid-row: 2/2;
   }
      /* =============== Desktop Media Quiery: Transplant =============== */
      .transplant {
     grid-column: 7/13;
     grid-row: 2/3;
     padding: 1rem 8.5% 1rem 8.5%;  /* note that percentages scale better when the window width changes */
     }
      /* =============== Desktop Media Quiery: Logos =============== */
       .logos {
     grid-column: 1/17;
     grid-row: 4/5;
     padding: 1rem 8.5% 1rem 8.5%;  /* note that percentages scale better when the window width changes */
     }

     .logos {
    position: relative;
}

.logos .two li:nth-child(1) {
    top: 0%;
    left: 0%;
    width: 10rem;
}

.logos .two li:nth-child(2) {
     top: 0%;
    left: 0%;
    width: 10rem;
}

.logos .two li:nth-child(3) {
     top: 0%;
    left: 0%;
    width: 10rem;
}

.logos .two li:nth-child(4) {
    top: 0%;
    left: 0%;
    width: 10rem;
}

.logos .two li:nth-child(5) {
     top: 0%;
    left: 0%;
    width: 10rem;
}

.logos .two {
     display: grid;
     grid-template-columns: repeat( 5, 1fr);
     grid-template-rows: repeat(1, minmax(40px, auto)); /* 4 rows for 4 sections*/
     gap: 2rem;  /* both row and column gap */
   }

      /* =============== Desktop Media Quiery: Earth Day =============== */
       .earthday {
     grid-column: 13/17;
     grid-row: 1/4;
     padding: 3rem 8.5% 3rem 8.5%;  /* note that percentages scale better when the window width changes */
     }

     .earth-day-h2{
      font-size: 1.6em;
     }

     .earth-day-h3{
      font-size: 1.4em;
     }

     .earthday .flex-container {
      grid-template-columns: repeat(1, 1fr) ;
      width: 55%;
      align-items: center;
     }
   /* =================== Desktop Media Quiery: Pseudo Elements =================== */

    .header::before {
        content: " ";  /* the pseudo-element cannot be empty for this trick to work */
        display: block;
        position: absolute;
        height: 8rem; /* use any size you need */
        width: 8rem; /* use any size you need */
        background-image: url(bgimg/radish-sticker.svg);  /* place image in the css/bgimg folder as they are decorative only */
        background-size: cover;
        background-repeat: no-repeat;
        top: 3rem;
        left: 30rem;
    }  

    .header::after {
        content: " ";  /* the pseudo-element cannot be empty for this trick to work */
        display: block;
        position: absolute;
        height: 8rem; /* use any size you need */
        width: 8rem; /* use any size you need */
        background-image: url(bgimg/radish-sticker.svg);  /* place image in the css/bgimg folder as they are decorative only */
        background-size: cover;
        background-repeat: no-repeat;
        top: 3rem;
        left: 70rem;
    }  

    .giveaway::before {
        content: " ";  /* the pseudo-element cannot be empty for this trick to work */
        display: block;
        position: absolute;
        height: 25rem; /* use any size you need */
        width: 25rem; /* use any size you need */
        background-image: url(bgimg/tomato-sticker.svg);  /* place image in the css/bgimg folder as they are decorative only */
        background-size: cover;
        background-repeat: no-repeat;
        top: 86rem;
        left: -5rem;
    }  

    .giveaway::after {
        content: " ";  /* the pseudo-element cannot be empty for this trick to work */
        display: block;
        position: absolute;
        height: 25rem; /* use any size you need */
        width: 25rem; /* use any size you need */
        background-image: url(bgimg/tomato-sticker.svg);  /* place image in the css/bgimg folder as they are decorative only */
        background-size: cover;
        background-repeat: no-repeat;
        top: 126rem;
        left: 90rem;
    }  

    .macmarket::after {
        content: " ";  /* the pseudo-element cannot be empty for this trick to work */
        display: block;
        position: absolute;
        height: 12rem; /* use any size you need */
        width: 12rem; /* use any size you need */
        background-image: url(bgimg/strawberry-sticker.svg);  /* place image in the css/bgimg folder as they are decorative only */
        background-size: cover;
        background-repeat: no-repeat;
        top: 70rem;
        left: 50rem;
    }  

    .logos::after {
        content: " ";  /* the pseudo-element cannot be empty for this trick to work */
        display: block;
        position: absolute;
        height: 8rem; /* use any size you need */
        width: 8rem; /* use any size you need */
        background-image: url(bgimg/tulip-sticker.svg);  /* place image in the css/bgimg folder as they are decorative only */
        background-size: cover;
        background-repeat: no-repeat;
        top: -3rem;
        left: 65rem;
    }  

    }