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

    * {
      margin: 0;
    }

    /* Remove default padding */
    ul,
    ol,
    button {
      padding: 0;
    }

    /* Remove default margin */
    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol,
    li,
    figure,
    figcaption,
    blockquote,
    dl,
    dd {
      font-size: 1rem;
      margin: 0;
    }

    /* Set core body defaults */
    body {
      scroll-behavior: smooth;
    }

    ul,
    ol {
      list-style: none;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    button{
      cursor: pointer;
      outline: none;
      border: none;
      background: transparent;
    }

    /* Inherit fonts for inputs and buttons */
    input,
    button,
    textarea,
    select {
      font: inherit;
    }

    /* Remove all animations and transitions for people that prefer not to see them */
    @media (prefers-reduced-motion: reduce) {
      * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }
  
  @font-face {
  font-family: 'Comic Neue';
  src: url('/fonts/ComicNeue-Italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  }

  @font-face {
  font-family: 'Comic Neue';
  src: url('/fonts/ComicNeue-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  }

  @font-face {
  font-family: 'Comic Neue';
  src: url('/fonts/ComicNeue-BoldItalic.woff2') format('woff2');
  font-weight: bold;
  font-style: italic;
  }

  @font-face {
  font-family: 'Comic Neue';
  src: url('/fonts/ComicNeue-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  }

  @font-face {
  font-family: 'Comic Neue';
  src: url('/fonts/ComicNeue-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  }


  @font-face {
  font-family: 'Connection';
  src: url('/fonts/Connection.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  }

  @font-face {
  font-family: 'Connection';
  src: url('fonts/ConnectionBold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  }


  :root {
    --bg: hsl(220, 0%, 100%);
    --bg2: hsl(220, 0%, 96%);
    --fg: hsl(250, 100%, 5%);
    --gray: hsl(200, 0%, 60%);
    --c1: hsl(199, 90%, 50%);
    --c2: hsl(126, 60%, 44%);
    --c3: hsl(350, 60%, 45%);
    --c4: hsl(43, 100%, 40%);
    --s1: hsl(189, 100%, 69%);
    --s2: hsl(126, 100%, 74%);
    --s3: hsl(350, 100%, 85%);
    --s4: hsl(63, 87%, 48%);
  }
  :root.dark {
    --bg: hsl(260, 50%, 5%);
    --bg2: hsl(250, 30%, 7%);
    --fg: hsl(200, 0%, 100%);
    --gray: hsl(200, 0%, 40%);
    --c1: hsl(189, 100%, 69%);
    --c2: hsl(126, 100%, 74%);
    --c3: hsl(350, 100%, 85%);
    --c4: hsl(63, 87%, 48%);
    --s1: hsl(189, 50%, 39%);
    --s2: hsl(126, 50%, 24%);
    --s3: hsl(350, 50%, 35%);
    --s4: hsl(63, 70%, 28%);
  }
  html,body{
    font-family: "Comic Neue";

    font-size: 16px; 
    background: repeating-linear-gradient(90deg, var(--bg2) 0, var(--bg2) 5%, transparent 0, transparent 50%), repeating-linear-gradient(180deg, var(--bg2) 0, var(--bg2) 5%, transparent 0, transparent 50%);
        background-size: 24px 24px;
        background-color: var(--bg);
        opacity: 1
    color: var(--fg);
    line-height: 1.5;
    font-weight: normal;
    overflow-x: hidden;
    overscroll-behavior-y: none;
  }
  main{
    position: relative;
  }
  p{ 
    font-weight: normal;
  }
  ::selection{ 
    background-color: var(--gray);
    color: var(--fg);
  }