@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: local("Nunito Regular"), local("Nunito-Regular"), url("/webfonts/nunito-v12-latin-regular.woff2") format("woff2"), url("/webfonts/nunito-v12-latin-regular.woff") format("woff")
}

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 700;
    src: local("Nunito Bold"), local("Nunito-Bold"), url("/webfonts/nunito-v12-latin-700.woff2") format("woff2"), url("/webfonts/nunito-v12-latin-700.woff") format("woff")
}

:root {
    --light-color: #fff;
    --dark-color: #000
}

html,
body {
    height: 100%
}

body {
    margin: 0;
    font-family: 'Nunito', sans-serif;
    font-size: 2rem;
    background-color: var(--light-color);
    color: var(--dark-color)
}

nav {
    position: fixed;
    top: 2rem;
    right: 2rem;
    display: flex;
    justify-content: space-between;
    font-size: 1rem
}

nav a {
    margin-right: 1rem;
    text-decoration: none
}

nav a:hover {
    text-decoration: underline
}

.grid {
    display: grid;
    place-content: center;
    text-align: center;
    width: auto;
    max-width: 90%;
    min-height: 100%;
    margin: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

h1 {
    margin: 0
}

#hash {
    display: inline-block;
    font-size: 72%;
    margin-right: 4px
}

svg {
    max-width: 128px;
    margin: -3rem auto 2rem auto
}

hr {
    width: 100%;
    border: none;
    height: 1px;
    margin: 0;
    background-color: #FF008C
}

#str {
    margin-bottom: 1rem
}

@media (prefers-color-scheme: dark) {
    body {
        color: var(--light-color);
        background: var(--dark-color)
    }
}

@-webkit-keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

@keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.animated.slow {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}