@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
@import url("https://use.typekit.net/ulo1czg.css");

.earthday .flex-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.earthday .flex-container img {
    width: 100%;
    padding: 0.25rem;
}

body{
 
  background-color: #FFFBE4;
}

header {
  background-image: url(../img/background.svg);
  background-size: cover;       

 background-color: #fcd12a; /* Bauhaus yellow */
    padding: 2rem 1rem;
    text-align: center;
    border-bottom: 5px solid #e10600; /* Bauhaus red */
  }

  #jac-logo2 {
    max-width: 200px;
    display: block;
    margin: 0 auto 1rem auto;
  }

  header h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    color: #1a1a1a; /* Black */
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 1px;
  }
/*body{
  background-image: url(../img/background.svg);
}*/

@media screen and (max-width: 60rem){
  .giveaway {
    position: relative;
    z-index: 1;
    color: white;
    padding: 4rem 1.5rem;
    background-color: #FFFDF2;
    border: solid 5px #111;
    box-shadow: 6px 6px #0077ff;
  }
  
    .giveaway::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url(../img/blue.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -2;
  }
  
    .giveaway::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #e6f1ffba; /* or any color */
    z-index: -1;
  }
  
  
  
  .macmarket {
    position: relative;
    z-index: 1;
    color: white;
    color: white;
    padding: 4rem 1.5rem;
    background-color: #FFFDF2;
    border: solid 5px #111;
    box-shadow: 6px 6px #FF0015;
  }
    .macmarket::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background-image: url(../img/red.svg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      z-index: -2;
    }
    
    .macmarket::after {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: #ffd6daca; /* or any color */
      z-index: -1;
    }
  
  .gwd {
      position: relative;
      z-index: 1;
      color: white;
      color: white;
    padding: 4rem 1.5rem;
    background-color: #FFFDF2;
    border: solid 5px #111;
    box-shadow: 6px 6px #ffcc00;
    }
    .gwd::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-image: url(../img/yellow.svg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        z-index: -2;
      }
      
    .gwd::after {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: #fff0b2b9; /* or any color */
        z-index: -1;
      }
  
  .transplant {
        position: relative;
        z-index: 1;
        color: white;
        padding: 4rem 1.5rem;
        background-color: #FFFDF2;
        border: solid 5px #111;
        box-shadow: 6px 6px #0077ff;
      }
      
    .transplant::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-image: url(../img/blue.svg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        z-index: -2;
      }
      
    .transplant::after {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: #e6f1ffba; /* or any color */
        z-index: -1;
      }
  
  
  
  
  .logos {
        position: relative;
        z-index: 1;
        color: white;
        padding: 4rem 1.5rem;
        background-color: #FFFDF2;
        border: solid 5px #111;
        box-shadow: 6px 6px #FF0015;
      }
    .logos::before {
          content: "";
          position: absolute;
          top: 0; left: 0; right: 0; bottom: 0;
          background-image: url(../img/red.svg);
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
          z-index: -2;
        }
        
    .logos::after {
          content: "";
          position: absolute;
          top: 0; left: 0; right: 0; bottom: 0;
          background-color: #ffd6daca; /* or any color */
          z-index: -1;
        }
  
  .earthday {
          position: relative;
          z-index: 1;
          color: white;
          padding: 4rem 1.5rem;
    background-color: #FFFDF2;
          border: solid 5px #111;
          box-shadow: 6px 6px #ffcc00;
        }
    .earthday::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-image: url(../img/yellow.svg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            z-index: -2;
          }
          
    .earthday::after {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-color: #fff0b2b9; /* or any color */
            z-index: -1;
          }

          .giveaway img {
            border: solid 5px #111;
            box-shadow: 6px 6px #0077ff;
          }
          
          .gwd img {
            border: solid 5px #111;
            box-shadow: 6px 6px #ffcc00;
          }
          
          .transplant img {
            border: solid 5px #111;
            box-shadow: 6px 6px #0077ff;
          }
          
          .earthday img {
            border: solid 5px #111;
        box-shadow: 6px 6px #ffcc00;
          }
      }



  
  section h2,
  section h3 {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
   
  }
  
  section h2 {
    font-size: 2.2rem;
    color: #e10600; 
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }
  
  section h3 {
    font-size: 1.5rem;
    color: #1a1a1a;
    margin-bottom: 2rem;
  }
  
  @media screen and (min-width: 60rem){
.giveaway img {
  border-top: 5px solid #ffffff;
  border-left: 5px solid #ffffff;
  border-right: 5px solid #1a1a1a;
  border-bottom: 5px solid #1a1a1a;
}

.gwd img {
  border-top: 5px solid #ffffff;
  border-left: 5px solid #ffffff;
  border-right: 5px solid #1a1a1a;
  border-bottom: 5px solid #1a1a1a;
}

.transplant img {
  border-top: 5px solid #ffffff;
  border-left: 5px solid #ffffff;
  border-right: 5px solid #1a1a1a;
  border-bottom: 5px solid #1a1a1a;
}

.earthday img {
  border-top: 5px solid #ffffff;
  border-left: 5px solid #ffffff;
  border-right: 5px solid #1a1a1a;
  border-bottom: 5px solid #1a1a1a;
}
.giveaway {
  position: relative;
  z-index: 1;
  color: white;
  padding: 4rem 1.5rem;
  background-color: #FFFDF2;
  border: solid 5px #111;
  box-shadow: 6px 6px #0077ff;
  border-radius: 0px 12px 0px 12px;

}

  .giveaway::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url(../img/blue.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -2;
  border-radius: 0px 12px 0px 12px;

}

  .giveaway::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #e6f1ffba; /* or any color */
  z-index: -1;
  border-radius: 0px 12px 0px 12px;

}



.macmarket {
  position: relative;
  z-index: 1;
  color: white;
  color: white;
  padding: 4rem 1.5rem;
  background-color: #FFFDF2;
  border: solid 5px #111;
  box-shadow: 6px 6px #FF0015;
  border-radius: 0px 12px 0px 12px;

}
  .macmarket::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url(../img/red.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: -2;
    border-radius: 0px 12px 0px 12px;

  }
  
  .macmarket::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ffd6daca; /* or any color */
    z-index: -1;
    border-radius: 0px 12px 0px 12px;

  }


.gwd {
    position: relative;
    z-index: 1;
    color: white;
    color: white;
  padding: 4rem 1.5rem;
  background-color: #FFFDF2;
  border: solid 5px #111;
  box-shadow: 6px 6px #ffcc00;
  border-radius: 0px 12px 0px 12px;

  }
  .gwd::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background-image: url(../img/yellow.svg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      z-index: -2;
      border-radius: 0px 12px 0px 12px;

    }
    
  .gwd::after {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: #fff0b2b9; /* or any color */
      z-index: -1;
    }




.transplant {
      position: relative;
      z-index: 1;
      color: white;
      padding: 4rem 1.5rem;
      background-color: #FFFDF2;
      border: solid 5px #111;
      box-shadow: 6px 6px #0077ff;
      border-radius: 0px 12px 0px 12px;

    }
    
  .transplant::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background-image: url(../img/blue.svg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      z-index: -2;
      border-radius: 0px 12px 0px 12px;

    }
    
  .transplant::after {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: #e6f1ffba; /* or any color */
      z-index: -1;
      border-radius: 0px 12px 0px 12px;

    }




.logos {
      position: relative;
      z-index: 1;
      color: white;
      padding: 4rem 1.5rem;
  background-color: #FFFDF2;
      border: solid 5px #111;
      box-shadow: 6px 6px #FF0015;
      border-radius: 0px 12px 0px 12px;

    }
  .logos::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-image: url(../img/red.svg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        z-index: -2;
        border-radius: 0px 12px 0px 12px;

      }
      
  .logos::after {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: #ffd6daca; /* or any color */
        z-index: -1;
        border-radius: 0px 12px 0px 12px;

      }



.earthday {
        position: relative;
        z-index: 1;
        color: white;
        padding: 4rem 1.5rem;
  background-color: #FFFDF2;
        border: solid 5px #111;
        box-shadow: 6px 6px #ffcc00;
        border-radius: 0px 12px 0px 12px;
      }
  .earthday::before {
          content: "";
          position: absolute;
          top: 0; left: 0; right: 0; bottom: 0;
          background-image: url(../img/yellow.svg);
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
          z-index: -2;
          border-radius: 0px 12px 0px 12px;
        }
        
  .earthday::after {
          content: "";
          position: absolute;
          top: 0; left: 0; right: 0; bottom: 0;
          background-color: #fff0b2b9; /* or any color */
          z-index: -1;
          border-radius: 0px 12px 0px 12px;
        }


  }


  p{
    font-family: 'source sans pro', sans-serif;
    text-align: left;
    font-size: 1rem;
    margin-bottom: 1rem;
  }

  .fblink:hover {
    background: yellow;
  }

  .fblink img {
    max-width: 80px;
    height: auto;
    display: block;
    margin-top: 1rem;
    box-shadow: none;
    border: none;
    border-radius: 45px;
}
.fblink img:hover {
  transform:scale(1.1);
}

  section img {
    width: 100%;
    max-width: 500px;
    /*border: 4px solid #1a1a1a;
    box-shadow: 6px 6px 0 #fcd12a; */
    margin-bottom: 1rem;
  }
  
  section .column.two {
    max-width: 700px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    color: #333333;
    line-height: 1.6;
    text-align: center;
  }
  
 .logos img {
    max-width: 8rem;
 }

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

    section {
        width: 60rem; 
        /* use the width you prefer for the design, but no wider than the min-width set above */

        margin: 3rem auto;
        /* adjust vertical spacing with the first value, 
        center the section tag with auto left/right margins */
    }

    .flex-container {
        display: flex;  
        /* creates two columns */

        column-gap: 1rem;
        /* space between the columns */
    }

    .flex-container picture, 
    .flex-container > p, 
    .flex-container > div {
        flex-basis: 50%; 
        /* makes each column 50% wide */

        /* > means "direct child of", meaning first level descendent: child, not grandchildren */ 
        /* see https://www.w3schools.com/cssref/css_ref_combinators.php */
    }

    .macmarket .flex-container,
    .transplant .flex-container {
    /*  select "every other" section tag,
        ex: first and third */


        flex-direction: row-reverse;
        /* swap left and right columns */
    }
    

    } /* always comment the closing media query tag
         so you don't delete it by accident */

footer {
  background-image: url(../img/background.svg);
  background-size: cover;       

  background-color: #fcd12a; /* light neutral background */
  color: #111;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  border-top: 8px solid #e63946; /* red accent line */
  text-align: center;
}
footer .gwd  {
  background: none;
    background-color: none;
    color: black;
    border: none;
    background-image: none;
    padding: 0rem;
    box-shadow: none;
}