@font-face {
    font-family: "Livory Regular";
    src:    url("/assets/font/Livory-Web-Regular.eot") format("eot"), url("/assets/font/Livory-Web-Regular.woff") format("woff"),
            url("/assets/font/Livory-Web-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Samtalira";
    src:    url("/assets/font/Samtalira.woff") format("woff"),
            url("/assets/font/Samtalira.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

:root {
    --dgreen: #17321b;
    --lgreen2: #587A29;
    --lgreen: #98c239;
    --dgrey: #404040;
    --grey: #808080;
    --lgrey: #e0e0e0;
    --lgrey2: #efefef;
    --llgrey: #f8f8f8;
}

/* BODY */
body {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin: 0;

    background: white;

    font-family: "Livory Regular", serif, sans-serif;
    font-size: medium;
    color: var(--dgreen);
    ::selection {
        background-color: #98c23960;
    }

    * {
       font-family: "Livory Regular", serif, sans-serif; 
    }
}

/* HEADER */
header {
    width: 95%;
    height: 8rem;

    margin: 0 2.5% 3rem 2.5%;

    display: grid;
    grid-template-columns: 15% 70% 15%;
    align-items: center;

    background: white;

    a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        justify-self: center;

        text-decoration: none;
        
        img {
            height: 4.5rem;
            max-width: 50vw;
        }

        p {
            max-width: 50vw;

            margin: 0;

            color: #17321b;
            text-align: center;
            font-size: 1rem;
            text-wrap: nowrap;
        }
    }
    a:hover {
        text-decoration: none;
    }


    button {
        padding: 0.5em 1em;

        border: none;

        background-color: transparent;

        font-size: x-large;
    }
    button:hover {
        padding: 0.5em 1em;

        border: none;

        background-color: var(--llgrey);

        font-size: x-large;
    }

    button:last-child {
        justify-self: right;
    }
}

/* MAIN */
main {
    width: 80vw;
    min-height: calc(100dvh - 26rem);
}

/* FOOTER */
footer {
    width: 100%;
    height: 12rem;

    margin-top: 3rem;

    display: grid;
    grid-template-columns: 42.5% 15% 42.5%;

    background: var(--dgreen);

    >div:nth-child(2) {
        height: 12rem;

        display: grid;
        grid-template-rows: 8rem 4rem;

        div {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;

            margin-top: 0.75rem;

            img {
                filter: brightness(100);
            }
            img:first-child {
                height: 4.75rem;
            }
            img:last-child {
                height: 2.25rem;
            }
        }

        p {
            margin: 1rem 0 0.5rem 0;

            font-size: small;
            color: white;
            text-align: center;
        }
    }

    >div:first-child, >div:last-child {
        height: fit-content;

        display: flex;
        gap: 2rem;

        margin: 1rem 0 0 0;

        a {
            font-size: x-large;
            color: white;
            text-decoration-line: none;
        }
        a:hover {
            color: var(--lgreen);
            text-decoration-line: underline;
            text-underline-offset: 0.5rem;
        }
    }

    >div:first-child {
        justify-content: end;
    }

    >div:last-child {
        justify-content: start;
    }
}

/* HEADERS */
h1::before, h1::after {
    content: "";

    width: 65%;
    height: 0rem;
    
    display: block;

    border: 0.1rem solid var(--dgreen);
    border-radius: 1rem;
}
h1::before {
    justify-self: end;
}
h1::after {
    justify-self: start;
}
h1 {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2.5em;
    align-items: center;

    text-align: center;
}

/* LINKS */
a {
    color: var(--lgreen);
}
a:hover {
    text-decoration-line: underline;
    cursor: pointer;
}
a::selection {
  color: var(--dlgreen);
}

/* ICONS */
.icon {
    display: inline;
    vertical-align: top;
    height: 1em;
    padding: 0.125em 0.125em 0.125em 0.25em;
}

/* BUTTONS */
button, .button {
    width: fit-content;

    padding: 0.75em;

    border: 0.1rem solid var(--lgrey2);
    border-radius: 0.5rem;

    background-color: var(--lgrey2);

    font-size: large;

    transition: all ease-in-out 0.25s;
}

button:hover, .button:hover {
    transition: all ease-in-out 0.25s;

    padding: 0.75em;

    border: 0.1rem solid var(--lgreen);
    border-radius: 0.5rem;

    background-color: var(--lgrey);

    cursor: pointer;
}


/* CONTAINER */
.container {
    width: 80vw;

    display: flex;
    justify-content: center;
    gap: 2rem;
}


/* CARDS */
.card {
    width: 18rem;
    height: 24rem;

    display: grid;
    grid-template-rows: 6rem 18rem;

    border: 0.125rem solid var(--lgrey);
    border-radius: 1rem;

    background-color: var(--lgrey);
    background-repeat: no-repeat;
    background-size: 18rem 6rem;
    

    transition: all ease-in-out 0.25s;

    .card-header {
        width: 18rem;
        height: 6rem;

        margin: 0;

        align-content: center;

        border-radius: 0.85rem 0.85rem 0 0;

        backdrop-filter: blur(2px) brightness(0.8) saturate(0.7);
        
        color: white;
        font-weight: normal;
        text-align: center;

        transition: all ease-in-out 0.25s;
    }

    .card-content {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 1rem;

        border-radius: 0 0 0.85rem 0.85rem;

        background-color: var(--llgrey);

        font-size: large;
    }
}

.card:hover {
    transition: all ease-in-out 0.25s;

    border: 0.125rem solid var(--lgreen);

    .card-header {
        transition: all ease-in-out 0.25s;

        backdrop-filter: blur(2px) brightness(0.85) saturate(0.8);
    }
}

.card.auto {
    height: fit-content;

    grid-template-rows: 6rem auto;
}