:root {
    --primary-blue: #1800b2;
    --primary-pink: #ff94db;
    --secondary-pink: #b102ad;
    --tertiary-pink: #5f3470;
    --accent-pink: #e9b0f6;
}

html {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Source Code Pro', monospace;
    letter-spacing: -1px;
    background-color: #f8ebe9;
    -webkit-font-smoothing: antialiased;
}

body {
    max-width: 90%;
    margin: 0 auto !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: 0.8s;
    align-items: center;
    font-size: 18px;
}

a:link,
a:visited {
    color: var(--secondary-pink);
    text-decoration: none;
}

a:hover,
a:active {
    color: var(--tertiary-pink);
}

.flex {
    display: flex;
}

header {
    box-sizing: border-box;
    border: 0 solid;
    --bg-opacity: 1;
    background-color: var(--primary-pink);
    border-width: 1px;
    cursor: pointer;
    font-weight: 900;
    height: 3rem;
    box-shadow: 0.25rem 0.25rem currentColor;
    --text-opacity: 1;
    color: var(--primary-blue);
    width: 16rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    letter-spacing: 2px;
    text-transform: lowercase;
    align-self: center;
    font-weight: bold;
}

header a:link,
header a:visited {
    color: var(--primary-blue);
    text-decoration: none;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

h1 {
    font-size: 2em;
    text-shadow: 2px 2px 0px var(--tertiary-pink);
    color: #cb19cf;
}

h2 {
    font-size: 1.2em;
}

nav {
    margin: 1em 0;
    text-align: center;
}

nav a,
.contact-icons a {
    margin: 0 6px;
}

nav ul {
    display: inline-flex;
}

nav li {
    margin-right: 1em;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#favs-list li:nth-child(2n) {
    color: var(--primary-blue);
    text-shadow: 1px 1px 0px var(--accent-pink);
}

.george {
    position: relative;
    width: max-content;
}

.george:hover {
    cursor: help;
}

.george:after {
    content: url('hannah-at-home.png');
    overflow: hidden;
    height: 0;
    width: 0;
    position: absolute;
    z-index: -1;
}

.george:hover::after {
    background-image: url('hannah-at-home.png');
    content: '';
    background-size: 300px;
    height: 300px;
    width: 300px;
    z-index: 10;
    box-shadow: 0rem 0rem 16px 1px #555555d1;
    border-radius: 14px;
    left: 10rem;
    bottom: -8rem;
}

nav a:link,
nav a:visited {
    letter-spacing: 1px;
    border: 0 solid;
    --bg-opacity: 1;
    background-color: var(--primary-pink);
    border-width: 1px;
    cursor: pointer;
    box-shadow: 0.15rem 0.15rem var(--primary-blue);
    --text-opacity: 1;
    color: var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    height: 100%;
    width: 100%;
}

nav a:hover,
nav a:active {
    transition: 0.5s ease;
    background: #ffffff;
}

nav a.selected {
    background: #ffffff;
}

nav a.selected:hover {
    background: #ffffff;
}

.text-center {
    text-align: center;
}

section {
    margin: 1em 0;
}

.about-me-blurb {
    border: 2px dashed var(--primary-blue);
    border-radius: 14px;
    padding: 12px;
}

main {
    display: flex;
    flex-direction: column;
    margin: 1rem 0;
}

footer {
    font-size: 14px;
    margin: 1rem 0;
    text-align: center;
}

.contact-icons {
    font-size: 30px;
    line-height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?hsbwe7');
    src: url('fonts/icomoon.eot?hsbwe7#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?hsbwe7') format('truetype'), url('fonts/icomoon.woff?hsbwe7') format('woff');
    font-weight: normal;
    font-style: normal;
}

[class^='icon-'],
[class*=' icon-'] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-github:before {
    content: '\eab0';
}
.icon-linkedin2:before {
    content: '\eaca';
}
.icon-heart:before {
    content: '\2764';
}
.icon-newtab:before {
    content: '\2197';
    font-size: 16px;
    font-weight: bold;
}

.icon-heart {
    position: absolute;
    right: 0;
    top: 8px;
    rotate: 30deg;
    color: var(--secondary-pink);
}

.bulge {
    text-shadow: 3px 1px 0px var(--primary-blue);
    animation-name: bulge;
    animation-duration: 1.6s;
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    animation-iteration-count: infinite;
}

.shake {
    animation-name: shake;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    display: inline-block;
}

.wave {
    animation-duration: 1s;
    animation-iteration-count: infinite;
    display: inline-block;
}

@keyframes wave {
    25% {
        transform: translateY(-75%);
    }
}

@keyframes bulge {
    50% {
        transform: scale(1.5);
    }
}

@keyframes shake {
    50% {
        transform: rotate3d(1, 1, 1, 20deg);
    }
}

small {
    color: #5f5f5f;
}

.border-bottom {
    border-bottom: 1px solid;
    padding-bottom: 1px;
}