.ref {
    color: #c01935; /* A */
    color: #fe021b; /* B */
    color: #f8a2bb; /* C */
    color: #e9b495; /* D */
    color: #eef0e5; /* E */
    color: #b90f1f; /* 1 */
    color: #cc0112; /* 2 */
    color: #d8020c; /* 3 */
    color: #de0002; /* 4 */
    color: #f0021b; /* 5 */
    color: #ff002e; /* 6 */
    color: #fa2e31; /* 7 */
    color: #cf1a4b; /* 8 */
    color: #e6504f; /* 9 */
    color: #eca5b3; /* 10 */
    color: #e8c397; /* 11 */
    color: #B5FD02; /* complementary 1 */
    color: #02F4D3; /* complementary 2 */
    color: #33A532; /* complementary 2 */
    color: #277D26; /* complementary 2 */
    color: #42D240; /* complementary 3 */

}


html {
    margin: 0px;
    padding: 0px;
    background: url("/img/Background4.png") no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    height: 100vh;
}

body {
    margin: 0px;
    padding: 0px;
}

.brand-card {
    font-size: 3em;
    font-weight: 400;
    position: absolute;
    top: 70vh;
    width: 100%;
    transform: translateY(-50%);
    text-align: center;
    color: #c01935;
}

.brand-title {
    font-size: 1em;
    margin: 5px 0px;
}

.brand-slogan {
    font-size: 0.5em;
    margin: 5px 0px;
}

.slogan-card {
    font-size: 3.5em;
    font-weight: 400;
    position: absolute;
    top: 43vh;
    width: 100%;
    transform: translateY(-50%);
    text-align: center;
    color: #42D240;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.get-informed-card {
    font-size: 1.5em;
    font-weight: 100;
    position: absolute;
    width: 100%;
    top: 80vh;
    color: #eef0e5;
    text-align: center;
}

span {
    margin: 0px 10px;
}

.glow {
    text-align: center;
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 2.5s ease-in-out infinite alternate;
}

/* @keyframes glow {
    from {
        text-shadow: 0 0 7px #fff, 0 0 10px #ff4da6, 0 0 20px #e60073, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073;
    }
    to {
        text-shadow: 0 0 15px #fff, 0 0 15px #ff4da6, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6;
    }
} */

@keyframes glow {
    from {
        text-shadow: 0 0 20px #A5EDA4, 0 0 10px #C3FD33, 0 0 20px #33A532, 0 0 30px #33A532, 0 0 40px #33A532, 0 0 50px #33A532, 0 0 60px #33A532;
    }
    to {
        text-shadow: 0 0 20px #A5EDA4, 0 0 15px #C3FD33, 0 0 30px #88E187, 0 0 40px #88E187, 0 0 50px #88E187, 0 0 60px #88E187, 0 0 70px #88E187;
    }
}


@media all and (max-width: 1000px) and (min-width: 660px) {
    body {
        font-size: 12px;
    }
}

@media all and (max-width: 659px) and (min-width: 0px) {
    body {
        font-size: 10px;
    }
}