/*fix header on larger screens
and footer center alignment
*/
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');

* {
    box-sizing: border-box;
}
*+*{
    margin: 0;
    padding: 0;
}

:root{
    font-family: "Figtree", sans-serif;
    --brandRed: #C92138;
    --redPink: #FF5A70;
    --blueGreen: #D7F2E5;
    --grayRed: #B1A4A4;
}
h1
{
    font-size: 4em;
}
h2{
    font-size: 2em;
}
h3{
    font-size: 1.4em;
}
h4{
    font-size: 1.1em;
}
p{
    font-size: 1.2em;
}
.inner-contact-links{
    color: #0066CC; 
}
.inner-contact-links:hover{
    color: var(--redPink);
}
.inner-contact-links:active{
    color: var(--redPink);
}
#contact-page-insta-link:hover{
    color: var(--redPink);
}
#contact-page-insta-link:active{
    color: var(--redPink);
}

header{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    background-color: black;
    justify-content: space-between;
}
#logo{
    display: flex;
    flex-direction: row;
}

#logo>a{
    text-decoration: none;
    color: var(--brandRed);
    align-self: flex-end;
}
#website-title{
    font-family: "Noto Serif", serif;
    font-size: 3em;
    text-align: left;
}
#navMediaLinks{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 0;
    margin-left: auto;
    transform: translate(0,-8%);
}
#targetPage{ 
    width: 100%;
    margin: 0.5em 1em;
    color: #D7F2E5;
}
#SocialMediaLinks{
    display: flex;
    flex-direction: row;
}
.socialMediaLogos{
    max-height:5em;
}
#logo > a> img{
    max-width: 50%;
}
#firstNav > ul{
    list-style-type: none;
    display: flex;
    flex-direction: row; 
}
#firstNav > ul >li{
    margin-right: 1em;
    font-size: 1.2em;
}
.navLinks{
    text-decoration: none;
    color: white;
}
.navLinks:hover{
    color: var(--redPink);
}
.navLinks:active{
    color: var(--redPink);
}
#currentPage{
    color: var(--redPink);
}
.button{
    padding: 0.2em 0.4em;
    border-radius: 10%;
    background-color: var(--brandRed);
}
.button:hover{
    background-color: white;
}
#top-photo{
    margin-bottom: 2em;
}
#top-photo>img{
    width: 100%;
}
#hook{
    color: var(--brandRed);
    text-align: center;
    margin-bottom: 0.5em;
}
#topMain-index{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#helpLinks{
    flex: 1 1 1;
}
#helpLinks>ul{
    list-style-type: none;
}
#helpLinks>ul>li{
    text-align: center;
    margin: 0.8em;
    padding: 0.2em 1.2em;
    border-radius: 80%;
    background-color: var(--redPink);
}
#helpLinks>ul>li:hover{
    background-color: var(--blueGreen);
}
#helpLinks>ul>li:active{
    background-color: var(--blueGreen);
}
.helpButton{
    color:black;
    text-decoration: none;
}
#catsIntro{
    background-color: var(--blueGreen);
    margin-right: 10%;
    padding: 0.25em;
    flex: 2 2 3;
}
#catsIntro>*{
    margin:2em;
}
#catsIntro>*>*{
    margin:1em;
}
#helpLinks{
    float: right;
    margin-right: 4em;
    margin-left: 4em;
}
#successStories> h2{
    text-align: center;
    margin-bottom: 0.5em;
}
#customerComment{
    display: block;
    margin: auto;
    width: 50%;
}
#customerComment>img{
    width: 100%;
}
#successIMGS{
    display: grid;
    grid-template-columns: auto auto auto auto auto;

}
.successStories-imgs{
    margin: 1em;
}
.successStories-imgs>img{
    width: 100%;
}
hr{
    width: 60%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 3em;
}
footer{
    background-color: var(--grayRed);
    padding: 0.5em;
}
footer>h4{
    color: white;
    text-align: center;
}
#topFooter{
    display: flex;
    flex-direction: row;
    justify-content: center;
}   
footer >*>*> ul{
    list-style-type: none;
}
.contactLinks{
    text-decoration: none;
    color: white;
}
.contactLinks:hover{
    color: var(--redPink)
}
.contactLinks:active{
    color: var(--redPink)
}
#copyright{
    color: white;
    text-align: center;
}
/*About page*/
#aboutTop{
    background-image: url(../assets/cat-about.png);
}
.pagetopImg{
    position: relative;
    background-size:cover;
    background-repeat: no-repeat;
    padding-bottom: 55%;
    height: 0;
}
#imgOverlay{
    background-color: rgba(255, 255, 255, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#aboutTitle{
    margin-top: 0;
    text-align: center;
    position:relative;
    padding: 25%;
}
.pageTitle{
    font-size: 3em;
    color: var(--brandRed);
    margin-top: 0;
    text-align: center;
    position:relative;
    padding: 25%;
}
#who-what{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#who-what>div{
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 1em;
    margin-bottom: 2em;
}
#missionStatement{
    background-color: var(--blueGreen);
    padding: 1em 4em;
}
#missionStatement>*{
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 1em;
    margin-bottom: 2em;
}
#missionStatement>h3{
    text-align: center;
}
/*Adopt page*/
#adoptTop{
    background-image: url(../assets/cat-adopt.png);
    position: relative;
    background-size:cover;
    background-repeat: no-repeat;
    padding-bottom: 55%;
    height: 0;
}
#adoptTitle{
    margin-top: 0;
    text-align: center;
    position:relative;
    padding: 25%;
}
#topMain-adopt{
    justify-content: space-between;
    display: flex;
    flex-direction: row;
}
#adoptionInfo{
    padding-left: 2em;
    padding-right: 20%;
}
#adoptionInfo>section{
    margin-bottom: 10%;
    margin-top: 5%;
}
#adoptionProcess>div{
    text-align: center;
    width: 30%;
    margin: 1em 0;
    padding: 0.5em 0.2em;
    border-radius: 80%;
    background-color: var(--redPink);
}
#adoptionProcess>div:hover{
    background-color: var(--blueGreen);
}
#adoptionProcess>div:active{
    background-color: var(--blueGreen);
}
.ctaButton{
    font-size: 1.4em;
    font-weight: bold;
    color:black;
    text-decoration: none;
}
#adoptImages{
    float: right;
}
#adoptImages>#adoptAsideIMGS{
    background-color: var(--blueGreen);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#adoptImages>#adoptAsideIMGS>img{
    max-width: 80%;
    margin:10%;
}

#availableCats{
    margin-top: 5em;;
    margin-right: auto;
    margin-left: auto;
    background-color: white;
}
#availableCats> h2{
    text-align: center;
    margin-bottom: 0.5em;
}
/*Foster/Volunteer page*/
#foster-volunteerTop{
    background-image: url(../assets/cat-volunteer-foster.png);
}
#topMain-foster-volunteer{
    justify-content: space-between;
    display: flex;
    flex-direction: row; 
}
#foster-volunteer-info{
    padding-left: 2em;
    padding-right: 20%;
}
#foster-volunteerApplications{
    width: 50%;
    padding: 2em;
    margin-top: 2em;
    float: right;
    background-color: var(--blueGreen);
}
#foster-volunteerApplications>div{
    text-align: center;
    padding-left: 2em;
    padding-right: 20%;
    margin: 1em 0;
    padding: 0.5em 0.2em;
    border-radius: 80%;
    background-color: var(--redPink);
}
#foster-volunteerApplications>div:hover{
    background-color: var(--brandRed);
}
#foster-volunteerApplications>div:active{
    background-color: var(--brandRed);
}
#bottomMain-foster-volunteer>*>*{
    text-align: center;

}
#learnMore{
    margin-top: 2em;
    margin-bottom: 2em;
}
#learnMore>*{
    margin-top: 1em;
    margin-bottom: 1em;
}
/*Events page*/
#eventsTop{
    background-image: url(../assets/cat-events.png);
}
#topMain-events{
    padding-left: 2em;
    padding-right: 2em;
    margin-bottom: 2em;
}
#topMain-events>h3{
    text-align: center;
}
#bottomMain-events{
    background-color: var(--blueGreen);
}
#bottomMain-events>h3{
    padding-top: 1em;
    text-align: center;
}
#events{
    margin: auto;
    justify-content: center;
    align-items: center;
    display: grid;
    grid-auto-columns:40%;
    grid-template-columns: 40% 40%;
    gap: 2em;
}
.specificEvent{
    background-color: var(--redPink);
    margin-bottom: 1em;
}
.specificEvent>h4{
    text-align: center;
}
.specificEvent>p{
    margin: 1em;
}
/*Contact page*/
#contactTop{
    background-image: url(../assets/cat-contact.png);
}
#main-contact{
    justify-content: space-between;
    display: flex;
    flex-direction: row; 
}
#direct-contact{
    flex-grow: 2;
    padding-left: 2em;
    padding-right: 20%;
}
#direct-contact>h3{
    text-align: center;
}
#contact-social-media{
    width: 30%;
    padding: 2em;
    margin-top: 2em;
    float: right;
    background-color: var(--blueGreen);
}
#contact-social-media>h3{
    text-align: center;
}
#contact-methods{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#contact-methods>section{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
#email-logo, #phone-logo{
    max-height: 5em;
}
#instagram, #facebook{
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
}
/*animation elements*/
#logo>a>img{
    animation: logo-in 2s;
}
@keyframes logo-in{
    0%{
        opacity: 0;
        transform: translate(-10em, -10em);  
    }
    100%{
        opacity: 1;
        transform: translate(0em, 0em);
    }
}
.pageTitle{
    animation: page-intro-in 3s;
}
@keyframes page-intro-in{
    0%{
        opacity: 0.2; 
    }
    100%{
        opacity: 1;
    }
}

/*phone resizing*/
@media(max-width:600px){
/*general*/
.pageTitle{
    font-size: 2em;
}
.ctaButton{
    font-size: 1.2em;
}
/*header*/
header{
    display: block;
}
#logo{
    display: flex;
    flex-direction: row;
}
#navMediaLinks{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
#SocialMediaLinks{
    display: none;
}
#logo{
    margin: auto;
}
#logo > a> img{
    max-width: 80%;
    display: flex;
}
#logo>a+a{
    display: none;
}
    #dropdown-icon{
        align-self: flex-end;
        margin-left: 40%;
        margin-right: 1em;
        margin-bottom: 1em;
        color: white;
    }
    .dropdown-bars>div{
        width: 40px;
        margin-top: 0.4em;
        margin-bottom: 0.4em;
        border: solid 0.2em white;
        border-radius: 10%;
    }
    /*dropdown icon changes*/
    .NavBar1-onOpen{
        animation: nav-bar1-rotate 1s;
        transform-origin: center;
        transform: translate(0, 1.6em) rotate(40deg);
    }
    @keyframes nav-bar1-rotate{
        0%{
            transform: translate(0) rotate(0);
        };

        100%{
            transform: translate(0, 1.6em) rotate(40deg);
        };
    }
    .NavBar3-onOpen{
        transform-origin: center;
        animation: nav-bar2-rotate 1s;
        transform: rotate(-40deg);
    }
    @keyframes nav-bar2-rotate{
        0%{transform: rotate(0);};
        100%{transform: rotate(-40deg);};
    }
    .NavBar2-onOpen{
        animation: nav-bar3-disappear 0.5s;
        opacity: 0;
    }
    @keyframes nav-bar3-disappear{
        0%{opacity: 1;};
        100%{opacity: 0;};
    }
    /*navigation*/
#firstNav{
    display: none;
    margin: auto;
}    
#firstNav > ul{
    list-style-type: none;
    flex-direction: column;
    text-align: center;
    /*display: none;*/
}
#firstNav > ul >li{
    margin-top: 1em;
}

/*footer*/
#topFooter{
    flex-direction: column;
} 
#secondNav>ul{
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
#secondNav, #contact{
    align-self: center;
}
#contact>ul{
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
#secondNav>ul, #contact>ul{
    text-align: center;
}

footer >*>*> ul>li{
    margin-bottom: 1em;
}
/*home page main content*/
#topMain-index{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#catsIntro{
    width: 100%;
}

#customerComment{
    width: 80%;
}
#successIMGS{
    display: grid;
    grid-template-columns: auto;

}
.successStories-imgs{
    margin: 1em;
}
/*about page main content*/
#who-what{
    flex-direction: column;
}
/*adopt page main content*/
#adoptImages{
    display: none;
}
#adoptionProcess>div{
    width: 60%;
}
/*foster/volunteer page main content*/
#topMain-foster-volunteer{
    flex-direction: column;
}
#foster-volunteerApplications{
    width: 100%;
}
#foster-volunteerApplications>div{
    margin-top: 2em;
    padding: 1em;
}
/*events page main content*/
#events{
    grid-auto-columns:90%;
    grid-template-columns: 90%;
}
/*contact page main content*/
#direct-contact{
    flex-grow: 2;
    padding-left: 2em;
    padding-right: 2em;
}
#email-logo, #phone-logo, #insta-logo, #facebook-logo{
    max-height: 8em;
}
#main-contact{
    flex-direction: column; 
}
#contact-social-media{
    width: 100%;
}
#contact-methods{
    flex-direction: column;
}
.inner-contact-links{
    font-size: 1.2em;
}
/*helplinks*/
#helpLinks>ul{
    list-style-type: none;
}
#helpLinks>ul>li{
    margin: 2em;
    padding: 1em 2em;
}
}


/*tablet resizing*/
@media (min-width:601px) and (max-width:1024px){
  /*general*/
.pageTitle{
    font-size: 3em;
}
.ctaButton{
    font-size: 2em;
}
/*header*/
header{
    display: block;
    flex-direction: column;  
}
#logo{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}
#navMediaLinks{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
#SocialMediaLinks{
    display: none;
}
#logo{
    margin: auto;
}
#logo > a> img{
    max-width: 80%;
    display: flex;
}
#logo>a+a{
    display: none;
}
#dropdown-icon{
    align-self: flex-end;
    margin-left: 35%;
    margin-bottom: 1em;
    color: white;
}
.dropdown-bars>div{
    width: 60px;
    margin-top: 0.4em;
    margin-bottom: 0.4em;
    border: solid 0.2em white;
    border-radius: 10%;
}
/*dropdown icon changes*/
.NavBar1-onOpen{
    animation: nav-bar1-rotate 1s;
    transform-origin: center;
    transform: translate(0, 1.6em) rotate(40deg);
}
@keyframes nav-bar1-rotate{
    0%{
        transform: translate(0) rotate(0);
    };

    100%{
        transform: translate(0, 1.6em) rotate(40deg);
    };
}
.NavBar3-onOpen{
    transform-origin: center;
    animation: nav-bar2-rotate 1s;
    transform: rotate(-40deg);
}
@keyframes nav-bar2-rotate{
    0%{transform: rotate(0);};
    100%{transform: rotate(-40deg);};
}
.NavBar2-onOpen{
    animation: nav-bar3-disappear 0.5s;
    opacity: 0;
}
@keyframes nav-bar3-disappear{
    0%{opacity: 1;};
    100%{opacity: 0;};
}
    /*navigation*/
#firstNav{
    display: none;
    margin: auto;
}    
#firstNav > ul{
    list-style-type: none;
    flex-direction: column;
    text-align: center;
    /*display: none;*/
}
#firstNav > ul >li{
    font-size: 1.5em;
    margin-top: 1em;
}
/*footer*/
#topFooter{
    flex-direction: column;
}
#secondNav>ul{
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
#secondNav>ul>li{
    font-size: 0.8em;
}
#contact>ul{
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
} 
#secondNav, #contact{
    align-self: center;
}
#secondNav>ul, #contact>ul{
    text-align: center;
} 
#contact>ul>li{
    font-size: 0.8em;
}
footer >*>*> ul{
    font-size: 1.5em;
}
footer >*>*> ul>li{
    margin: 1.5em;
}
#copyright{
    font-size: 1em;
}

/*home page main content*/
#topMain-index{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#catsIntro{
    width: 100%;
}
#customerComment{
    width: 90%;
}
#successIMGS{
    display: grid;
    grid-template-columns: auto auto;

}
.successStories-imgs{
    margin: 0.8em;
}
/*about page main content*/
#who-what{
    flex-direction: column;
}
/*adopt page main content*/
#adoptImages{
    display: none;
}
#adoptionProcess>div{
    width: 60%;
    margin-top: 3em;
    padding: 1.5em;
}
/*foster/volunteer page main content*/
#topMain-foster-volunteer{
    flex-direction: column;
}
#foster-volunteerApplications{
    width: 100%;
}
#foster-volunteerApplications>div{
    margin-top: 3em;
    padding: 1.5em;
}
/*events page main content*/
#events{
    grid-auto-columns:90%;
    grid-template-columns: 90%;
}
/*contact page main content*/
#direct-contact{
    flex-grow: 2;
    padding-left: 2em;
    padding-right: 2em;
}
#email-logo, #phone-logo, #insta-logo, #facebook-logo{
    max-height: 12em;
}
#main-contact{
    flex-direction: column; 
}
#contact-social-media{
    width: 100%;
}
#contact-methods{
    flex-direction: column;
}
.inner-contact-links{
    font-size: 1.8em;
}
/*text sizing*/
h1
{
    font-size: 3em;
}
h2{
    font-size: 2.5em;
}
h3{
    font-size: 1.8em;
}
h4{
    font-size: 1.5em;
}
p{
    font-size: 1.3em;
}
secondNav

/*helplinks*/
#helpLinks>ul{
    list-style-type: none;
}
#helpLinks>ul>li{
    font-size: 0.8em;
    margin: 2em;
    padding: 1em 2em;
}
}