html {
  background-color: #000000;
}
@font-face {
  font-family: Lunar Escape;
  src: url("https://cdn.glitch.global/d8977f35-971f-43ee-ac8a-d505cf64ba0c/Lunar Escape.ttf?v=1742942902044")
    format("opentype");
}

@font-face {
  font-family: Power Clear;
  src: url("https://cdn.glitch.global/d8977f35-971f-43ee-ac8a-d505cf64ba0c/Power Clear.ttf?v=1742941911579")
    format("opentype");
}

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 0.5vw;
}

img {
  width: 100%;
}

.titl {
  position: absolute;
  color: #8ca3ff;
  font-family: Lunar Escape;
  font-size: 5vw;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.5vw;
  opacity: 100%;
    margin-bottom: 10vw;
  margin-top: 2vw;
  margin-left: 2vw;
}

.desc {
  position: absolute;
  margin: 5vw;
  font-size: 2vw;
  font-family: Power Clear, sans-serif;
  color: #8ca3ff;
  text-align: left;
  margin-bottom: 10vw;
  margin-top: 10vw;
  margin-right: 20vw;
}

/* Container holding the image and the text */
.portal1 {
  position: absolute;
  margin-top: 42vw;
  margin-left: 2vw;
  margin-right:50vw;
  text-align: center;
}

/* Container holding the image and the text */
.portal2 {
  position: absolute;
  margin-top: 42vw;
  margin-left: 50vw;
  margin-right: 2vw;
  text-align: center;
}

/* Container holding the image and the text */
.portal3 {
  position: absolute;
  margin-top: 57vw;
  margin-left: 2vw;
  margin-right:50vw;
  text-align: center;
}

/* Container holding the image and the text */
.portal4 {
  position: absolute;
  margin-top: 57vw;
  margin-left: 50vw;
  margin-right: 2vw;
  text-align: center;
}

/* Centered text */
.centered {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-45%, -50%);
    font-size: 2vw;
  font-family: Power Clear, sans-serif;
  color: #8ca3ff;
}


.hamburger{
  position: fixed;
  margin-left: 85vw;
  margin-bottom: 0vw;
  margin-top: 1vw;
}

 /* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 0;
  width: 50vw;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 51vw;
  top: -4vw;
  overflow-y: hidden; /* Disable horizontal scroll */
  overflow-x: hidden;
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */

.overlay-back {
  position: absolute;
  width: 100%; /* 100% width */
  text-align: left; /* Centered text/links */
  margin-left: 5vw;
  margin-top: 5vw; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

.overlay-content {
  position: absolute;
  width: 100%; /* 100% width */
  text-align: left; /* Centered text/links */
  margin-left: 7.5vw;
  margin-top: 7.5vw; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 1vw;
  text-decoration: none;
  font-size: 2vw;
  font-family: Power Clear, sans-serif;
  color: #8ca3ff;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  font-family: Power Clear, sans-serif;
  color: #ffffff;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 5vw;
  left: 38vw;
}