.index {
background-image: url(bgimg/heather-shevlin.jpg);
background-size: 100%;
background-attachment: fixed;
}

:root {
  --deer: #b78356b4;
  --black: #000;
  --deepchamp: #fbdfa293;
  --sepia: #783719e3;
  --bistre: #452216;
--darkblue: #006687;
--stem: #8db3a4df;
--champagne: #e1bf6f;
--coffee: #a15712;
}
h1 {
  font-family: "Andika", sans-serif;
  font-weight: 700;
  font-style: normal;
  margin: 1rem;
  font-size: 6rem;
}
.animate__animated animate__rubberBand {
  display: inline-block;
  margin: 0 0.5rem;
  animation: rubberBand; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}
h2 {
  font-family: "Andika", sans-serif;
  font-weight: 700;
  font-style: normal;
  margin: 1rem;
  font-size: 3rem;
}
h3{
  font-family: "Lexend Deca", sans-serif;
  font-weight: 700;
  font-style: normal;
  margin: 1rem;
  line-height: 2rem;
  font-size: 1.3rem;
}
h4, p {
  font-family: "Lexend Deca", sans-serif;
  font-weight: 500;
  font-style: normal;
  margin: 1rem;
  line-height: 1.3rem;
}
section {
        margin: 2rem auto;
        padding: 1rem;
        background-color: var(--deer);
        text-align: center;
        margin-left: .5rem;
        margin-right: .5rem;
 }

header{
        padding: 1rem;
        text-align: center;
        color:var(--bistre);
        background-color: rgba(156, 73, 0, 0.2);
        backdrop-filter: blur(10px);
        margin: 1rem;
        border-radius: 32px;
    }
.earthday{
    background-color: var(--bistre);
    color:var(--champagne);
}

.transplant{
    background-color: var(--sepia);
    color: var(--champagne);
box-sizing: border-box
}
.transplant img{
  width: 100%; height: auto;
}
.giveaway{
    background-color: var(--sepia);
    color: var(--champagne);
}
.gwd{
         background-color: var(--deepchamp);
        color: var(--coffee);
}
    .giveaway {border-radius: 48px 0;}
    .macmarket {border-radius: 32px;}
    .gwd {border-radius: 0px 48px ;}
    .transplant {border-radius: 48px 0;}
.macmarket{
color: var(--bistre)
}
.logos .two li {
        margin: .5rem auto; /* margin for all logos */
    }

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

.logos li {
        width: 100%; /* set default width of logos so they appear on screen */
    }

 .logos .two li:nth-child(1) {
        width: 40%;  /* width for first logo, adjust to taste */
    }
.logos .two li:nth-child(2) {
        width: 30%; /* more specific "powerful" width rule wins */
    }
 .logos .two li:nth-child(3) {
        width: 40%;  /* width for first logo, adjust to taste */
    }
.logos .two li:nth-child(4) {
        width: 40%;  /* width for fourth logo, adjust to taste */
    }
    .logos .two li:nth-child(5) {
        width: 30%;  /* width for fourth logo, adjust to taste */
    }

.fblink 
{ width: 6rem; display: block; float: right; margin-left: 1rem; }
.earthday .flex-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0.25rem;
  margin: .25rem;}
.logo {
    width: 23%;
    height: auto;
    display: block;
    margin: 0rem auto;}
picture.column.one {
     width: 10rem; display: block; float: left; margin-right: 1rem; }
 
footer {
    text-align: center;
  }


@media screen and (min-width: 60rem) and (max-width: 89.999rem) /* normal tablet style css goes here */ {
    section {
    padding-left: calc(50% - (60rem / 2));
    padding-right: calc(50% - (60rem / 2));
    display: flow-root;
    margin: 2rem; /* optional */
    border-radius: 4rem;  /* optional */
    }

 .logos .two li:nth-child(1) {
        width: 40%;  /* width for first logo, adjust to taste */
    }
.logos .two li:nth-child(2) {
        width: 30%; /* more specific "powerful" width rule wins */
    }
 .logos .two li:nth-child(3) {
        width: 40%;  /* width for first logo, adjust to taste */
    }
.logos .two li:nth-child(4) {
        width: 40%;  /* width for fourth logo, adjust to taste */
    }
    .logos .two li:nth-child(5) {
        width: 30%;  /* width for fourth logo, adjust to taste */
    }
    .giveaway {border-radius: 48px 0;}
    .macmarket {border-radius: 32px;}
    .gwd {border-radius: 0px 48px ;}
    .transplant {border-radius: 48px 0;}

} 
 /* _________-------------_______________-----------------______________----------------________________----- */
@media screen and (min-width: 90rem) {/* normal computa style css goes here */

header::after{
content:"🪲";
position:absolute;
display: block;
font-size: 100px;
top: 70px;
left: 17%;
animation: snailMove 30s linear infinite;}

.logos::after{
content:"🦎";
position:absolute;
display: block;
font-size: 100px;
top: 101px;
left: 75%;
animation: snailMove 30s linear infinite;}

@keyframes snailMove{
    /*top edge*/
    0%{transform: translate(0,0) rotate(0deg);}
    100%{transform: translate(0,0) rotate(0deg);}
    /*right side*/
    100%{transform: translate(0px,0) rotate(0deg);}
    0%{transform: translate(0px,1000px) rotate(0deg);}
  /*bottom edge*/
    0%{transform: translate(900px,1000px) rotate(0deg);}
    0%{transform: translate(0,1000px) rotate(0deg);}
  /*left side*/
    0%{transform: translate(0,1000px) rotate(360deg);}
    0%{transform: translate(0,0) rotate(360deg);} }

section.macmarket::before{
        content: " ";
        display: block;
        position: absolute;
        background-image: url(bgimg/remapstudio.png);
        background-size: cover;
        background-repeat: no-repeat;
    height: 242px;
    width: 156px;
top: -37%;
    left: 83%;}

section.earthday::before{
           content: " ";
        display: block;
        position: absolute;
        background-image: url(bgimg/annie-spratt.png);
        background-size: cover;
        background-repeat: no-repeat;
    height: 181px;
    width: 143px;
top: 72%;
    left: 85%;}

section.gwd::before{
        content: " ";
        display: block;
        position: absolute;
        background-image: url(bgimg/engin-akyurt.png);
        background-size: cover;
        background-repeat: no-repeat;
    height: 149px;
    width: 172px;
    top: 0;
    left: 3%; 
}

 header img {
        max-width: 40rem;
        display: block; 
        margin: 0 auto;
    }
 main {
     display: grid;
     grid-template-columns: repeat(16, 1fr); /* 16 columns each equal to one fraction of the available space */
     grid-template-rows: repeat(5, minmax(30px, auto)); /* 5 rows for 5 sections, some double height */
     gap: 10px;
    }

    .giveaway {grid-column: 8/13;
                grid-row:1/2 ;
            margin-bottom: 0;
                border-radius: 48px 0;}
    .macmarket {grid-column: 2/16;
                grid-row: 6/10;
                border-radius: 32px;
            margin: 0rem;
        position: relative;}
    .gwd {grid-column: 2/16;
            grid-row: 11/15;
        border-radius: 0px 48px;
    position: relative;}
    .transplant {grid-column: 2/8;
                 grid-row: 1/2 ;
                margin-bottom: 0rem;
                border-radius: 48px 0;}
    .logos {grid-column: 13/16;
            grid-row: 1/3;}
    .earthday {grid-column: 2/13;
                grid-row: 2/5;
            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: 7rem;
}

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

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


.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 */
    }
} /* Never delete closing media query bracket */