body {
    background-color: #000000; 
    color: #8d0707;
}

@font-face {
    font-family: 'GeistSans';
    src: url('/path/to/geist-sans.woff2') format('woff2'),
         url('/path/to/geist-sans.woff') format('woff');
  }
  
  @font-face {
    font-family: 'GeistMono';
    src: url('/path/to/geist-mono.woff2') format('woff2'),
         url('/path/to/geist-mono.woff') format('woff');
  }
  @import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

  @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap'); 
  
  
  body {
    font-family: 'DM Serif Display', sans-serif;
  }
  
  code {
    font-family: 'GeistMono', monospace;
  }
  
:root {

    /* VARIABLES */

    /* Typography */
  --headingFont: 'GeistSans', sans-serif;
  --bodyFont: 'DM Serif Display', sans-serif;

  --baseFontSize: clamp(0.875rem, 0.7885rem + 0.3846vw, 1.25rem);

  --type-scale: 1.75;
}
html {
    font-size: var(--baseFontSize);
    scroll-behavior: smooth;
    font-family: var(--bodyFont);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--headingFont);
    margin-bottom: var(--space-2);
  }  
main {
    width: 80vw;
    margin: 0 auto;
  }

.maingrid {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers content vertically */
    align-items: center;     /* Centers content horizontally */
    height: 100vh auto;
    text-align: center;
    position: relative;
}

nav {
    margin-left: 5vw;
    height: 80px;
    background: #000000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0rem calc((100vw - 1300px)/2);
}
nav a {
    color: #8d0707;
    padding: 0 1.5rem;
}

button {
    padding: 1rem 3rem;
    font-size: 35px auto;
    color: #ffffff;
    background-color: #00000091;
    cursor: pointer;
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    border: none;
    border-radius: 20px;
}

figure {
    position: relative;
}

figure img {
    width: 100%;
    height: auto;
}