body {
     background-color: #79c3ee;
}
/* PARALAX SECTION */
#parallax {
     position: relative;
     height: 1000px;
 }
 .layer {
     position: fixed;
     background-position: bottom center;
     background-size: auto 100%;
     background-repeat: no-repeat;
     width: 100%;
     height: 1050px;
}

#layer-0 {
     background-image: url('Images/Sky.png');
     background-color: #79c3ee;
}
 #layer-1 {
     background-image: url('Images/Clouds.png');
 }
 #layer-2 {
     background-image: url('Images/Sun.png');
 }
 #layer-3 {
     background-image: url('Images/Hill_3.png');
 }
 #layer-4 {
    background-image: url('Images/Hill_2.png');
   }
 #layer-5 {
    background-image: url('Images/Characters.png');
 }


 .main {
     height: 200vh;
     z-index: 7;
     position: relative;
     background-color: #7fbe5c;
     background-image: url(Images/Grass+Flowers.png); 
    
 }

.grass {
    height: 30vw;
}
.logo {
    margin-left: 30%; ;
    margin-top: 0;
    height: 20vw;
    padding-bottom: 2vw;
}
/*TOP MENU SECTION*/
header {
   
    background-color:#79c3ee;
    padding: 1vw  8vw;
}
.menu, .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu {
    display: flex;
   justify-content:space-around;
}
.menu a  {
    color:#007dc3;
    text-decoration: underline;
    font-family: "Madimi One", sans-serif;
    padding: 0.5em;
    display: block;
    font-size: 2em;
}
.menu a:hover {
    color:#ffb1e0;
    background-color:#79c3ee;
}
.sub-menu {
    display: none;
    background-color:#79c3ee;
}
.menu-parent {
    position: relative;
}
.menu-parent:hover .sub-menu {
    display: block;
    position: absolute;
    left: 0;
    top: 100%;
    width: 200px;
}
/* ABOUT SECTION */
.about {
    background-color:#79c3ee;
    color:#007dc3;
    margin: 2vw;
    text-align: center;
    font-size: 1.6em;
    padding-top: 2vw;
    padding-bottom: 2vw;
}
.aboutdiv {
    background-color:#79c3ee;
    margin: 2vw;

}

/* ACCORDIAN SECTION */
.accordion {
    border-bottom: 3px solid #ffb1e0;
    background-color: #007dc3;
    
}
.accordion-top {
    cursor: pointer;
    
}
.accordion-top h3::after {
    content: '\221F';
    transform: rotate(-45deg);
    float: right;
    font-size: 2rem;
    line-height: 50%;
    transition: all 50ms;
}
.accordion-body {
    height: 0;
    overflow: hidden;
    transition: all 150ms;
    border-top: 2px #ffb1e0;
}
.accordion-body *:first-child {
    margin-top: 0;
}
.accordion.open .accordion-body {
    height: auto;
    padding: 2vw 0;
}
.accordion.open .accordion-top h3::after {
    transform: rotate(135deg);
}
h2 {
    text-align: center;
    font-size: 3.2em;
    font-family: "Madimi One", sans-serif;
    color:#007dc3 ;

   
}
h3 {
    text-align: center;
    font-family:"Madimi One", sans-serif;
    font-size: 2.3em;
    color:#dc87b9;
    margin-bottom: 1vw;
}
h4 {
    color:#dc87b9;
    font-family:"Madimi One", sans-serif;
    font-size: 1.8em;
    margin: 2vw;
    padding: 2vw;

}
 p {
    font-size: 1.8em;
    line-height: 1.8em;
    color:#79c3ee;
    font-family: "Lato", sans-serif;
    font-weight: bold;
}
/* IMAGES + INFO PIG FAMILY */

.georgefrog {
    max-width: 20vw;
    padding: 1vw;
}
.princesspeppa {
    max-height: 20vw;
}
.daddypig {
max-height: 20vw;
}
.mummypig {
    max-height: 20vw;

}
.georgeinfo {
    display: flex;
}
.peppainfo {
    display: flex;
}
.mummypiginfo {
    display: flex;
}
.daddypiginfo {
    display: flex;
}

/* CARDS Friends*/
h1 {
    font-family:"Madimi One", sans-serif;
    color:#007dc3;
    text-align: center;
    
}
.row {
    display: flex;
    justify-content:center;
    padding-top: 3em;
}
.card {
    margin-right:3vw;
    background-color:#ffb1e0;
    max-width: 30vw;
}
.row .card:last-of-type {
    margin-right: 0;

}
.card-image img {
    width: 100%;
    display: block;
    transition: transform 500ms ease-out;
}
.card-image:hover img {
    transform: scale(1.07);
    
}
.card-text {
    padding: 2vw;
}
.card-text h2 {
    margin-top:0;
}
.row p {
    padding: 0.5em;
    font-size: 1.3em;
    color:#57833e;
    font-family: "Lato", sans-serif;
    font-weight: bold;
}

/*MEDIA QUERIES*/

/*FOR PHONES*/
@media screen and (max-width: 600px) {
    .menu {
        display:flex;
        flex-direction:column ;
       font-size: 2em;
         }
    .card {
        display: flex;
        flex-direction: column;
        max-width: 100vw;
    }
    
    }