/* variables */
      :root {
        /* fonts */
        font-family: 'Atkinson Hyperlegible', sans-serif;
        /* colors */
        --c1: #000000;
        --c2: #f1f2f2;
        --c3: #00a9e2;
        --c4: #ebdbb2;
        --c5: #1d2021;
      }

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

      address,
      area,
      article,
      aside,
      audio,
      blockquote,
      datalist,
      details,
      dl,
      fieldset,
      figure,
      form,
      input,
      iframe,
      img,
      meter,
      nav,
      ol,
      optgroup,
      option,
      output,
      p,
      pre,
      progress,
      ruby,
      section,
      table,
      textarea,
      ul,
      video {
        /* Margins for most elements */
        margin-bottom: 1rem;
      }

      hr {
        /* Reset the border of the <hr> separator, then set a better line */
        border: 0;
        border-bottom: 1px solid var(--c5);
        margin: 1rem auto;
      }

      body {
        margin: 0 auto;
        padding: 1em;
        font: var(--sans);
        font-weight: 400;
        line-height: 1.5;
        background: var(--c1);
        color: var(--c2);
        max-width: 40em;
        display: flex;
        flex-direction: column;
        height: 100vh;
        
      }

      main {
        flex: 1;
      }

      figure {
        max-width: 98%;
        margin: 0 auto;
      }

      figcaption,
      figure.fullwidth figcaption {
        margin-right: 0%;
        max-width: none;
      }

      img,
      video {
        height: auto;
        max-width: 100%;
      }

      a {
        color: #00a9e2;
        text-decoration: none;
        width: 5px;
        height:5px;


      }

      a:hover {
        text-decoration: underline;
      }

      pre {
        font: 1em/1.6 var(--mono);
        background: var(--c5);
        color: var(--c4);
        padding: 1em;
        overflow: auto;
      }

      code {
        font: 1em/1.6 var(--mono);
        color: var(--c4);
      }

      blockquote {
        border-left: 5px solid var(--c5);
        color: var(--c4);
        padding: 1em 1.5em;
        margin: 0;
      }



      h1 {
        font-size: 2.25rem;
      }

      h2 {
        font-size: 1.85rem;
      }

      h3 {
        font-size: 1.55rem;
      }

      h4 {
        font-size: 1.25rem;
      }

      h5 {
        font-size: 1rem;
      }

      h6 {
        font-size: 0.875rem;
      }

      ol,
      ul {
        /* Replace the browser default padding */
        padding-left: 2rem;
      }

      li {
        margin-top: 0.4rem;
      }

      ul ul,
      ol ul,
      ul ol,
      ol ol {
        margin-bottom: 0;
      }
p {
	font-size: 20px
}
      
      #container {
	
  margin-top: 5%;
}

#text {
	display: inline-block;
	
	color: #00a9e2;
	letter-spacing: 2px;
}

#cursor {
	display: inline-block;
	vertical-align: middle;
	width: 3px;
	height: 20px;
	background-color: #00a9e2;
	animation: blink .75s step-end infinite;
}

@keyframes blink {
	from, to { 
		background-color: transparent 
	}
	50% { 
		background-color: #00a9e2; 
	}
      }



      .site-title a {
        color: var(--c2);
        font-weight: bold;
      }

      .nav {
        margin-bottom: 1em;
      }

      .nav ul {
        display: flex;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
      }

      .nav ul li {
        list-style-type: none;
        margin-bottom: 0.3em;
      }

      .nav ul li:not(:last-child) {
        margin-right: 0.8em;
      }

      .theme-toggle a {
        color: var(--c2);
        background-color: var(--c5);
        padding: 0.25em 0.5em;
        border-radius: 99999999px;
      }

      .theme-toggle > a:hover {
        text-decoration: none;
      }

::-moz-selection { /* Code for Firefox */
  color: black;
  background: white;
}

::selection {
  color: black;
  background: white;
        }