html {
  /* apparently this doesnt work on body sometimes so setting it on html too */
  scroll-snap-type:y mandatory;
  scroll-padding-top: calc(50vh - 2rem);
}

body {
  scroll-snap-type:y mandatory;
  scroll-padding-top: calc(50vh - 2rem);
  scroll-behavior:smooth;
  padding:0;
  padding-top: calc(50vh - 2rem);
  margin:0;
  font-family:monospace;
  color:#1f2933;
}

body.dark-mode {
  color:#e5ebee;
  background:#0d1117;
}

#thoughts {
  align-items: center;
  justify-content: center;
  width:100%;
  padding-bottom: calc(50vh - 2rem);
  display: flex;
  scroll-snap-type:y mandatory;
  flex-direction: column;

  .thought {
    height: 4rem;
    width: 50%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display:flex;
    flex-direction:column;
    .ts {
      color: #b2b0bd;
    }
  }
}

body.dark-mode #thoughts {
  .thought {
    background: #111827;
    border: 1px solid #1f2933;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.35);
    .ts {
      color: #9ea7b3;
    }
  }
}


div.overlay {
  z-index: 1;
  position: fixed;
  width: 100%;
  height: calc(50% - 2rem);
  background: white;
  opacity: 0.9;

  &#header {
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &#footer {
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

body.dark-mode div.overlay {
  background: rgba(13, 17, 23);
}

@media (max-width: 600px) {
  #thoughts {
    .thought {
      width: 80%;
    }
  }
}