header{
    width: 100%;
    background-image: url(../../theme/img/cloud-header.png);
    background-repeat: no-repeat;
    background-size: 100%;
    height: 9rem;
   

    }

#jac-logo{
    max-width: 50%;
    animation: fade-down 0.5s;
 position: relative;
 left: 6rem;
 top: 0.5rem;
   
}

.giveaway{
   
   
    background-image:url(../../theme/img/mountainbackground.jpg);
    background-repeat:no-repeat ;
    height: 27rem;
    background-size: 100%;
    max-width: 100%;
    margin-top: -8rem;
    z-index: -1;
}

.giveaway h3{
    padding: 1rem;
}

 




body{
    background-color: #c7ccb6;
}

h1{
    color: white;
    font-family: "Imperial Script", cursive;
  font-weight: 200;
  font-style: normal;
  text-align: center;
  font-size: 50px;
  
  text-shadow: 2px 2px 5px black;
  animation: fade-down 0.5s;
  
  
}

@keyframes fade-down {
    0%{
        opacity: 0;
        transform: translateY(-10px) scale(0.9);
    }

    100%{
        opacity: 1;
        transform: translateY(0px) scale(1);
    }

  
}

@keyframes fade-up {
    0%{
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }

    100%{
        opacity: 1;
        transform: translateY(0px) scale(1);
    }

  
}


h2{
    position: relative;
    top: 8rem;
    font-family:"cinzel";
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    color: white;
    text-shadow: 2px 2px 5px black;
    animation: fade-up 0.5s;
    
}

h3{position: relative;
top: 8.5rem;
font-family:"cinzel";
    font-weight: 500;
    font-size: 16px;
    text-align: center;
color: white;
text-shadow: 2px 2px 5px black;
animation: fade-up 0.5s;
}

.giveaway .flex-container .column-two{
    margin-top: 9rem;
    font-family:"cinzel";
    font-weight: 400;
    font-size: 18px;
    padding: 1rem;
    
    color: white;
    animation: fade-up 0.5s;

  
}

.macmarket{
    background-image: url(../../theme/img/Bob-ross-leaves.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 26.7rem;
   max-width: 100%;
  
}

.macmarket img{
    max-width: 10%;
    margin-left: 18rem;
   position: relative;
   top: 0.8rem;
   left: 1rem;
}



.macmarket h2{
    position: relative;
    top: 3rem;
    left: 2rem;
    color: #776d5e;
    text-shadow: 2px 2px 5px #776d5e;
}

.macmarket > div:nth-child(2) > div:nth-child(2) > p:nth-child(1) {
   
    font-family:"cinzel";
    font-weight: 400;
    font-size: 8.7px;
    font-weight: 500;
    margin-left: 7.5rem;
    margin-right: 0.5rem;
    color: #776d5e;
    margin-top: 1rem
   
  ;
}

.macmarket > div:nth-child(2) > div:nth-child(2) > p:nth-child(3) {
    color: #c7ccb6;
    position: relative;
    top: 10rem;
    margin-left: 1rem;
    margin-right: 1rem;
    
}

.macmarket > div:nth-child(2) > div:nth-child(2) > h2:nth-child(2) {
    color: #776d5e;
    position: relative;
    left: -6.5rem;
    top: 7rem;
  

}


.fblink > img:nth-child(1) {
    position: relative;
    top: 1rem;
    left: -10.3rem;
    box-shadow: 2px 2px 5px black;

}


.gwd {
    background-color:#776d5e ;
    height: 30rem;
background-image: url(../../theme/img/Bob-ross\ leaves\ green.png);
background-repeat: no-repeat;
background-size: cover;
background-position: right;
height: 30rem;
max-width: 100%;
}
.gwd h2{
   position: relative;
   top: 4rem;
   left: -3.3rem;
   color: #c7ccb6;
}

.gwd .flex-container .column-two p{
   margin-top: 4rem;
 color:#c7ccb6;
   font-family:"cinzel";
    font-weight: 400;
    font-size: 8.7px;
    font-weight: 500;
    padding-right: 8rem;
    padding-left: 1rem;
}

.gwd .flex-container .column-three p{
    margin-top: 4rem;
    color:#c7ccb6;
      font-family:"cinzel";
       font-weight: 400;
       font-size: 8.7px;
       font-weight: 500;
       padding-right: 8rem;
       padding-left: 1rem;
       margin-top: 1.5rem;
}

.transplant h2{
 top: -3rem;
}
 
.transplant h3{
    top: -2rem;
}

.logos h2{
    top: 0rem;
}

.logos img{
    width: 35%;
    height: auto;
}

.logos .column-two{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.earthday h2{
   position: relative;
   top: -1.5rem;
}

.earthday h3{
    position: relative;
    top: -1rem;
    padding: 0.5rem;
}

.earthday .flex-container{
    height: 30rem;
   padding-left: 18px;
   padding-right: 25px;
   width: 375px;
    background-image: url(../../theme/img/justyn-warner-VH8w75u3LE0-unsplash.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

}


.earthday .flex-container img{
    width: calc(100% / 6);
    position: relative;
    left: 1.5rem;
    top: 6rem;
}

footer{   
    max-width:100%;
    background-image: url(../../theme/img/cloud-footer.png);
    background-repeat: no-repeat;
    background-size: 100%;
    height: 9rem;
    margin-top: -5rem;
   }

.end{
    top: 4rem;
    color: white;
    font-family: "Imperial Script", cursive;
  font-weight: 200;
  font-style: normal;
  text-align: center;
  font-size: 25px;
  
  text-shadow: 2px 2px 5px black;
}

img {
    max-width: 100%;
    height: auto;
}

 
    
   

    @media screen and (min-width: 390px){
        header{ height: 12rem;}
        .giveaway {height: 32rem;}
       .macmarket {background-size: 150%;}
       .macmarket img {left: 6rem;}
       .gwd {background-size :150%;}
       
    }

    @media screen and (min-width: 460px){
        header{ height: 14rem;}
        .giveaway {height: 38rem;}
        .macmarket > div:nth-child(2) > div:nth-child(2) > p:nth-child(1) {padding-left: 1rem; padding-right: 1rem; font-size: 11px;}
        .macmarket img {left: 7rem;}
       
    }
    
    
    @media screen and (min-width: 521px){
        header{ height: 14rem;}
        .giveaway {height: 46rem;}
        .macmarket {height:30rem;}
        .macmarket h2 {font-size: 26px; padding-left: 2rem;}
        .macmarket img {left: 9rem; max-width: 15%; top:-0.5rem;}
        .macmarket > div:nth-child(2) > div:nth-child(2) > p:nth-child(3) {top: -1rem; font-size: 20px;}
     
        
    }

    @media screen and (min-width: 580px){
        .macmarket img {left: 11rem; max-width: 15%; top:-0.5rem;}
    }

    @media screen and (min-width: 629px){
        header{ height: 16rem;}
        .giveaway {height: 50rem;}
        .giveaway h2 {font-size: 28px;}
        .giveaway h3 {font-size: 22px;}
        .giveaway .flex-container .column-two {font-size: 18px;}
        .macmarket {background-size: 160%;}
        .gwd {background-size :160%;}
        .macmarket {height:40rem;}
        .macmarket h2 {font-size: 31px; padding-left: 2rem;}
        .macmarket img {left: 14.5rem; max-width: 15%; top:-0.5rem;}
        .macmarket > div:nth-child(2) > div:nth-child(2) > p:nth-child(1) {padding-left: 5rem;  font-size: 15px;}

    }

    @media screen and (min-width: 700px){
        header{ height: 18rem;}
        .giveaway {height: 56rem;}
        .macmarket img {left: 16rem; max-width: 15%; top:-0.5rem;}
        .macmarket > div:nth-child(2) > div:nth-child(2) > p:nth-child(1) {padding-left: 6rem;  font-size: 17px;}
        .macmarket > div:nth-child(2) > div:nth-child(2) > p:nth-child(3) {top: 10rem; font-size: 20px;}
    }

    @media screen and (min-width: 780px){
        header{ height: 19rem;}
        .giveaway {height: 60rem;}
        .giveaway h2 {font-size: 35px;}
        .giveaway h3 {font-size: 28px;}
        .giveaway .flex-container .column-two {font-size: 24px;}
        .macmarket {background-size: 160%;}
        .macmarket {height:45rem;}
        .macmarket img {left: 21rem; max-width: 15%; top:-1.5rem;}
        .macmarket h2 {font-size: 35px; padding-left: 5rem;}
        .macmarket > div:nth-child(2) > div:nth-child(2) > p:nth-child(1) {padding-left: 8rem;}
    }
    @media screen and (min-width: 850px){
        header{ height: 20.5rem;}
        .giveaway {height: 65rem;}
        h1{font-size: 80px;}
        .giveaway .flex-container .column-two {padding-left: 5rem; padding-right: 5rem;}
        .macmarket {background-size: 170%;}
        .gwd {background-size :170%;}
        .macmarket {height:55rem;}
        .macmarket img {left: 25rem; max-width: 15%; top:-2rem;}
        .macmarket h2 {font-size: 36px; padding-left: 9rem;}
        .macmarket > div:nth-child(2) > div:nth-child(2) > p:nth-child(1) {padding-left: 11rem; padding-right: 3rem;  font-size: 20px;}
}
        
    

    @media screen and (min-width: 922px){
        header{ height: 22rem;}
        .giveaway {height: 70rem;}
       .giveaway {background-image: url(../../theme/img/mountainbackground-landscape.png);
         height: 60rem;
            margin-top: -25rem;}
             .giveaway h2 {font-size: 35px; top: 23rem;}
            .giveaway h3 {font-size: 28px; top: 23rem;}
            .giveaway .flex-container .column-two {font-size: 24px; top: 18rem;}
            .macmarket {height:60rem;}
            .macmarket img {left: 28.5rem; max-width: 15%; top:-2rem;}
            .macmarket > div:nth-child(2) > div:nth-child(2) > p:nth-child(1) {padding-left: 14rem;}
}
    

    

    @media screen and (min-width: 945px){
        header{height: 24rem;}
        .giveaway {height: 65rem;}
        .macmarket > div:nth-child(2) > div:nth-child(2) > p:nth-child(1) {padding-left: 18rem;  font-size: 21px;}
    }

    @media screen and (min-width: 1040px){
        header{height: 25.5rem;}
        .giveaway {height: 70rem;}
        .giveaway h2 {margin-top: 4rem;}
        .macmarket {height:65rem;}
        .macmarket img {left: 35rem; max-width: 15%; top:-3rem;}
        .macmarket h2 {font-size: 40px; padding-left: 12rem;}

    }

    @media screen and (min-width: 1140px){
        header{height: 28rem;}
        .giveaway {height: 75rem;}
        h1{font-size: 110px;}
         .giveaway h2 {font-size: 40px; top: 23rem;}
            .giveaway h3 {font-size: 33px; top: 23rem;}
            .giveaway .flex-container .column-two {font-size: 29px; top: 18rem;}
            .macmarket {height:70rem;}
            .macmarket img {left: 39rem; max-width: 15%; top:-4rem;}
            .macmarket > div:nth-child(2) > div:nth-child(2) > p:nth-child(1) {padding-left: 24rem; padding-right: 7rem;  font-size: 24px;}
    }

 

    @media screen and (min-width: 1300px){
        header{height: 31rem;}
        .giveaway {height: 80rem;}
        .macmarket {height:80rem;}
        .macmarket img {left: 47rem; max-width: 15%; top:-4rem;}
    }

    @media screen and (min-width: 1340px){
        header{height: 33rem;}
        .giveaway {height: 88rem;}
        .macmarket h2 {font-size: 48px; padding-left: 12rem;}
        
    }

    @media screen and (min-width: 1485px){
        header{height: 35rem;}
        .giveaway {height: 95rem;}
        .macmarket {height:87rem;}
        .macmarket img {left: 52rem; max-width: 15%; top:-5rem;}
        .macmarket > div:nth-child(2) > div:nth-child(2) > p:nth-child(1) {padding-left: 27rem; padding-right: 7rem;  font-size: 27px;}

        
    }

    @media screen and (min-width: 1600px){
        header{height: 37rem;}
        .giveaway {height: 105rem;}
        .giveaway h2 {font-size: 45px; top: 23rem;}
        .giveaway h3 {font-size: 38px; top: 23rem;}
        .giveaway .flex-container .column-two {font-size: 34px; top: 18rem;}
        .macmarket {height:92rem;}
        .macmarket img {left: 57rem; max-width: 15%; top:-7rem;}
        .macmarket > div:nth-child(2) > div:nth-child(2) > p:nth-child(1) {padding-left: 30rem; padding-right: 7rem;  font-size: 32px;}
    }

    @media screen and (min-width: 1700px){
        header{height: 39rem;}
        .giveaway {height: 115rem;}
        h1{font-size: 130px;}
        .macmarket {height:100rem;}
        .macmarket img {left: 61rem; max-width: 15%; top:-7rem;}
        .macmarket h2 {font-size: 55px; padding-left: 13rem;}
    }

    @media screen and (min-width: 1900px){
        header{height: 43rem;}
        .giveaway {height: 120rem;}
        .macmarket {height:110rem;}
    }