/* ================================== Utility Styles ================================== */

:root {
    --black: #1c1c1c;
    --dark-gray: #4a4a4a;
    --pink: #ff6f91;
    --medium-gray: #9e9e9e;
    --med-li-gray: #d3d3d3;
    --light-pink: #ffc1cc;
    --light-gray: #e9e9e9;
}
html {color: var(--black);}
@font-face {
    font-family: Reem-Kufi;
    src: url(/fonts/ReemKufi-Regular.ttf);
    font-weight: 200;
}
@font-face {
    font-family: Reem-Kufi;
    src: url(/fonts/ReemKufi-Medium.ttf);
    font-weight: 400;
}
@font-face {
    font-family: Reem-Kufi;
    src: url(/fonts/ReemKufi-SemiBold.ttf);
    font-weight: 600;
}
@font-face {
    font-family: Reem-Kufi;
    src: url(/fonts/ReemKufi-Bold.ttf);
    font-weight: 800;
}
h1 {
    font-size: 7rem;
    font-family: Reem-Kufi;
}
h2 {
    font-family: Reem-Kufi;
    font-size: 4rem;
    margin-bottom: -1.5rem;
    margin-left: -1rem;
}
h3 {
    font-family: Reem-Kufi;
    font-size: 3rem;
}
h4 {
    font-family: Reem-Kufi;
    font-size: 2.25rem;   
}
h5 {
    font-family: Reem-Kufi;
    font-size: 2.25rem;
    font-weight: 600;
}
h6 { font-family: Reem-Kufi;
    font-weight: 600;
    font-size: 1.5rem;
}
p, i, strong, a, input, select, label, button, textarea, ::placeholder, li {
    font-family: Reem-Kufi;
    font-size: 1.75rem;
    color: var(--dark);
    font-weight: 200;
}
input, textarea {padding: 1rem;}
::placeholder {color: var(--medium-gray);}
p + p {padding-top:2rem;}
strong {
    font-weight: 800;
}
i {font-style: italic;}
a {
    transition-property: filter;
    transition-duration: .3s;
}
a:hover, button:hover {filter: brightness(.7);}
section {padding: 0;}
button {
    border-radius: 0;
    border: none;
}
li {
    padding-bottom:.75rem;
    margin-left:2rem;
    list-style-type: disc;
}
img {max-width: 100%;}
.column, .row {padding: 0;}
.white-heading {
    color: white;
}
.light-heading {
    color: var(--light-gray);
}
.pink-heading {
    color: var(--light-pink);
}
.gray-heading {
    color: var(--medium-gray);
}
.grid-row {padding: 0;}
ul {margin-top: 1rem;}

/* ================================== Main Styles ================================== */

/* Header */
#mobile-nav, #mobile-menu-button {display: none;}
header .flex-row {padding-right:1rem;}
header li, header a, footer a, footer li {
    text-decoration: none;
    list-style: none;
    margin-left: 0;
}
#logo {flex:.65;}
#desktop-nav {
    display: flex;
    justify-content: space-around;
}
header li > a {font-size: 1.65rem;}
#header-socials {
    display: flex;
    justify-content: space-between;
}
#header-socials img {
    height:2rem;
    width: auto;
    margin-top:1rem;
}
#header-donate-button {
    background-color: var(--light-pink);
    text-align: center;
    display: block;
    padding: 1rem;
}
header section {align-items: center;}
#top-right {max-width: 15rem;}
#active-nav {
    font-weight: 800;
    box-shadow: inset 0px -1.75rem 0px -0.1rem #ffc1cc;
}
.page-title{
    text-align: center;
    margin: 4rem 0;
    color: var(--pink);
}


/* Homepage */
#mobile-hero {display: none}
#intro-founding-goals {
    margin-top: -.5rem;
    background-color: var(--med-li-gray);
}
#intro p {
    font-size: 3rem;
    font-weight: 100;
}
#intro-founding-goals .column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#intro {
background-color: var(--light-pink);
padding: 2rem;
flex-grow: 2;
}
#intro h4 {
    padding-bottom:2rem;
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.2;
}
#founding {
    background-color: var(--light-gray);
    padding: 2rem;
}
#goals {
    background-color: var(--med-li-gray);
    padding: 2rem;
}
#goals p, #goals li {font-size: 1.7rem;}
#donate, #donate-2 {
    padding: 4rem;
    transform: translateX(2rem);
}
#donate .column:last-of-type, #donate-2 .column:last-of-type, #volunteer .column:first-of-type {
    align-content: center;
    text-align: center;
}
#volunteer {
    background-color: var(--dark-gray);
    margin-top: -.2rem;
    color: white;
    z-index: 2;
    position: relative;
}
#volunteer .column {padding: 2rem;}
.donation-button, #volunteer-button {
    text-align: center;
    padding: 1rem 2rem;
    background-color: var(--pink);
    text-decoration: none;
    color: white;
}
#mission-box {
    background-color: white;
    max-width: 65%;
    margin: -28rem auto 6rem auto;
    position: relative;
    padding: 2rem;
}
#events, #email, #documents > div.column:last-of-type {
    background-color: var(--light-gray);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#events-button, #email-button, #documents > div.column:last-of-type > a, #objectives-button {
    display: block;
    text-align: center;
    text-decoration: none;
    padding:1rem 3rem;
    background-color: var(--pink);
    color: white;
}
#email {background-color: var(--light-pink);}
#email-button {background-color: var(--dark-gray);}
#objectives-button {
    background-color: var(--dark-gray);
    margin-top:2rem;
}
#events-email {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    margin-top: -2rem;
}
#share .column {
    max-width: 70rem;
    padding: 3rem 4rem 6rem 4rem;
    text-align: center;
    margin: auto;
}
#share p {padding-bottom:3rem;}
#share h2 {
    margin: none;
    padding:2rem;
    color: var(--light-pink);
}
.button-column {flex-grow: .66;}
#documents > div.column:last-of-type {
    background-color: var(--pink);
}
#documents > div.column:last-of-type > a {background-color: var(--dark-gray);}
#documents > .column:first-of-type {max-width: 66rem;}

/* About page */
#bios-list {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
}
.bios-link {text-decoration: none;}
.bios-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
    border: solid 1px var(--medium-gray);
    border-radius: .5rem;
    background-color: white;
    box-shadow: 0 .5rem .5rem var(--light-gray);
}
.bios-div > h6 {
    color: var(--pink);
    font-weight: 200;
    padding-bottom: .5rem;  
}
.bios-div > p {font-size: 1.5rem;}
.bios-photo {
    width: 100%;
    max-width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 1rem;
    border: 2px solid var(--light-gray);
}
#objectives-section {
    justify-content: center;
    gap: 2rem;
}

/* FAQ page */
.answer {margin:1rem 0 4rem 0;}
#faq {
    max-width:800px;
    margin: auto;
}

/* Objectives page */
#objectives-content {
    max-width:800px;
    margin: auto;
}

/* Contact page */
#contact-form {
    display: flex;
    flex-direction: column;
    flex-grow: 2;
}
#contact-form button {
    align-self: flex-end;
    padding: 1rem 8rem;
    background-color: var(--light-pink);
}

/* Documents page */
#document-list {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
}
.document-link {text-decoration: none;}
.document-div {
    padding: 1rem;
    border: solid 1px var(--medium-gray);
    border-radius: .5rem;
    background-color: white;
    box-shadow: 0 .5rem .5rem var(--light-gray);
}
.document-div > h6 {
    color: var(--pink);
    font-weight: 200;
    padding-bottom: .5rem;  
}
.document-div > p {font-size: 1.5rem;}

/* Donate page */
#donate-content p {font-size:1.25rem}
#donate-content h3 {margin-bottom: 1rem;}
#donate-content {
    align-items: center;
}
#donate-content .column:first-of-type {display: flex;}
#donate-button {
    text-align: center;
    padding: 1rem 2rem;
    text-decoration: none;
    background-color: var(--pink);
    margin: auto;
}

/* Footer */
footer {
    background-color: var(--light-gray);
    border-top: var(--medium-gray) 10px solid;
    color: var(--medium-gray);
    margin-top: 4rem;
}
#site-map {margin-right: 2rem;}
#site-map li {padding: 0;}
#site-map li a {font-size: 1.5rem;}
#site-map ul {margin-top:0}
footer img {
    filter: grayscale();
    height: 2rem;
    padding-right: 1rem;
    margin-top: 1.5rem;
}
footer h6 {
    border-bottom: var(--medium-gray) 1px solid;
    padding-bottom: .5rem;
    margin-bottom: .5rem;
    font-weight: 800;
}
footer li, footer p {font-weight: 200;}
#site-map {flex-grow: .5;}
#land-use {flex-grow: 2;}
#land-use p {font-size: 1.25rem;}
#footer-bottom, #footer-bottom a {
    text-align: center;
    margin-top: 2rem;
    font-size: 1rem;
}
/* ================================== Mobile Styles ================================== */

@media screen and (max-width: 720px) {
#mobile-nav a {
    background-color: white;
    transition-property: filter;
    transition-duration: .3s;
    display: block;
    padding: .5rem;
}
#mobile-nav li {padding: .25rem;}   
#mobile-nav ul {margin-top: 0;}
#desktop-nav, #desktop-hero {display: none;}
#mobile-hero {display: block;}
#mobile-menu-button {
    display: block;
    width: 40rem;
    padding: 1rem;
}

header .flex-row {
    display: flex;
    justify-content: space-between;
}
#logo {flex: .55;}
#header-donate-button {font-size: 1.5rem;}
#intro p, #intro h4 {
    font-size: 2.1rem;
}
#donate .button-column, #donate-2 .button-column {
    margin-top: 3rem;
}
#volunteer {
        display: flex;
        flex-direction: column-reverse;
        padding-bottom: 2rem;
        margin-top: 2rem;
}
#mission-box {
    max-width: unset; 
    margin: unset;
}
#events-email {
    display: block;
    margin-top:unset;
}
#events, #email {
    min-height: 20rem;
    padding: 3rem;
    margin: 0 2rem;
}
#events-email img.column:last-of-type {
    margin: 0 2rem;
    width: 36rem;
}
#documents > .column:first-of-type {
    max-width: 40rem;
    margin-bottom: -1rem;
}
#documents a {margin-top:2rem;}
#contact, #faq .column{
    padding: 0 2rem;
}
#contact .column {margin-bottom: 2rem;}
}