:root {
/* --- Color Pallete --- */
    --primary-color : #ebf9ec;
    --secondary-color : #375c39;
    --background-color : #fbfffc;
    --text-color: #284027;
    --extra-color : #638665;

/* --- Typography ---*/
    --title-text : "Nunito", sans-serif;
    --button-text : "Quicksand", sans-serif;
    --small-text : "Poppins", sans-serif;
}

* {
    font-family: var(--small-text);
    box-sizing: border-box;
}

/* ----- Keyframes ------*/
@keyframes fade {
    0% {
        opacity: 0%;
    }
    100% {
        opacity: 100%;
    }
}

/* ----- Header Content -----*/

header {
    display: grid;
    grid-template-columns: 1fr 1.5fr 0.5fr 1fr;
    align-items: center;
    border-bottom: solid 2px var(--primary-color);
}

header img {
    width: 85px;
    height: 85px;
}

header span {
    font-size: 1.1rem;
    color: var(--text-color);
    font-family: var(--small-text);
}

header .toggle-theme {
    background: none;
    border: none;
}

header .toggle-theme img {
    width: 33px;
    height: 33px;
}

/* ----- Hamburger -----*/

.hamburger {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--button-text);
    font-size: 1.8rem;
    color: var(--text-color);
}

.hamburger::before{
    content: "\2630";
}

.hamburger.show::before {
    content: "\00D7";
}

/* ----- Nav Content -----*/

.navigation {
    display: none;
    background-color: var(--secondary-color);
    padding: 3px;
}

.navigation.show {
    display: block;
}

.navigation ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    justify-content: space-evenly;
    padding: 10px;
}

.navigation a {
    display: block;
    text-decoration: none;
    color: var(--background-color);
    font-family: var(--small-text);

}

.navigation a:hover{
    background-color: var(--extra-color);
    border-radius: 3px;
}

.navigation a.active {
  border-bottom: 3px solid var(--background-color);
  font-weight: bold;
}

/* ----- Main ----- */

main {
    text-align: center;
}

main h1 {
    color: var(--text-color);
    font-family: var(--title-text);
}

main button {
    cursor: pointer;
    background-color: var(--secondary-color);
    color: var(--background-color);
    border: none;
    border-radius: 10px;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 10px;
}

main button:hover {
    background-color: var(--extra-color);
    color: var(--text-color);
}

main .purpose {
    text-align: center;
}

main .invitation{
    text-align: center;
}

main .purpose p {
    color: var(--text-color);
}

main .invitation p {
    color: var(--text-color);
}

main .purpose div p {
    animation: fade 2s;
}

main .call-action {
    background-color: var(--secondary-color);
}

main .call-action h2, p{
    color: var(--background-color);
    padding: 10px;
    text-decoration: none;
}

main .call-action button {
    cursor: pointer;
    background-color: var(--text-color);
    border: none;
    border-radius: 10px;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

main .call-action h3 {
    color: var(--background-color);
    font-family: var(--button-text);
    font-size: 21px;
}

main .call-action button:hover {
    background-color: var(--extra-color);
    color: var(--text-color);

}

main section .cards section{
    border-bottom: 2px solid;
    border-color: var(--primary-color);
    margin-bottom: 10px;
}

main section .cards h2 {
    color: var(--text-color);
    font-family: var(--title-text);
    padding: 10px;
}

main section .cards p {
    color: var(--text-color);
    font-family: var(--small-text);
    font-size: medium;
}

main section .cards img {
    width: 125px;
    height: 100%;
    border-radius: 10px;
}

/* Form */

form {
    background: var(--text-color);
    padding: 20px;
    margin: 15px;
    border-radius: 10px;
}

form div {
    margin-bottom: 10px;
}

label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--background-color);
    font-family: var(--small-text);
}

input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--background-color);
    border-radius: 10px;
    font-size: 20px;
    box-sizing: border-box;
}

input[type="submit"] {
    margin-top: 15px;
    background-color: var(--secondary-color);
    color: var(--background-color);
    border: none;
    padding: 10px 15px;
    font-size: 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.5s ease;
}

input[type="submit"]:hover {
    background-color: var(--extra-color);
}

main #form-data {
    text-align: left;
}

/* ----- Footer ------*/

footer {
   background-color: var(--text-color);
   padding: 10px;
   text-align: center;
   margin-top: 20px;
}

footer p, a {
    color: var(--background-color);
    text-decoration: none;
    font-family: var(--small-text);
}

.social {
    display: flex;
    justify-content: center;
    column-gap: 8px;
}

.social a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
}

.social img {
    width: 22px;
    height: auto;
}

.social a:hover {
    background-color: var(--extra-color);
    border-radius: 10%;
}

/* ----- Modal -----*/

dialog {
    border: none;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    width: 700px;
    animation: popUp 0.5s ease-out forwards;
}

dialog p {
    font-family: var(--font-text);
    font-size: larger;
    color: var(--text-color);
}

dialog::backdrop {
    background-color: rgba(24, 24, 24, 0.708);
}

dialog .close-button, button {
    display: inline-block;
    margin-top: 25px;
    background-color: var(--text-color);
    color: var(--background-color);
    border: none;
    padding: 15px;
    border-radius: 10px;
    cursor: pointer;
}
dialog button:hover {
    background-color: var(--extra-color);
}