html { font-size: calc(1em + 1vw) }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Courier New', Courier, monospace;
    background-color: var(--gunmetal);
    color: var(--periwinkle-crayola);
}

header {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    font-weight: thin;
    font-size: 150%;
}

.code-orange {
    /*font-family: 'Courier New', Courier, monospace;*/
    color: var(--old-rose);
}

@keyframes blink {
    0% { border-right: 0.08em solid rgba(255, 255, 255, 0);
    }
    50% { border-right: 0.08em solid var(--periwinkle-crayola);
    }
 }

:root {
    /* CSS HEX */
    --dark-moss-green: #505e36ff;
    --gunmetal: #242f40ff;
    --periwinkle-crayola: #d8e4ffff;
    --old-rose: #c98986ff;
    --key-lime: #ecffb0ff;
    
    /* CSS HSL */
    --dark-moss-green: hsla(81, 27%, 29%, 1);
    --gunmetal: hsla(216, 28%, 20%, 1);
    --periwinkle-crayola: hsla(222, 100%, 92%, 1);
    --old-rose: hsla(3, 38%, 66%, 1);
    --key-lime: hsla(74, 100%, 85%, 1);
    }