@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');


  @font-face {
    font-family: '_custom_title';
    src: url('../fonts/brock-script-font/BrockScript-1GpB.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }


  @font-face {
    font-family: '_custom_text';
    src: url('../fonts/border-wall-font/BorderWall-OG55o.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }


  :root {

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

    --df_wt_color: #800000;
    --df_wt_color1: #800000CC;
    --df_wt_color2: #80000080;
    --df_wt_color3: #80000033;

    --df_bl_color: #F4C2C2;
    --df_bl_color1: #F4C2C2CC;
    --df_bl_color2: #F4C2C280;
    --df_bl_color3: #F4C2C233;

    --bg_color: #F4C2C2;
    --spl_color: #800000;
    --transparent: transparent;
    --primary-color: #800000;
    --purple: #800000;

    --h-4: 12vh;
    --h-3: 10vh;
    --h-2: 8vh;
    --h-1: 7vh;
    --h1: 5vh;
    --h2: 4vh;
    --h3: 3vh;
    --h4: 2vh;
    --h5: 1vh;
    --h6: .5vh;

    --dark-color: #4A0000;
    --burgundy-color: #800000;

    --red-color: #B22222;
    --light-red-color: #E57373;
    --black-color: #222222;
    --black-color-1: #000a;
    --pure-black: #000000;

    --white-color: #FFFFFF;
    --white-color-1: #fffa;
    --off-white: #FFF8F8;
    --rose-color: #D9A0A0;
    --light-pink: #FCE4E4;
    --dark-pink: #C77B7B;

    --gold-color: #D4AF37;
    --light-gold: #F1D98A;
    --dark-gold: #A67C00;

    --gray-color: #808080;
    --light-gray: #E5DADA;
    --dark-gray: #444444;

  }



  /* :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);

    --h-3: 10vh;
    --h-2: 8vh;
    --h-1: 7vh;
    --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;
    text-decoration: none;
  }

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