@font-face {
  font-family: 'ClashDisplay-Medium';
  src: url('../fonts/ClashDisplay-Regular.ttf') format('woff2'),
    url('../fonts/ClashDisplay-Regular.ttf') format('woff'),
    url('../fonts/ClashDisplay-Regular.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}


@font-face {
  font-family: 'ClashDisplay-Semibold';
  src: url('../fonts/ClashDisplay-Semibold.woff2') format('woff2'),
    url('../fonts/ClashDisplay-Semibold.woff') format('woff'),
    url('../fonts/ClashDisplay-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}


@font-face {
  font-family: 'ClashDisplay-Bold';
  src: url('../fonts/ClashDisplay-Bold.woff2') format('woff2'),
    url('../fonts/ClashDisplay-Bold.woff') format('woff'),
    url('../fonts/ClashDisplay-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}



html,
body {
  background: rgb(109, 112, 95);
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

.p5Canvas {
  width: 100% !important;
  /* height: 600px; */
  position: fixed;
  bottom: 0px;
}

.menuItem {
  display: block;
  padding: 20px;
  font-family: monospace;
  font-size: 20px;
  color: gray;
}

.map1 {
  width: 50%;
  position: fixed;
  top: -130px;
  right: 0px;
}

.maplocator {
  position: fixed;
  scale: 13%
}

.image1 {
  width: 110%;
  position: fixed;
  top: -300px;
}

.image2 {
  width: 110%;
  position: fixed;
  top: -100px;
}

.image3 {
  width: 120%;
  position: fixed;
  top: -200px;
  filter: blur(4px);
  -webkit-filter: blur(4px);
}

.image4 {
  width: 110%;
  position: fixed;
  top: -300px;
}

.text4_bg {
  width: 40%;
  position: fixed;
  height: 100%;
  box-shadow: -140px 1px 130px 90px rgb(109 112 95);
  background-color: rgb(109, 112, 95);
  left: 60%;
}

.text4 {
  color: white;
  font-family: 'ClashDisplay-Medium';
  left: -120px;
  top: 80px;
  transform: perspective(500px) translate3d(-1110px, 350px, -1030px);
  position: relative;
  font-size: 24px;
  line-height: 45px;
}

.text {
  position: fixed;
  top: 0;
  left: 0;
}

.title {
  position: fixed;
  font-family: 'ClashDisplay-Bold';
  font-size: 100px;
  color: white;
  bottom: 505px;
  left: 100px;
}

.subtitle {
  position: fixed;
  font-family: 'ClashDisplay-Bold';
  font-size: 54px;
  color: white;
  bottom: 448px;
  left: 100px;
}

.summary {
  position: fixed;
  font-family: 'ClashDisplay-Medium';
  font-size: 20px;
  color: white;
  bottom: 20px;
  left: 900px;
}

.container {
  display: block;
  height: 50000px;
}


.top {
  display: flex;
}

.menuItem:hover {
  display: block;
  padding: 20px;
  font-family: monospace;
  font-size: 20px;
  color: gray;
  background-color: white;
}

.menuItem.back {
  font-size: 14px;
  padding: 10px;
  width: 150px;
  float: left;
}

.menuItem.prev {
  font-size: 14px;
  padding: 10px;
  width: 150px;
  float: left;
}

.menuItem.next {
  font-size: 14px;
  padding: 10px;
  width: 150px;
  float: right;
}