/* ! Base */
:root {
    --light-bg: #f2f1f0;
    --dark-bg: #232323
}

*, *::before, *::after {
    box-sizing: border-box;
}

@font-face {
  font-family: "n712k v0.6.0 Regular";
  src: url('fonts/n712kv0.6.0-Regular.woff2') format('woff2'),
       url('fonts/n712kv0.6.0-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "n712k v0.6.0 Italic";
  src: url('fonts/n712kv0.6.0-Italic.woff2') format('woff2'),
       url('fonts/n712kv0.6.0-Italic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* @font-face {
  font-family: "n712k v0.5.3 Regular";
  src: url('fonts/n712kv0.5.3-Regular.woff2') format('woff2'),
       url('fonts/n712kv0.5.3-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "n712k v0.5.3 Italic";
  src: url('fonts/n712kv0.5.3-Italic.woff2') format('woff2'),
       url('fonts/n712kv0.5.3-Italic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
} */

html,
body {
    margin: 0;
    padding: 0;
    
    font-family: "n712k v0.6.0 Regular";
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    
    background-color: #000000;
    color: #999999;
}

* {
    /* border: 1px solid rgba(255, 255, 255, 0.20) */
}

p {
    max-width: 32em;
}

em {
    font-family: "n712k v0.6.0 Italic";
}

/* ! Content */
body, pre {
    font-family: "n712k v0.6.0 Regular";
}

p, em, pre, input, button {
    font-size: 1.5rem;
}
    @media (max-width: 600px) {
        p, em, pre, input, button {
            font-size: 1rem;
        }    
    }

pre {
    overflow-x: scroll;
}
    pre.diagram {
        letter-spacing: 3px;
    }

/* ! Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    text-transform: uppercase;
    color: white;
}

h1 {
    font-size: 20rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

h2 {
    font-size: 3rem;
}

h3 {
    font-size: 2rem;
}

a:link, a:visited, a:hover, a:active {
    color: #999;
    border-bottom: calc(1em /12) solid #666;
    padding-bottom: 2px;
    text-decoration: none;
}

a:hover {
    color: white;
}

/* todo fix what the fuck is going on? */
.button-wrapper {
    border-bottom-width: 0px !important; 
    text-decoration: none;
}



/* ! Layout */
section {
    margin-bottom: 12rem;
    max-width: 100%;
}



/* ! Controls */
button {
    padding: 0.5em;
    
    font-family: "n712k v0.6.0 Regular";
    font-size: 1.5rem;
    text-transform: uppercase;
    
    color: white;
    background: none;
    border: 2px solid white;
    
}
    button:hover {
        color: #888;    
        border: 2px solid #888;
    }

input[type="range"]::-webkit-slider-runnable-track {
      width: 100%;
      height: 4px;
      background: #888;
      border-radius: 0px;
}

/* Styles the thumb for WebKit browsers */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Removes default styling */
  margin-top: -6px; /* Centers the thumb over the track */
  width: 20px;
  height: 20px;
  background: #4CAF50;
  border-radius: 0%;
  cursor: pointer;
}