body {
    background-image: linear-gradient(rgb(229, 182, 229), rgb(221, 204, 221));
    background-attachment: fixed;
    font-family: 'Titillium Web', sans-serif;
}
i {
    font-size: 24px;
    /* padding-left: 1px; */
    /* vertical-align: -15px; */
}
main {
    color: rgb(82, 68, 85);
    text-align: center;
    height: 94vh;
    position: relative;
}
footer {
    height: 6vh;
    position: relative;
}
html, body, footer, #wrapper {
    margin: 0;
    padding: 0;
    border: 0;
}
html, body, #wrapper {
    height:100vh;
}
div#wrapper {
    width: 100vw;
}
div#logo-box {
    position: absolute;
    width: 410px;
    height: 248px;
}
a {
    text-decoration: none;            
}
footer a {
    font-size: 8px;
    color: black;
    position: absolute;
    width: 136px;
    height: 12px;
    top: 100%;
    left: 100%;
    margin: -12px 0 0 -136px;
    display: block;
}
button {
    /* color: rgb(225, 194, 225); */
    color: rgb(102, 102, 102);
    /* padding: 14px 28px;
    margin-right: 8px; */
    border-radius: 32px;
    text-decoration: none;
    width: 64px;
    height: 64px;
    background-color: rgb(115, 157, 173);
    /* border: 1px solid rgb(102, 102, 102); */
    border: none;
    animation: none;
}

.ani {
    animation: hue2 0.15s linear infinite;
}

.red {
    border: 1px solid red !important;
}
button:hover {
    animation: hue2 0.015s infinite;
}
a:hover, button:hover {
    cursor: pointer;
}
#logo-link {
    color: rgb(82, 68, 85);
}
#logo-link:hover span {
    animation: blinker 2s linear infinite;
}
@keyframes blinker {
    50% { opacity: 0; }
}
@keyframes hue {
    0%, 100%  { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(360deg); }
}
@keyframes hue2 {
    0%, 100%  { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}