@import url('https://fonts.googleapis.com/css2?family=Changa:wght@700;800&family=Source+Sans+Pro:wght@400;600;700&display=swap');

:root {
    /* change the values below to your colors from your palette */
    --primary-color: #5a3f05;
    --secondary-color: #3FA796;
    --accent1-color: #ffa1ac;
    --accent2-color: #FEC260;
  
    /* change the values below to your chosen font(s) */
    --heading-font: 'Changa', 'Verdana', sans-serif;
    --paragraph-font: 'Source Sans Pro', 'Helvetica', sans-serif;
  
    /* these colors below should be chosen from among your palette colors above */
    --headline-color-on-white: #5a3f05;  /* headlines on a white background */ 
    --headline-color-on-color: white; /* headlines on a colored background */ 
    --paragraph-color-on-white: #3fa796; /* paragraph text on a white background */ 
    --paragraph-color-on-color: white; /* paragraph text on a colored background */ 
    --paragraph-background-color: #fec260  ;
    --nav-link-color: white;
    --nav-background-color: #5a3f05;
    --nav-hover-link-color: white;
    --nav-hover-background-color: #ffa1ac;
  }
  
/****************************************************************
*
* Default tag properties *
*
*****************************************************************/

body {
    
    background-color: #fec260;
    
}
.content {
    font-family: 'Changa', 'Verdana', sans-serif;
    font-size: 22px;
    color:#5a3f05;
    max-width: 1200px;
    margin: 0 auto;
}

h1, h2 {
    font-family: 'Changa', 'Verdana', sans-serif;
    font-weight: 800;
    color: #5a3f05;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 2em;
}

img {
    max-width: 100%;
    box-sizing: border-box;
}
p {
    font-family: 'Source Sans Pro', 'Helvetica', sans-serif;
    color:#3fa796;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
}

/****************************************************************
* *
* default properties for all pages *
* *
*****************************************************************/

.home-content, .process-content, .decorating-content {
    background-color: white;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* grid-template-rows: repeat(16, 100px); */
    padding: 0 2em;
    gap: 1em;

}
/*  This rule name changes based upon the default button color   */

.buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 0 30px;
    border-radius: 20px;
    padding: 0 2em;
    background-color: #5a3f05;
    text-align: center;
    color: #fec260;
}
.next {
    grid-column: -2;
    grid-row: 13;
    background-color: #ffa1ac;
    color: #5a3f05;
    border-radius: 10%;
    text-align: center;
    margin-bottom: 10px;
    white-space: nowrap;
    padding: 0 1em;
}

.previous {
    grid-column: 1;
    grid-row: 13;
    background-color: #ffa1ac;
    color: #5a3f05;
    border-radius: 10%;
    text-align: center;
    margin-bottom: 10px;
    white-space: nowrap;
    padding: 0 .5em; 

}
.youtube {
    width: 560px; 
    height: 315px; 
    margin: 0 auto;
    display: block;
    /* frameborder: 0; W3C CSS Validation Service says this property does not exist.*/ 
    border: 0;
}
/*  This is the default grid layout for all grids. Other grids can be defined as needed. */
/* .grid-default {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 3em 0; */
/* } */

/****************************************************************
* *
* header area properties *
* *
*****************************************************************/
header {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 200px 1fr;
    grid-template-rows: repeat(6, 100px);
    background-color: white;
    /* background-image: url("../images/rsz_patrick-fore-zmh0g1ievtg-unsplash.jpg"); */
}
header a.logo {
    grid-column: 2/3;
    grid-row: 3/5;
    border: 10px solid #ffa1ac;
    
}
#donut-banner {
    width: 100%;
    grid-column: 1/4;
    grid-row: 1;
}


nav {
    background-color: #5a3f05;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
    grid-column: 1/-1;
    grid-row: 6/7;
    justify-items: center;
}
nav a {
    text-align: center;
    color: white;
    text-decoration: none;
    font-family: 'Source Sans Pro', 'Helvetica', sans-serif;
    padding: 35px;
}

nav a:hover {
    background-color: #ffa1ac;
    color: white;
    text-decoration: underline;
}

/****************************************************************
* *
* footer area properties *
* *
*****************************************************************/

footer {
    background-color: #3e3e3e;
    color: white;
    font-family: 'Source Sans Pro', 'Helvetica', sans-serif;
    font-size: 1rem;
    padding: 25px 50px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

footer p {
    grid-column: 1/5;
}

footer a {
    color: white;
    text-decoration: none;
    grid-column: 10/12;
}

footer a:hover {
    color: white;
    text-decoration: underline;
}


/* ---------------------------Home Page---------------------- */

.home-content h1 {
    grid-column: 1/-1;
    grid-row: 1;
    text-align: center;
}

#country {
    grid-column: 1/7;
    grid-row: 2;
    margin-bottom: -150px;
    border: 10px solid #3fa796;
    
}

#many-kinds {
    grid-column: 3/8;
    grid-row:  3/5;
    border: 10px solid #5a3f05;
    margin-top: 50px;
}

#color-dough {
    grid-column: 9/-1;
    grid-row: 5;
    box-shadow: 10px 10px 20px #ffa1ac;
    
}

.phome {
    text-indent: 10%;
    text-align: left;
    color:#3FA796;
    line-height: 1.5em;
    margin: 0px 45px;
    
}

.p1 {
    grid-column: 7/-1;
    grid-row: 2;
    margin-top: 50px;
}


.p2 {
    grid-column: 8/-1;
    grid-row: 3;
    

}
.p3 {
    grid-column: 8/-1;
    grid-row: 4;
    margin-top: 15px;
    margin-bottom: 50px;
}
.p4 {
    grid-column: 1/9;
    grid-row: 5;
    margin-top: 50px;
    
}

.home-content h2 {
    grid-column: 1/-1;
    grid-row: 9;
    text-align: center;
}


/* -------------------------The Process Page------------------------ */
.process-content h1{
    grid-column: 1/-1;
    grid-row: 1;
    text-align: center;
}
.process-content aside {
    grid-column: 1/3;
}
.process-content .left-side p {
    padding: 15px;
}
#hands, #plate {
    border: 10px solid #3FA796;
}
#fry {
    border: 10px solid #ffa1ac;
}
.right-side h2 {
    text-align: center;
}

.right-side {
    grid-column: 3/-1;
}

.three-image {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 25px;
    margin-left: 25px;
}

#mix, #knead, #roll {
    width: 100%;
    height: 200px;
    object-fit: fill;
}

#mix, #roll {
    border: 10px solid #ffa1ac;
}
#knead {
    border: 10px solid #3fa796;
}

.process-content .right-side p {
    padding: 25px;
    text-indent: 15px;
}


/* -----------------------------The Decorating Page----------------------------- */

.decorating-content {
    row-gap: 0;
}
.decorating-content h1, h2{
    grid-column: 1/-1;
    text-align: center;
    margin: 0;
}

.decorating-content h1 {
    margin-top: 25px;
}

.decorating-content p {
    grid-column: 1/-1;
    text-indent: 20px;
    text-align: left;
    margin: 10px;
}
.decorating-content .gallery {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 10px;
    text-align: center;
}

figure {
    margin: 0 15px;
}

#frost, #drizzle, #dip, #pipe, #glaze {
    min-width: 75px;
}

#frost, #pipe {
    border: 10px solid #5a3f05;
}

#drizzle, #glaze {
    border: 10px solid #3fa796;
}

#dip {
    border: 10px solid #ffa1ac;
}

.decorating-content aside {
    grid-column: 1/7;
    grid-row: 5/8;
    
}

.flavors {
    grid-column: 7/-1;
    margin: 0;
    grid-row: 5;
}

.decorating-content p:nth-of-type(2), .decorating-content p:nth-of-type(3){
    grid-column: 7/-1;
}

.three-flavors {
    grid-column: 7/-1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 25px;
    margin-left: 25px;
}

#peppermint, #rainbow, #christmas {
   border: 8px solid #3FA796;
}

#dutch, #canada {
    border: 8px solid #ffa1ac;
}

.inspiration {
    grid-column: 1/7;
    margin: 0;
    text-align: center;
}

.decorating-content p:nth-of-type(4), .decorating-content p:nth-of-type(5) {
    grid-column: 1/7;
}

.ids-decorate {
    grid-column: 7/-1;
    grid-row: 10;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}


.decorating-content p:nth-of-type(6), .decorating-content p:nth-of-type(7) {
    grid-column: 1/-1;
    text-align: center;
}

.decorating-content .previous {
    grid-row: 16;
}



/* This makes our page responsive Media query */
/* This should always be after all other CSS */
/* Don't add any CSS after the media query later either */

@media screen and (max-width: 900px) {
    #hero, .home-grid {
        display: block;
        height: auto;
    }
    nav, footer {
        flex-direction: column;
    }
    nav a {
        display: block;
        padding: 15px;
    }
    #hero {
        margin-top: 0;
    }
    #hero-msg {
        margin-top: 0;
    }
    #hero-msg h4 {
        display: none;
    }
    .home-title {
        font-size: 25px;
        color: #6f7364;
    }
    .rivers-card, .camping-card, .rapids-card { 
        margin: 50px auto;
        width: 60%;
    }
    #background {
        display: none;
    }
    .mountains, .msg {
        width: 80%;
        display: block;
        margin: 0 auto;
    }
    footer {
        margin-top: 25px;
    }
}