* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --ui-colour: #83e5f6;
}


body {
  background: #000;
  color: var(--ui-colour);
  font-family: Georgia, serif;
  width: 15000px;
  height: 1900px;
  display: grid;
  grid-template-columns: repeat(150, 100px);
  grid-template-rows: repeat(19, 100px);
}

html,
body {
  margin: 0;
  padding: 0;
  background: #000;
}
#output {
  display: block;
  image-rendering: pixelated;
}

.overlay-container {
  position: absolute;
  width: 100%;
  height: 100vh;
}

.overlay-container {
  position: absolute;
  width: 10000px;
  height: 1900px;
  overflow: hidden;
  z-index: 2;
}

@property --vision-width {
  syntax: "<length>";
  initial-value: 700px;
  inherits: false;
}

.dark-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.9;
  background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);

  --mx: 50%;
  --my: 50%;
  animation: light-glow 2s ease-in-out infinite alternate;

  -webkit-mask-image: radial-gradient(
    circle at var(--mx) var(--my),
    transparent 70px,
    transparent 100px,
    black 60%
  );
  mask-image: radial-gradient(
    circle var(--vision-width) at var(--mx) var(--my),
    transparent 100px,
    transparent 150px,
    black 60%
  );
}

@keyframes light-glow {
  from {
    --vision-width: 700px;
  }
  to {
    --vision-width: 1000px;
  }
  
}

#forest-container {
  width: 10000px;
  height: 1900px;
  display: grid;
  grid-template-columns: repeat(100, 100px);
  grid-template-rows: repeat(19, 100px);
  grid-column: 31 / 101;
  grid-row: 1 / -1;
}

.floating-light {
  background: radial-gradient(
    circle,
    rgb(216, 241, 86) 0%,
    rgba(0, 0, 0, 1) 75%
  );
  mix-blend-mode: color-dodge;
  opacity: 1;
  z-index: 100;
  border-radius: 50%;
  pointer-events: none;
}

#title {
  grid-row-start: 8;
  grid-column: 5 / 14;
  z-index: 5;
  color: var(--ui-colour);
  h1 {
    font-size: 324px;
    font-weight: 400;
    line-height: 97%;
    padding: 0;
    margin: 0;
  }
}

#about {
  grid-row-start: 11;
  grid-column: 16 / 20;
  /* color: var(--ui-colour); */
  p{
    margin-bottom: 1em;
  }
}

p {
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.3;
}

.section-desc {
  font-size: 24px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: 100;
}

#start {
  grid-row-start: 11;
  grid-column: 22 / 25;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

#start-content, #start-content2 {
  grid-column: 1 / -1;
  grid-row: 2 / -1;
  img {
    width: 60%;
    margin: 20px 0;
  }
}

#grid {
  grid-column: 1 / -1;
}

.square {
  border: var(--ui-colour) 1px solid;
  width: 100%;
  aspect-ratio: 1 / 1;
}

/* INTERACTION PROTOTYPING */

.ui-element {
  z-index: 20;

  /* border: var(--ui-colour) 1px solid; */
  opacity: 0;
  transition: all 0.5s;
  &:hover {
    opacity: 1;
    transition: all 2s;
    /* pointer-events: none; */
  }
}

.mush-species {
  display: flex;
  align-items: start;
  position: relative;
  left: 100%;
  animation: bounce 3s infinite ease-in-out alternate;

  h3 {
    font-weight: 400;
    font-size: 38px;
    font-style: italic;
    background: var(--ui-colour);
    color: #000;
    display: inline;
    max-width: 200px;
  }
  p {
    font-size: 14px;
    background: var(--ui-colour);
    color: #000;
    display: inline;
    min-width: 70px;
  }
}

.mush-habitat {
  display: flex;
  align-items: start;
  position: relative;
  left: 100%;
  top: 10%;
  animation: bounce 3s infinite ease-in-out alternate 0.5s;

  p {
    font-size: 14px;
    background: var(--ui-colour);
    color: #000;
    display: inline;
    min-width: 70px;
    max-width: 200px;
  }
}

.mush-function {
  display: flex;
  align-items: start;
  position: relative;
  left: 100%;
  top: 20%;
  animation: bounce 3s infinite ease-in-out alternate 1s;

  p {
    font-size: 14px;
    background: var(--ui-colour);
    color: #000;
    display: inline;
    min-width: 70px;
    max-width: 200px;
  }
}

.info-body-text {
  font-family: Georgia, "Times New Roman", Times, serif;
  background: var(--ui-colour);
  color: #000;
  min-width: 70px;
  max-width: 200px;
}

.dialog {
  z-index: 20;

  /* border: var(--ui-colour) 1px solid; */
  padding: 20px 30px;
  background: #000;
  opacity: 0;
  transition: all 1s;
}

/* step 1 styles */

#step1 {
  grid-column: 44 / 48;
  grid-row: 5 / 10;
}

#step1-dialog {
  grid-column: 45 / 49;
  grid-row: 11 / 13;
  align-self: start;
}

#step1:hover ~ #step1-dialog {
  opacity: 1;
  transition: all 3s;
}

/* STEP 2 STYLES */

#step2 {
  grid-column: 57 / 61;
  grid-row: 11 / 15;
}

#step2-dialog {
  grid-column: 57 / 61;
  grid-row: 9 / 11;
  align-self: start;
  translate: 65px;
}

#step2:hover ~ #step2-dialog {
  opacity: 1;
  transition: all 3s;
}

/* STEP 3 STYLES */

#step3 {
  grid-column: 76 / 80;
  grid-row: 9 / 13;
}

#step3-dialog {
  grid-column: 75 / 79;
  grid-row: 13 / 15;
  align-self: start;
  translate: 65px;
}

#step3:hover ~ #step3-dialog {
  opacity: 1;
  transition: all 3s;
}

/* STEP 4 STYLES */

#step4 {
  grid-column: 91 / 95;
  grid-row: 9 / 13;
  &:hover ~ #step4-dialog {
    opacity: 1;
  transition: all 3s;
  }
}

#step4-dialog {
  grid-column: 91 / 95;
  grid-row: 14 / 17;
}

/* STEP 5 STYLES */

#step5 {
  grid-column: 95 / 99;
  grid-row: 4 / 8;
  &:hover ~ #step5-dialog {
    opacity: 1;
    transition: all 3s;
  }
}

#step5-dialog {
  grid-column: 95 / 99;
  grid-row: 12 / 15;
}

/* STEP 6 STYLES */

#step6 {
  grid-column: 113 / 117;
  grid-row: 9 / 13;
  &:hover ~ #step6-dialog {
    opacity: 1;
    transition: all 3s;
  }
}

#step6-dialog {
  grid-column: 113 / 117;
  grid-row: 14 / 17;
}

ul {
  margin: 20px 0;
}

.invisible {
  opacity: 0;
  transition: all 2s;
}

#server {
  grid-column: 138 / 142;
  grid-row: 11 / 15;
  display: grid;
  grid-template-rows: 50px 1fr;
  .section-desc {
    grid-row: 1 / 2;
    grid-column: 1 / -1;
    height: 50px;
  }
  li {
    font-family: Helvetica, Arial, sans-serif;
    /* margin-left: 30px; */
    list-style: none;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;

    &:last-child {
      border-top: 1px solid var(--ui-colour);
      padding-top: 10px;
    }
  }
}

#server-content, #server-content2 {
  grid-column: 1 / -1;
  grid-row: 2 / 3;
}



/* animation keyframes */

@keyframes bounce {
  to {
    transform: translateY(40px);
  }
}






/* PROTOTYPE TINGS TO REMOVE */

#phone-shroom {
  grid-column: 10 / 14;
  grid-row: 14 / 18;
  z-index: 50;
  transition: all 2s;
}

button {
  background-color: var(--ui-colour);
  padding: 10px 15px;
  border: none;
  margin-top: 20px;
}