body {
    font-family: 'Poppins', sans-serif;
}

#color-container {
    position: relative;
    color: #ffffff;
    height: 100%;
    width: 100%;
    background-color: #84597e;
}

a {
    all: unset;
    cursor: pointer;
}

.bg-dull-red {
    background-color: #C54E57 !important;
}
.bg-dull-green {
    background-color: #69A18B !important;
}
.bg-dull-blue {
    background-color: #677FA3 !important;
}
.bg-dull-black {
    background-color: #161616 !important;
}
.bg-dull-pink {
    background-color: #D5869D !important;
}
.bg-dull-purple {
    background-color: #84597e !important;
}

#quote-container {
    position: absolute;
    top: 5%;
    right: 5%;
    font-size: 2em;
    font-weight: 300;
    font-style: italic;
}

#glyph-container {
    position: absolute;
    bottom: 5%;
    left: 5%;
    font-size: 1.5em;
}
#glyph-container span {
    display: inline-block;
    vertical-align: top;
    margin: 25px 5px 0 0;
}
#glyph-container:hover {
    padding-bottom: 5px;
}

#logo-glyph {
    width: 50px;
}

#logo-container {
    position: absolute;
    top: 20%;
    right: 5%;
}

#logo-container > h1 {
    font-size: 10em;
    letter-spacing: -3px;
}

#logo-container > h1 > a:hover, #logo-container > h1 > a.hovered {
    text-decoration-thickness: 6px;
    text-underline-offset: 8px;
}

#logo-container > span {
    padding: 2px 0;
    display: block;
    text-align: right;
    font-size: 3em;
    right: 0;
    letter-spacing: -1px;
}

#logo-container a:hover, #logo-container a.hovered {
    text-decoration: underline;
    text-decoration-color: #ffffff;
}
.reveal-hover {
    visibility: hidden;
    opacity: 0%;
}
a:hover .reveal-hover {
    visibility: visible;
    opacity: 50%;
    transition: visibility 0s, opacity 0.25s linear;
}
a.hovered .reveal-hover {
    visibility: visible;
    opacity: 50%;
    transition: visibility 0s, opacity 0.25s linear;
}


#footer {
    text-align: right;
    position: absolute;
    bottom: 5%;
    right: 5%;
    font-size: 1.1em;
}

#footer i {
    padding: 0px 0px 10px 10px;
}

#footer span {
    font-weight: 200;
}

#footer a {
    text-decoration: underline;
    text-decoration-color: #ffffff;
    text-underline-offset: 2px;
}
