*{
    margin:0;
    padding:0;
    font-family: "neue-haas-grotesk-display", sans-serif;
    font-weight: 600;
    font-style: normal;
}   
a{
    text-decoration: none; 
}
header{
    justify-content: space-between;
    align-content: center;
    background-color: #192d57;
    position:fixed;
    z-index:2;
    top:0;
    width:100vw;
    padding:1rem;
   }
header img{
    float: left;
    min-width:5rem;
    max-width:10rem;
}
header a{
    font-size: 1rem;
    color:#fff;
    text-decoration: none;
}
.toggle-nav{
    background-color:#192d57;
    position:fixed;
    width:100%;
    top:5.45rem;
}
.toggle-nav a:hover{
    background-color: #517492;
}
.toggle-nav a{
    display:block;
    color:#fff;
    text-align:center;
    text-decoration:none;
    padding:2rem;
    text-align: left;
}
.toggle-nav.show{
    left:70%;
}
.toggle-nav{
    left:100%;
    transition-property:left;
    transition-duration:.5s;
    transition-timing-function:ease-in-out;
}
.hamburger{
    float:right;
    width:2rem;
    padding:.5rem 1rem;
    margin: 0 2rem 0 0 ;
    background-color: #fff;
    border-radius: 1em;
    }
    .hamburger hr{
    border-radius: 1.5em;
    margin:.25rem 0;
    border: .25rem solid #517492;
    }
    .overlay{
    width: 100%;
    height: 100%;
    top:1rem;
    position:fixed;
    background-color:#192d57;
    transition-property:left;
    transition-duration:.5s;
    transition-timing-function:ease-in-out;
    left:100%;
    }
    .overlay.show{
    left:0;
    }

footer{
display:flex;
justify-content:space-between;
align-items:center;
background-color: #192d57;
padding:1rem;
}
.icons img{
    min-width: 60px;
    max-height: 60px;
    padding:0 1rem;
}
.footerlogo img{
max-width: 10rem;
}
.socials img{
    display:inline-block;
    max-width: 50px;
    max-height: 50px;
    min-width: 50px;
    min-height: 50px;
    padding:0 1rem;
}

.helping{
    background-image: url(images/Two_cats-04.png);
    background-repeat: no-repeat;
    background-size:100%;
    background-position: 0px 0;
    padding-bottom: 18rem;
}
.helping a,.helping h3,.helping h4 {
    color: #fff;
}
.helping a{
background-color: #192d57;
padding:.5rem;
border-radius: 2rem;
font-size: 1.25rem;
text-align: center;
margin:0 1rem 0 85vw;
}

.support{
     padding:8rem 0 1rem 0;
     display:flex;
     flex-direction: column;
     justify-items: end;
     margin-bottom: 105vh;
     background-color: #517492;
}
.support h2{
    margin:0 1rem 0 80vw;
    font-size: 2rem;
    background-color: #fff;
    border-radius: 2em;
    text-align: center;
}
.support h3{
    font-size: 1.25rem;
    text-align: right;
    margin:2.5rem 1rem 0 1rem;
}


.volunteer{
    background-color: #517492;
    padding:2rem 0 1rem 0;
     display:flex;
     flex-direction: column;
     justify-items: start;
}
.volunteer h2{
    margin:0 1rem 1rem 80vw;
    font-size: 2rem;
    background-color: #fff;
    border-radius: 2em;
    text-align: center;
}
.volunteer h3{
    font-size: 1.25rem;
    text-align: right;
    margin:0 1rem;
}

.menupage{
    background-color: #E5CA9B;
    padding-bottom: 5rem;
}
.menu{
    padding-top:8rem;
    
}

.menu h1{
    font-size:3rem;
    color:#192d57;
    background-color: #fff;
    padding:.25rem 8rem;
    border-radius: 2em;
    justify-self: center;
    margin-bottom: 6rem;
}
.menuitems{
width:62rem;
display:flex;
margin-left: 10vw;
overflow-x: scroll;
scrollbar-color:#E5CA9B #192d57;
}
.menuitems div{
  width: 100%;
  display:grid;
    grid-template-columns:auto auto auto;
  grid-gap:8rem;
  padding:1rem 0;
  flex:none;
  margin:0 3rem;
}
.menuitems div img{
    max-width:20rem;
    object-fit: cover;
    padding:2rem;
    border-radius: 5em;
}
.menu h3{
    color: #192d57;
}
.menuitems a{
align-content: center;
justify-items: center;
background-color: #fff;
padding:1.5rem .6rem;
border-radius: 5em;
}
.menuwrapper{
    padding-top: 5rem;
}


.contactbody{
    background-color: #b7cada;
}
.contact{
    padding: 8rem 0 0 0;
    justify-items: center;
}
.contact h1{
color:#192d57;
 padding: .5rem 2rem;
background-color: #fff;
border-radius:2em;
margin:0 0 2rem 0;
}
.map img{
    min-width:80vw;
    border-radius: 2em;
}
.map{
    margin:0 0 5vw 0;
}
.contact h4{
    text-align: right;
}
.info img{
width: 25vw;
margin:0 20vw 10vh 0;
}
.info{
    display:flex;
justify-content:space-between;
align-items:center;
}
.info div{
display:flex;
flex-direction: column;
justify-content:space-between;
align-items:center;
}
.info h2{
    font-size: 2rem;
    color: #192d57;
    background-color: #fff;
    padding: .5rem 1rem;
    border-radius: 2em;
    margin-bottom: 1rem;
}
.info a{
    font-size: 1.5rem;
    padding: .5rem 2rem;
    border-radius: 2em;
    margin: .25rem 0;
    color:#fff;
    background-color: #192d57;
}
.info a:hover{
    color:#fff;
    background-color: #517492;
}
@media only screen and (max-width: 750px) {
    .menu img{
            max-width: 10rem;
        }
        .menuitems a{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-items: center;
            padding:.5rem .5rem;
        }
        .menu h1{
            padding:.25rem 2rem;
        }
        .menuitems{
            width:28rem;
            margin-left: 5vw;
        }
        .helping{
            background-position: 0 24rem ;
            background-color:#517492;
        }
        .support h2{
            padding:.5rem 1rem;
        }
        .volunteer h2{
            padding:.5rem 1rem;
        }
        .helping h1,.helping h2, .helping h3, .helping a{
        display:flex;
        justify-content:space-between;
        align-items:center;
        align-self: center;
        text-align: center;
        margin: 0 1rem;
        }
        .contact{
           display:flex;
           flex-direction: column;
        justify-content:space-between;
        align-items:center;
        align-self: center;
        text-align: center; 
        margin-bottom: 2rem;
        }
        .contact img{
            max-width: 20rem;
        }
        .footer{
        display:flex;
        flex-direction: column;
        justify-content:space-between;
        }
        .icons img{
            max-width:.25rem;
        }
        .icons{ 
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        align-items:center;}
        
        .socials img{
         max-width:.25rem;
        }
        .socials{
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
        }
}