@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@1,300&display=swap');

:root {
    --colour-bg: #171717;
    --colour-signature: #6cc1c4
}

html, body {
    margin: 0;
    user-select: none;
}

.bg {
    width: 100%;
    min-height: 100%;

    position: fixed;
    bottom: 0;

    z-index: -1;
    background: var(--colour-bg)
}

.logo {
    position: fixed;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);
}

@keyframes slide-left {
    0% {
        left: 50%;
    }
    100% {
        left: -1.8em;
    }
}

@keyframes resize {
    0% {
        width: 3em;
        left: -1.8em
    }
    100% {
        width: 1.5em;
        left: -1em
    }
}

.logo > p > img {
    width: 3em;
    position: fixed;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
    background-color: var(--colour-bg);

    display: inline;
    vertical-align: bottom;

    animation: slide-left 1s forwards 0.2s, resize 0.5s forwards 1.2s;
}

.logo > p {
    margin: 0;
    text-align: center;

    font-family: "Source Sans 3", sans-serif;
    font-size: 10vmin;
    color: white;
}

.logo > p > b {
    text-shadow: -0.05em 0 var(--colour-signature);
}