@font-face {
  font-family: 'MADE Voyager PERSONAL USE';
  src: url('/assets/fonts/MADEVoyagerPERSONALUSE-Bold.woff2') format('woff2'),
      url('/assets/fonts/MADEVoyagerPERSONALUSE-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MADE Voyager PERSONAL USE';
  src: url('/assets/fonts/MADEVoyagerPERSONALUSE-Regular.woff2') format('woff2'),
      url('/assets/fonts/MADEVoyagerPERSONALUSE-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Libre Caslon Condensed';
  src: url('/assets/fonts/LibreCaslonCondensed-Italic.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html {
  overflow: hidden;
}

body {
  overflow: hidden;
}

.wrapper {
  max-width: 1400px;
  margin: 0 auto;
}

.wrap-px {
  padding: 0 40px;
}

.main {
    height: 100vh;
    background-color: #FFF7E4;
    overflow: hidden;
    position: relative;
    .main-content {
      position: relative;
      .center {
        display: flex;
        flex-direction: column;
        height: 100vh;
        justify-content: center;
        position: relative;
      }
      h1 {
        font-family: "MADE Voyager PERSONAL USE", serif;
        font-weight: 400;
        font-size: 92px;
        z-index: 2;
          .bottom-text {
            display: flex;
            justify-content: end;
          }
       }
    }

    .image-overlay {
      position: absolute;
     
      z-index: 1;
      opacity: .7;
      &.one {
        top: -100px;
        left: -200px;
        transform: rotate(353deg);
      }
      &.two {
        bottom: -200px;
        right: -350px;
      }
    }
}

.lead {
  font-family: 'Libre Caslon Condensed', serif;
  font-style: italic;
}

.contact-container {
  position: absolute;
  z-index: 2;
  margin-top: 100px;
  bottom: 100px;
  h2 {
    font-family: "MADE Voyager PERSONAL USE", serif;
    font-size: 40px;
    font-weight: 400;
    a {
      text-decoration: none;
      color: black;
      &:hover {
        strong {
          font-style: italic;
        }
      }
    }
  }
}

/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
box-sizing: border-box;
}
/*
2. Remove default margin
*/
* {
margin: 0;
padding: 0;
}
/*
Typographic tweaks!
3. Add accessible line-height
4. Improve text rendering
*/
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/*
5. Improve media defaults
*/
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
/*
6. Remove built-in form typography styles
*/
input, button, textarea, select {
font: inherit;
}
/*
7. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
/*
8. Create a root stacking context
*/
#root, #__next {
isolation: isolate;
}