@keyframes banner-load {
    0% {transform: scale(0) rotateX(180deg);}
    100% {transform: scale(1) rotateX(0);}
}

@keyframes message-writer {
    0% {transform: translateX(0);}
    25% {transform: translateX(-10px);}
    75% {transform: translateX(10px);}
    100% {transform: translateX(0);}
}

/* ================================================================ */

span {
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

ul li::before {
    content: "- ";
}

div.content-full {
    margin-top: 32px;
}

div.header > img {
    width: 100%;
    animation: banner-load 300ms ease-in;
    image-rendering: auto;
}

div#message-writer {
    position: relative;
    min-width: 100%;
    top: 0;
    left: 0;
    animation: message-writer 200ms 5 ease-out;
}

div.updates > div p::before {
    content: "- ";
}

div.updates > div {
    border-bottom: 1px dotted var(--fg-color);
}
div.updates > div:last-of-type {border: none;}


div.hooks {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 16px 0;
}

div.hooks a {
    display: block;
    text-align: center;
}

div.hooks a div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 150px;
}

div.hooks img {
    width: 100px;
    height: auto;
    margin-bottom: 8px;
}


/* ================================================================ */

div.about div.info-card {
    display: flex;
    flex-direction: column;
}

div.about div.info-card > div {
    display: flex;
    flex-direction: row;
}

div.about div.info-card div.profile-pic {
    text-align: center;
}

div.about div.info-card div.profile-pic img {
    border-radius: 3px;
}

div.about div.info-card ul {
    list-style-type: none;
}

div.about div.info-card ul li {
    padding: 5px 0 5px 0;
}
div.about div.info-card ul li:before {
    content: "➤ ";
}

div#blinkers {
    width: 100%;
    display: inline-table;
    margin-top: 32px;
}

div#blinkers img {
    height: 22px;
}

div#stamps {
    display: inline-block;
}


/* ================================================================ */