:root {
    --bg-color: #fff;
    --font-color: #121212;
}

[data-theme="dark"] {
    --bg-color: #121212;
    --font-color: #fff;
}

html {
    height: 100%;
}

body {
    font-family: monospace;
    background: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--font-color);
    height: 100%;
    overflow: hidden;
    position: relative;
    transition: background .5s;
}

.i-need-dark-mode-wrapper {
    position: absolute;
    left: 30px;
    top: 30px;
}

.i-need-dark-mode-wrapper #is-it-bright-outside-toggle {
    visibility: hidden;
    width: 0;
    height: 0;
    display: block;
}

.i-need-dark-mode-wrapper #is-it-bright-outside-toggle + label {
    content: "";
    display: inline-block;
    cursor: pointer;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    transition: all 0.5s ease-in-out;
}

.i-need-dark-mode-wrapper #is-it-bright-outside-toggle:not(:checked) + label {
    background-color: gold;
}

.i-need-dark-mode-wrapper #is-it-bright-outside-toggle:checked + label {
    background-color: transparent;
    box-shadow: inset -7px -9px 1px 1px #fff;
}

.type-some-shit-wrapper .call-me-a-headline-that-is-not-one {
    border-right: 1px solid var(--font-color);
    white-space: nowrap;
    overflow: hidden;
    letter-spacing: 2px;
    animation: typing-text 3.8s steps(30, end), blink-line 0.5s step-end infinite;
}

@keyframes typing-text {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes blink-line {
    from, to {
        border-color: transparent;
    }

    50% {
        border-color: var(--font-color);
    }
}