:root {
    --font-size-h1: 18px;
    --font-size: 18px;
    --font-size-header: 1.5rem;
    --font-size-body: 14px;
    --font-size-mono: 12px;
    --font-weight: 300;
  
    --color-background: #dedede;
    --color-offset: #eee;
    --color-faded: #121212;
    --color-gray-lighter: #808080;
    --color-gray: #767676;
    --color-text: #121212;
    --color-text-2: var(--color-background);
    --color-accent: #ff8c00;
  
    --font-family-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol";
    --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  
    --radius: 18px;
    --radius-small: 0.8rem;
    --radius-mini: 0.3rem;
  
    --width: 600px;
  }

  /* nightmode */

  @media (prefers-color-scheme: dark) {
  :root {
    --color-text: black;
    --color-text-2: #ff4400;
    --color-background: #ff4400;

  }

  a {
    color: var(--color-text-2);
  }

  a:visited {
    color: var(--color-text-2);
  }
}

  /* nightmode */
  
  body {
    background-color: var(--color-background);
    margin: 1rem;
  }
 

    .wrapper {
      display: flex;  
      flex-flow: wrap;
      font-weight: var(--font-weight);
      text-align: left; 
      font-family: var(--font-family-body);
    }
  
    .header {
      color: var(--color-text);
      font-size: var(--font-size-header);
      margin: 1em;

    }
    

   .block {
    border-radius: 1em;
    background-color: var(--color-faded);
    padding: 1em;
    text-align: center;
    display: flex;
    margin: 0.5rem;
    align-items: center;
    border-radius: var(--radius-small);
   } 
   

  a {
    font-size: var(--font-size-h1);
    align-items: center;
    text-align: center;
    margin-top: 3em;
    text-decoration: none;
    color: var(--color-text-2);

  } 

  a:visited {
    color: var(--color-text-2);
  }