@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap');

  /* :root {

    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

    --df_wt_color: rgba(0, 0, 0, 1);
    --df_wt_color1: rgba(0, 0, 0, .5);
    --df_wt_color2: rgba(0, 0, 0, .3);
    --df_wt_color3: rgba(0, 0, 0, .1);
    --df_bl_color: rgba(256, 256, 256, 1);
    --df_bl_color1: rgba(256, 256, 256, .5);
    --df_bl_color2: rgba(256, 256, 256, .3);
    --df_bl_color3: rgba(256, 256, 256, .1);
    --bg_color: #111e;
    --spl_color: orange;
    --transparent: transparent;
    --primary-color: rgb(153, 30, 30);
    --h1: 5vh;
    --h2: 4vh;
    --h3: 3vh;
    --h4: 2vh;
    --h5: 1vh;
    --h6: .5vh;

  }

  .darkmode {
    --df_wt_color: rgba(256, 256, 256, 1);
    --df_wt_color1: rgba(256, 256, 256, .5);
    --df_wt_color2: rgba(256, 256, 256, .3);
    --df_wt_color3: rgba(256, 256, 256, .1);
    --df_bl_color: rgba(0, 0, 0, 1);
    --df_bl_color1: rgba(0, 0, 0, .5);
    --df_bl_color2: rgba(0, 0, 0, .3);
    --df_bl_color3: rgba(0, 0, 0, .1);
    --spl_color: cyan;
    --bg_color: #fff;
  } */

  :root {

    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

    --df_wt_color: #111111;
    --df_wt_color1: #11111180;
    --df_wt_color2: #1111114D;
    --df_wt_color3: #1111111A;

    --df_bl_color: #FFFFFF;
    --df_bl_color1: #FFFFFF80;
    --df_bl_color2: #FFFFFF4D;
    --df_bl_color3: #FFFFFF1A;

    --bg_color: #111111;
    --spl_color: #C45A32;
    --transparent: transparent;
    --primary-color: #991E1E;
    --purple:rgb(139, 55, 139);

    --h1: 5vh;
    --h2: 4vh;
    --h3: 3vh;
    --h4: 2vh;
    --h5: 1vh;
    --h6: .5vh;

  }

  .darkmode {

    --df_wt_color: #F5F1EA;
    --df_wt_color1: #F5F1EA80;
    --df_wt_color2: #F5F1EA4D;
    --df_wt_color3: #F5F1EA1A;

    --df_bl_color: #111111;
    --df_bl_color1: #11111180;
    --df_bl_color2: #1111114D;
    --df_bl_color3: #1111111A;

    --spl_color: #E0784F;
    --bg_color: #F5F1EA;
  }


  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-family: var(--font-body);
    background-color: var(--bg_color);
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.6rem;
    font-size: var(--h4);
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    white-space: nowrap;
    width: 80%;
    border-radius: 5px;
    ;
  }

  .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0px 5px 5px 1px rgba(0, 0, 0, .3);
  }