body {
  margin: 20px;
  padding: 0px;
  text-align: center;
  font-family: "Inconsolata";
  background-image: url('background.png'); /* Set the background image */
  background-size: cover; /* Cover the entire background */
  background-repeat: no-repeat; /* Do not repeat the background image */
  background-attachment: fixed; /* Fix the background image so it doesn't scroll */
}

.inconsolata {
  font-family: "Inconsolata", monospace;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.title-h1 {
  position: absolute;
  top: 550px;
  left: 100px;
}

button {
  background-color: rgba(0,0,0,0);
  border-color: rgba(0,0,0,0);
}

img {
  width: 250px;
}

.tiles {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
  margin-top: 35px;
  width: 90px;
}

.menu-container {
  position: absolute;
  margin: -40px;
}

.every-button {
  width: 150px;
  &:hover {
    transform: translateX(-50px) translateY(30px);
  }
}

.popup-menu {
  display: none;
  position: absolute;
  right: 180px;
  width: 200px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  border: 0.75px solid black;
  padding: 20px;
  padding-bottom: 30px;
  z-index: 1;
}

.popup-menu1 {
  display: none;
  position: absolute;
  right: 180px;
  width: 800px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  border: 0.75px solid black;
  padding: 50px;
  z-index: 1;
}

.popup-menu a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
}

.popup-menu a:hover {
  background-color: #ddd;
}

.show {
  display: block;
}

.more{
  position: absolute;
  top: 200px;
  right: 150px;
  z-index: 90;
}

.projects {
  position: absolute;
  top: 70px;
  right: 430px;
  z-index: 65;
}

.exercises {
  position: absolute;
  top: 230px;
  right: 430px;
  z-index: 25;
}

.readings {
  position: absolute;
  top: 445px;
  right: 430px;
  z-index: 5;
}

.p1 {
  top: 200px;
  right: 380px;
  z-index: 70;
}

.p2 {
  top: 240px;
  right: 310px;
  z-index: 75;
}

.p3 {
  top: 278px;
  right: 240px;
  z-index: 80;
}

.p4 {
  top: 316px;
  right: 170px;
  z-index: 85;
}

.e2 {
  top: 360px;
  right: 380px;
  z-index: 45;
}

.e3 {
  top: 400px;
  right: 310px;
  z-index: 50;
}

.e4 {
  top: 438px;
  right: 240px;
  z-index: 55;
}

.e5 {
  top: 476px;
  right: 170px;
  z-index: 60;
}

.e6 {
  top: 440px;
  right: 380px;
  z-index: 30;
}

.e7 {
  top: 480px;
  right: 310px;
  z-index: 35;
}

.e8 {
  top: 518px;
  right: 240px;
  z-index: 40;
}

.r1 {
  top: 575px;
  right: 380px;
  z-index: 10;
}

.r2 {
  top: 615px;
  right: 310px;
  z-index: 15;
}

.r3 {
  top: 652px;
  right: 240px;
  z-index: 20;
}