/* To-Do:
 - add media queries */

@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* for any padding, margin, and box-sizing values that aren't reset via normalize.css */
}

:root {

    --gradient-one-color: #a8edea;
    --gradient-two-color: #fed6e3;

    --gradient-background-colour: linear-gradient(45deg, var(--gradient-one-color), var(--gradient-two-color));

    --footer-background-colour: rgba(88, 141, 143, 0.76);
    --header-background-colour: rgba(119, 72, 119, 0.43);

    --form-border-color: rgba(170, 165, 185, 0.8);
    --form-background-colour: rgba(152, 166, 165, 0.28);

    --font-family-indie-flower: "Indie Flower", cursive;
}

body {
    background: var(--gradient-background-colour);
    font-family: var(--font-family-indie-flower);
}

body p {
    font-size: 1.05rem;
}

/* Header */

#header-global {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--header-background-colour);
    height: 5rem;
}

.header-navigation {
    display: flex;
    justify-content: space-between;
}

.header-navigation-li {
    list-style-type: none;
}

#header-box-one {
    display: flex;
    align-items: center;
    gap: .6rem;
}

#header-box-two {
    display: flex;
    align-items: center;
}

.header-navigation-ul {
    display: flex;
}

.header-navigation-li {
    margin: 1rem;
}

.header-logo img {
    width: auto;
    margin: .5rem;
    max-height: 4rem;
    border: .15rem var(--form-border-color) solid;
}

/* Footer */

#footer-global {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--footer-background-colour);
    height: 5.5rem;
}

.footer-navigation {
    display: flex;
    text-align: center;

}

.footer-logo img {
    width: auto;
    margin: .5rem;
    max-height: 4rem;
}

#footer-box-one {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.footer-navigation-ul {
    display: flex;
    flex-direction: column;
}

.footer-navigation-li {
    margin: .25rem;
}

.footer-navigation-li {
    list-style-type: none;
}

.footer-navigation-li a {
    font-size: 1.15rem;
}

/* Links */

a {
    display: inline-block;
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    font-size: 1.5rem;
}

a:link {
    color: #073d07;
}

a:visited {
    color: #28253f;
}

a:hover {
    color: #7a7a50;
    transform: scale(0.98);
}

a:active {
    color: #d7a39a;
}