@font-face {
    font-family: "RobotoMono";
    src: url("fonts/RobotoMono-VariableFont_wght.ttf");
}

body {
    --color-primary: #111827;
    --color-secondary: rgb(19, 19, 19);
    --color-text: #e8e8e8;
    --color-accent: #FBBF24;

    background: var(--color-secondary);
    background: radial-gradient(circle, var(--color-primary) 0%, var(--color-secondary) 90%);
    background-attachment: fixed;
    margin: 0;
    height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;
}

main {
    padding: 0 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    font-family: "RobotoMono", monospace;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 5rem;
    margin: 0;
    cursor: pointer;
    position: relative;
    text-decoration: none;
}

.contact:hover > #floholz {
    color: var(--color-accent);
}

.contact > #mailbox,
.contact > #tld {
    width: 0;
    position: absolute;
    overflow: hidden;
}
.contact > #mailbox{
    direction: rtl;
    right: 100%;
}
.contact > #tld {
    left: 100%;
}

.contact:hover > #mailbox {
    --letters: 8;
    animation: type calc(75ms*var(--letters)) steps(var(--letters), end) forwards;
    animation-delay: 1s;
}
.contact:hover > #tld {
    --letters: 4;
    animation: type calc(100ms*var(--letters)) steps(var(--letters), end) forwards;
}

@keyframes type {
    from { width: 0; }
    to { width: calc(0.6em*var(--letters)) }
}

.social-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    list-style-type: none;
    padding: 0;
}

.social-list > li {
    width: 70px;
    height: 70px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: scale 120ms ease-in-out;
}

.social-list > li:hover {
    scale: 150%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 55%);
    border-radius: 50%;
}

.social-list > li:hover > a > img{
    filter: brightness(0) saturate(100%) invert(93%) sepia(13%) saturate(5973%) hue-rotate(336deg) brightness(99%) contrast(99%);
    opacity: 80%;
}