/* COLOR PALETTE */

:root {
  --white: #dcd8c4;
  --black: #28190700;
  --brown: #433F09;
  --red: #8C3214;
  --orange: #BE6E1E;
  --yellow: #F0D278;
  --green: #968C14;
  --blue: #0A0000;

}
header {
  background-color: #281907;
}
main {
background-color:#28190787;  

}
body {
background-color: #281907;
background-image:url(bgimg/andrey-grodz-RwNvbJfw81M-unsplash.jpg);
}

section {
  margin: none;
  padding: 1rem;
  color: #28190700;
}

section {margin: none;
        padding: 1rem;}
figure {margin: 0;}


#jac-logo {
  width: 15rem;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
.earthday .flex-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin: 0.25rem;
  gap: 0.25rem;;
}

h1, h2, h3 {
font-family: "sunshine", sans-serif;
font-weight: 400;
font-style: normal;
color:#DCD8C4;
}

h1 {
font-size: 5rem;
color:#BE6E1E;
display: flex;
align-content: center;
justify-content: center;
}

h2 {
font-size: 2.488rem;
color:#DCD8C4;
}

h3 {
font-size: 2.074rem;
color:#DCD8C4;
margin-bottom:1rem;
}

p {
font-family: "crassula", sans-serif;
font-variation-settings: "weight" 400;
color:#DCD8C4;
margin-top:1rem;
}

header {
padding:2rem;
}

footer {
color:#ffffff;
}
    .giveaway {
        background-color: var(--black);
    }

    .giveaway p {
        color: var(--black);
    }

    .macmarket {
    background-color: var(--black);
    }

    .gwd {
    background-color: var(--black);
    }

    .transplant {
    background-color: var(--black);
    }

    .logos {
    background-color: var(--black);
    }

    .earthday {
    background-color: var(--black);
    }     

    .macmarket h2,
    .macmarket h3,
    .earthday h2,
    .earthday h3 {
    color: var(--white);   
    }

 /* PHOTOS */
.macmarket picture.column.one {
  width: 10rem;
  display: block;
  float: left;
  margin-right: 1rem;
}

.fblink {
  width: 6rem;
  display: block;
  float: right;
  margin-left: 1rem;
}

/* LOGOS */
.logos .two img {
  filter: invert(100%)
}
.logos .two li:nth-child(4) img {
filter: none !important;
}

/* FLEXBOX */
ul.column.two {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* LOGOS WIDTH */
.logos .two li {
  margin: 0;
  width: 100%;
}
.logos .two li:nth-child(1) {
  width: 80%;
}
.logos .two li:nth-child(2) {
  width: 50%;
  margin-top: 2rem;
}
.logos .two li:nth-child(3) {
  width: 65%;
}

/* Bear */
    section.giveaway::before {
        content: " ";  /* the pseudo-element cannot be empty for this trick to work */
        display: block;
        position: absolute;
        height: 15rem; /* use any size you need */
        width: 15rem; /* use any size you need */
        background-image: url(bgimg/Bear.svg);  /* place image in the css/bgimg folder as they are decorative only */
        background-size: contain;
        background-repeat: no-repeat;
        top: 2.5rem;
        left: 76rem;
    }
/* Raven */
    section.macmarket::before {
        content: " ";  /* the pseudo-element cannot be empty for this trick to work */
        display: block;
        position: absolute;
        height: 15rem; /* use any size you need */
        width: 15rem; /* use any size you need */
        background-image: url(bgimg/Raven.svg);  /* place image in the css/bgimg folder as they are decorative only */
        background-size: contain;
        background-repeat: no-repeat;
        top: 35rem;
        left: 50rem;
    }

/* Footer svg */
footer::before {
          content: " ";  /* the pseudo-element cannot be empty for this trick to work */
        display: block;
        position: absolute;
        height: 20rem; /* use any size you need */
        width: auto; /* use any size you need */
        background-image: url(bgimg/bearfooter.svg);  /* place image in the css/bgimg folder as they are decorative only */
        background-size: cover;
        background-repeat: no-repeat;
        background-color: --;
        left: -1rem;
        right: -10rem;
        bottom:auto;
 /*  */
}

/* All Desktop Styles Go In The Media Query Below */

@media screen and (min-width: 60rem) and (max-width: 89.9999rem) {
 
footer::before {
          content: " ";  /* the pseudo-element cannot be empty for this trick to work */
        display: block;
        position: absolute;
        height: 20rem; /* use any size you need */
        width: auto; /* use any size you need */
        background-image: url(bgimg/bearfooter.svg);  /* place image in the css/bgimg folder as they are decorative only */
        background-size: cover;
        background-repeat: no-repeat;
        background-color: --;
        left: -1rem;
        right: -10rem;
        bottom:auto;
 /*  */
}
 .wrapper {
        max-width: 60rem;
        margin: 0 auto;
    }

ul.column.two {
  flex-direction: row;
  padding: 1rem;
}
.logos .two li:nth-child(5) {
  width: 65%;
}
 section {
    padding-left: calc(50% - (960px / 2));
    padding-right: calc(50% - (960px / 2));
    margin: 2rem;
    border-radius: 4rem;
  }
ul.column.two {
  flex-direction: row;
  padding: 1rem;
}
} /* Never delete closing media query bracket */

@media screen and (min-width: 90rem) {
  main { 
  display:grid;
  grid-template-columns: repeat(16, fr);
  grid-template-rows: repeat(5, minmax(30px, auto));
  }

  /* Footer svg */
footer::before {
          content: " ";  /* the pseudo-element cannot be empty for this trick to work */
        display: block;
        position: absolute;
        height: 40rem; /* use any size you need */
        width: auto; /* use any size you need */
        background-image: url(bgimg/bearfooter.svg);  /* place image in the css/bgimg folder as they are decorative only */
        background-size: cover;
        background-repeat: no-repeat;
        background-color: --;
        left: -1rem;
        right: -10rem;
        bottom:auto;
 /*  */
}
 
  .giveaway {
    grid-column: 1;
    grid-row: 1;
  }

  .macmarket {
    grid-column: 2/4;
    grid-row: 1;
  }
  .gwd
  {
    grid-column: 1/2;
    grid-row: 2;
  }
  .transplant
  {
    grid-column: 4;
    grid-row: 1;
  }
    .logos
  {
    grid-column: 2;
    grid-row: 2;
  }
  .earthday
  {
    grid-column: 3;
    grid-row: 2;
  }
}