/* ---------------- Mobile Style ---------------------------*/

#header-jac-logo {
    height: 2.3rem;
    width: auto;
    margin: 1rem;
}

/* header{
    background-color: rgb(248,246,241);
    width: auto;
    position: relative;
    margin-bottom: 2rem;
} */

header::before{
    background-image: url(img/cloud-header.svg);
    position: absolute;
    height: 13rem;
    width: 100%;
    background-size: contain;
    content: '';
    display: block;
    background-repeat: repeat-x;
    background-size: contain;
    
}

.slogan {
    margin-left: 13.5rem;
    font-size: 0.7rem;
    color: rgb(81 163 60);
    font-family: "hobeaux", sans-serif;
    font-weight: 300;
    margin-top: -49px;


}

main {
margin-top: 13.7rem;
}

.giveaway {
    margin: 1rem;
    margin-left: 1rem;  
    background-image:linear-gradient(#875038, rgb(154, 62, 53));
    padding: 1.1rem;          
    /* border: 10px solid red; */
    border-radius: 10px;
    box-shadow: 1.5px 1.5px 3px 0 rgba(0, 0, 0, 0.317);
}

.macmarket{
    margin: 1rem;
    margin-left: 1rem;  
    background-color: rgb(168, 69, 60);
    padding: 1rem;          
    /* border: 10px solid red; */
    border-radius: 10px; 
    box-shadow: 1.5px 1.5px 3px 0 rgba(0, 0, 0, 0.317);
}
.macmarket .two p {
    margin-top: 1.4rem;
}

/* macmarket logo */
.macmarket .one img{
    float: left;
    width: 39%;
    margin: 1.2rem 0.7rem 0.5rem 0rem;
    max-width: 300px;
}

/* facebook icon */
.macmarket .two img {  
    width: 26.4%;
    min-width: 2%;
    max-width: 500px;
    display: block;
    margin: auto;
}

.macmarket .two a img:hover {
    opacity: 0.50;
    rotate: 5deg;}


.gwd {
    margin: 1rem;
    margin-left: 1rem;  
    background-color: rgb(168, 69, 60);
    padding: 1rem;          
    /* border: 10px solid red; */
    border-radius: 10px;
    box-shadow: 1.5px 1.5px 3px 0 rgba(0, 0, 0, 0.317);
}

.transplant{
    margin: 1rem;
    margin-left: 1rem;  
    background-image:linear-gradient(rgb(154, 62, 53), rgb(218, 102, 57));
    padding: 1rem;          
    /* border: 10px solid red; */
    border-radius: 10px;
    box-shadow: 1.5px 1.5px 3px 0 rgba(0, 0, 0, 0.317);
}

.logos {
    margin: 1rem;
    margin-left: 1rem;
    background-image:linear-gradient(rgb(218, 102, 57), rgb(224, 123, 53)); 
    padding: 1rem;          
    /* border: 10px solid red; */
    border-radius: 10px;
    box-shadow: 1.5px 1.5px 3px 0 rgba(0, 0, 0, 0.317);
}


.earthday{
    margin: 1rem;
    margin-left: 1rem;  
    background-color: rgba(224, 123, 53);
    padding: 1rem;          
    /* border: 10px solid red; */
    border-radius: 10px;
    box-shadow: 1.5px 1.5px 3px 0 rgba(0, 0, 0, 0.317);
}
#images {
    margin-top: 1rem;
    margin-bottom: 1rem;
    box-shadow: 1.5px 1.5px 3px 0 rgba(0, 0, 0, 0.317);
}

body {
    background-image: 
/* 1 */ url( img/crust.svg),
/* 2 */  url(img/sun-petermax.svg),
/* 3 */  url(img/plates.svg),
/* 4 */  url(img/mantle1.svg),
/* 5 */  url(img/mantle2.svg),
/* 6 */ url(img/outercore.svg),
/* 7 */ url(img/mantle3.svg);

background-position:
/* 1 */ 0px 390px, 
/* 2 */ 0px 48px,
/* 3 */ 0px 660px,
/* 4 */ 0px 681px,
/* 5 */ 0px 1356px,
/* 7 */ 0px 3800px,
/* 6 */ 0px 2400px;


background-repeat: no-repeat no-repeat;
    
}

h1 {
font-family: "cheee-jimbo", sans-serif;
font-size: 1.3em;
text-align: center;
margin-top: 17.9rem;
color: rgb(83, 235, 108);}

h1{
    margin-left: 3rem;
    margin-right: 3rem;
    background-color: rgb(53 102 40);
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 1.5px 1.5px 3px 0 rgba(0, 0, 0, 0.317);
}

h2, h3 {
font-family: "hobeaux", sans-serif;
font-style: normal;
}

h3 {
   
font-weight: 400;
}

h2 { font-size:1.7818em; font-weight: 700; text-align: center; }
h3 {font-size: 1.6150em; margin-top: 1.4rem; margin-bottom: 0.5rem; text-align: center;}
h4 { font-size: 1.1892em;  text-align: center; }
p { font-family: "oso-sans", sans-serif;
    font-weight: 400;
    font-style: normal; font-size: 1em; margin-bottom: 1rem; margin-left: 0.6rem; line-height: 1.2rem;}

 h2, h3, h4, p {
    color: #4c210a;
 }

.giveaway h2 ,p , .macmarket h2, .gwd h2, .transplant h2, h3{
    color:#e7c0ac;
} 

.earthday h3{
    margin-bottom: 1.5rem;
    color:#4c210a;
}
/* -------- sponsors at 320px ------ */
#sponsor-jac {
    display: block;
    width: 13.2rem;
    height: auto;
    margin: 2.3rem 1.3rem 1.5rem 1.4rem
} 

/* .logos .two img {
width: calc(100% / 5) ; /* all images in column 2 of .logos set to 1/5 of available space ( because 5 logos in this box) 
display: block;
} */

/* PSEUDO CLASS SELECTORS: https://www.w3schools.com/cssref/css_ref_pseudo_classes.php  
Simply put: automatically select the first, last or any items in a box by counting which number it is in the box (order it is written in the html) */

.logos .two img:first-child, 
.logos .two img:nth-child(4)  /* first and fourth logos set too 100% wide, because they are wide not square logos. NO CLASS or ID needed this way! */
{
    width: 100%;
    margin-left: 0rem;
    margin-top: 1rem;
}

.logos .two img:nth-child(2),  /* second and third logo set to 40% width and centered */
.logos .two img:nth-child(3)
{
    width: 43%;
    margin-left: 0.7rem;

}

.logos .two img:last-child {  /* last logo set individually */
width: 60%;
margin-left: 3rem;
}


/* ------ learn how to up-cycle ------ */
.transplant .two {
    border: 4px solid rgb(242, 155, 84);
    padding: 1rem;
    margin: 1.8rem 3.5px
}

.transplant .two h3 {
    color: rgba(177, 239, 42, 0.901);
    margin: 0.5rem;
}

.transplant .two h3:first-child {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
    color: #f9c724;
}

.transplant .two h3:nth-child(2) {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 2rem;
    text-transform: uppercase;
    
    border-top: 3px solid rgb(242, 155, 84);
    padding-top: 1rem;
    
    border-bottom: 3px solid rgb(242, 155, 84);
    padding-bottom: 1rem;
}

.transplant .two h3:nth-child(3) {
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 2rem;
    text-transform: uppercase;
    color: #f9c724;
    position: relative;
}

.transplant .two h3:nth-child(3):before {

    content: " "; 
    /* content cannot be empty, otherwise box collapses to no height */


    position: absolute;   
    /* position anywhere you like, on a layer */
    /* could also be "relative" for different behaviour */

    z-index: 1;
    /* control stacking like "send to back" */
    /* can be any negative (send to back) or positive (send to front) number, 
    ex: 99 is the 99th layer above the background */

    display: block;
    /* behave as normal block level element */

}

 /*----- End up-cycle -------  */

/* nations boxes at 320px */

.earthday .flex-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0.75rem;
    width:80vw;
    margin: 0.75rem auto;
    max-width: 500px; 
}
a img:hover {
    opacity: 0.60;
    rotate: 5deg;}


footer {
    color: white;
    background-color: #edcc47;
    padding: 2rem;
    text-align: center;
    font-size: small;

}

footer span.gwd-footer{
   color: rgb(255, 111, 0);
}




/* --------------------Tablet Style------------------------------------------------------- */
@media screen and (min-width:675px) {

    .flex-container {
        display: flex; /* creates two columns */ 
        column-gap: 0.7rem;
        /* space between the columns */
    }

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

    }

.giveaway {
        margin: 2.5rem;
        margin-left: 2.5rem;  
        padding: 1.5rem;          
        border-radius: 10px;
        box-shadow: 1.5px 1.5px 3px 0 rgba(0, 0, 0, 0.317);
    }
.macmarket {
    margin: 2.5rem;
        margin-left: 2.5rem;  
        padding: 1.5rem;
}

.gwd {
    margin: 2.5rem;
        margin-left: 2.5rem;  
        padding: 1.5rem;
}
.transplant {
    margin: 2.5rem;
        margin-left: 2.5rem;  
        padding: 1.5rem;
}
.logos {
    margin: 2.5rem;
        margin-left: 2.5rem;  
        padding: 1.5rem;
}
 .earthday{
    margin: 2.5rem;
        margin-left: 2.5rem;  
        padding: 1.5rem;
 } 

header::before {
     height: 7rem;
    }

#header-jac-logo{
    height: 3rem;
    margin-top: 1.6rem;
    margin-left: 1.6rem;
}    
.slogan {
    font-size: 1rem;
    margin-left: 32.4rem;
    margin-top: -60px;
}

.giveaway #images {
    margin-top: -1.8rem;}

.gwd #images {
    margin-top: 3.1rem;
}

.transplant #images{
    margin-top: 0.8rem;
}
.transplant h3{
    margin-left: -18rem;
    margin-top: 4rem;
}
.transplant .two {
    margin-top: -4.5rem;
}
    
h1{
    margin-top: 38rem;
    font-size: 2.4rem;
    margin-left: 5.5rem;
    margin-right: 5.5rem;
}

p {  
    font-size: 1.2em; 
    margin-bottom: 1rem; 
    margin-left: 1rem;
    margin-top: 2rem;
}

.giveaway h3{
margin-top: 2rem;    
margin-left: 16.3rem;
font-size: 1.54rem;
}    

.giveaway p{
    margin-top: 1.7rem;
}
.macmarket .one img{
    margin: 1.4rem 0.9rem 0.8rem 0.5rem;
    width: 25%;
}
.macmarket .two img {
    width: 19%;}

#sponsor-jac{
   margin:4.3rem 1.3rem 1.5rem -4rem;
    }
    
.logos .two img:nth-child(2) {
    width: 45%;
    margin-left: -11rem;
    margin-top: 1rem;
}   
.logos .two img:nth-child(3) {
    width: 48%;
margin-left: 11.9rem;
}

.logos .two img:nth-child(4) {
    margin-left: -6rem;
    margin-top: 1rem;
}

.logos .two img:last-child {
    margin-left: -2rem;
}

main{
    margin-top: 30.7rem;
}

body {
    background-image: 
/* 1 */ url( img/crust.svg),
/* 2 */  url(img/sun-petermax.svg),
/* 3 */  url(img/plates.svg),
/* 4 */  url(img/mantle1.svg),
/* 5 */  url(img/mantle2.svg),
/* 6 */ url(img/outercore.svg),
/* 7 */ url(img/mantle3.svg);

background-position:
/* 1 */ 0px 771px, 
/* 2 */ 0px 48px,
/* 3 */ 0px 660px,
/* 4 */ 0px 695px,
/* 5 */ 0px 1251px,
/* 7 */ 0px 3994px,
/* 6 */ 0px 2400px; 


background-repeat: no-repeat no-repeat;
}
    
}
/*-----------END Tablet Style---------- */


/* ---------------------Desktop Style-------------------- *//* make box when desktop */
@media screen and (max-width:1000px) {
    .flex-container {
        display: flex;  
        /* creates two columns */

        column-gap: 0rem;
        /* space between the columns */
    }
   
    header::before {
        height: 8.7rem;
       }

    
 #header-jac-logo{
        height: 3.5rem;
        margin-top: 1.8rem;
        margin-left: 2.1rem;
    }    
.slogan {
        font-size: 1.4rem;
        margin-left: 40.1rem;
        margin-top: -57.9px;
    }  
   

.giveaway #images {
    margin-top: -0.7rem;
    width: 80%;
     }
    

.giveaway {
    margin: 5rem;
    margin-left: 5rem;  
    padding: 2rem;          
    border-radius: 10px;
    box-shadow: 1.5px 1.5px 3px 0 rgba(0, 0, 0, 0.317);
}
.macmarket {
margin: 5rem;
    margin-left: 5rem;  
    padding: 1.5rem;
}

.gwd {
margin: 5rem;
    margin-left: 5rem;  
    padding: 1.5rem;
}

.gwd #images {
    margin-top: 2.1rem;
}
.transplant {
margin: 5rem;
    margin-left: 5rem;  
    padding: 1.5rem;
}

.transplant h3 {
    margin-left: -24.1rem;
    margin-top: 4.7rem;
}

.transplant .two {
    margin-top: -5rem;
    margin-left: 2.4rem;
    margin-bottom: 0rem;
}

.logos {
margin: 5rem;
    margin-left: 5rem;  
    padding: 1.5rem;
}
.earthday{
   margin:5rem;
    margin-left: 5rem;  
    padding: 2rem;
} 

.earthday h3 {
    margin-bottom: 2rem;
}

.earthday h3 {
    padding-left: 11rem;
    padding-right: 11rem;
    margin-top: 2.3rem;
}

h1{
    margin-top: 56rem;
    font-size: 3em;
    margin-left: 15rem;
    margin-right: 15rem;
}

h2 {
    font-size: 2.2818em;
}

p {
    font-size: 1.3em;
line-height: 1.4rem;
margin-left: 1.8rem;}


.macmarket .one img {
        margin: 1.5rem 1.7rem 6.2rem 0.7rem;
        width: 24.4%;
    }   
.macmarket .two img {
        width: 15.5%;
    }    

.giveaway h3 {
    margin-left: 21.3rem;
    font-size: 1.94rem; }

.giveaway p {
        margin-top: 1.4rem;
        margin-left: -2rem;
    }   

#sponsor-jac {
        margin: 5.5rem 0.6rem 2rem -2.56rem;
        width: 77.5%;
    }  
    .logos .two img:nth-child(2) {
        width: 46.9%;
        margin-left: -11.7rem;
        margin-top: 1.1rem;
    }
    .logos .two img:nth-child(3) {
        width: 54%;
        margin-left: 11.2rem;
    }
    .logos .two img:nth-child(4) {
        margin-left:-5.1rem;
        margin-top: 2.4rem; }
    
    .logos .two img:last-child {
        margin-left: -0.2rem;
    }

main{
    margin-top: 45em;
}

footer {
    font-size: 0.9rem;
}

body{
    background-position:
/* 1 */ 0px 1103px, 
/* 2 */ 0px 48px,
/* 3 */ 0px 1931.4px,
/* 4 */ 0px 995px,
/* 5 */ 0px 1279.5px,
/* 7 */ 0px 4971px,
/* 6 */ 0px 2400px; 
}
}
/*-----------END Desktop Style--------- */