/* ******************** GLOBAL ******************** */

    html {
        scroll-padding-top: 60px;
    }

    main {
        margin-top: 60px;
    }

    a {
        color: var(--color-blue-fluo);
    }

        a:hover {
            color: var(--color-green-fluo);
        }

    i {
        color: var(--color-green-fluo);
    }

    /* ********** titles ********** */

        h1 {
            font-weight: bold;
            text-align: center;
            text-transform: uppercase;
            color: var(--color-black);
        }

        h2,
        h3,
        h4,
        h5 {
            color: var(--color-gray);
            font-weight: bold;
        }

        h2 {
            text-transform: uppercase;
        }
    
        .main-title {
            background-color: var(--color-blue);
            margin-bottom: 5rem;
            padding: 2rem 0;
        }

            .main-title h1 {
                color: var(--color-white);
                text-transform: uppercase;
            }

    /* ********** buttons ********** */

        .btn,
        input[type="submit"].btn {
            border: none;
            background-color: var(--color-green-fluo);
            color: var(--color-white);
            padding: 0.5rem 2rem;
            margin-top: 1rem;
        }

        .btn:hover,
        input[type="submit"].btn:hover {
            background-color: var(--color-blue-fluo);
            color: var(--color-white);
        }

        input[type="checkbox"] {
            accent-color: var(--color-green-fluo);
        }
    
    /* ********** forms ********** */

        form :focus {
            border-color: var(--color-green-fluo) !important;
            box-shadow: none !important;
        }

        form select:invalid,
        select option[value=""] {
            color: var(--color-gray-light);
        }

/* ******************** HEADER ******************** */

    .header-scrolled > .navbar {
        box-shadow: 0px 2px 15px var(--color-black-25);
    }

    header nav {
        height: 60px;
    }

    header nav img {
        max-height: 30px;
    }

        header .navbar {
            background-color: var(--color-white);
        }

            header .navbar-nav .nav-item .nav-link {
                color: var(--color-gray-light);
            }

                header .navbar-nav .nav-item .nav-link:hover {
                    color: var(--color-green-fluo);
                }

/* ******************** FOOTER ******************** */

    footer {
        background-color: var(--color-gray-extra-light);
    }

    #newsletter {
        background-color: var(--color-gray-extra-light);
        text-align: center;
    }

        #newsletter p {
            color: var(--color-gray-light);
            font-style: italic;
        }

        #newsletter form {
            position: relative;
        }

            #newsletter form input[type="email"] {
                padding: calc(0.5rem - 1px);
            }

            #newsletter form input[type="submit"] {
                position: absolute;
                top: -1rem;
                right: 0;
                padding: 0.5rem 1rem;
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }

    #newsletter #social-links a {
        width: 35px;
        height: 35px;
        line-height: 35px;
        border-radius: 5px;
        margin: 0 0.25em;
        background-color: var(--color-light);
    }

        #newsletter #social-links a i {
            color: var(--color-blue-dark);
        }

        #newsletter #social-links a:hover {
            background-color: var(--color-green-fluo);
        }

            #newsletter #social-links a:hover > i {
                color: var(--color-white);
            }

    footer {
        font-size: 0.85rem;
        text-align: center;
    }

        footer a {
            color: var(--color-gray-light);
            text-decoration: none;
        }

/* ******************** MEDIA QUERIES ******************** */

    /* ********** Smartphone and Tablet ********** */

        @media screen and (max-width: 992px) {

            header .navbar .navbar-collapse {
                background-color: var(--color-white);
                box-shadow: 0px 15px 15px var(--color-black-25);
                margin: 0.6rem -0.75rem -0.75rem;
                padding: 0.75rem;
            }

        }

/* ******************** KEYFRAMES ******************** */

    @keyframes move-up-down {
        0% {
            transform: translateY(1rem);
        }
        100% {
            transform: translateY(-1rem);
        }
    }