html {
  background: url("../../assets/nav_images/sideblob.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-color: #fcf7eb;
}

header {
  float: right;
  display: block;
  margin-right: 2%;
}
footer {
  display: block;
  position: fixed; /* Set the navbar to fixed position */
  bottom: 0;
  z-index: 10;
}

#name {
  z-index: 100;
  font-size: 72px;
  color: #2f2235;
  margin-top: 5%;
  font-family: "Luxurious Roman";
  font-weight: bold;
}

body {
}

nav {
  overflow: hidden;
  position: fixed;
  z-index: 2;
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 175px; /* Set the width of the sidebar */
  top: 0; /* Stay at the top */
  left: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
  padding-left: 10px;
}

/* Navbar links */
a {
  font-size: 42px;
  font-family: "Luxurious Roman";
  font-weight: bold;
  float: left;
  display: block;
  color: #fcf7eb;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}
a:hover {
  color: #2f2235;
}
 
h3 {
  color: #2f2235;
  font-weight: bold;
}

#home{
  background: #fcf7eb;
  color:#ff7402;
}

  #button-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
  }

  .physics-button {
    width: 250px;
    height: 250px;
    position: absolute;
    padding: 12px 24px;
    background: #ff7402;
    color: #fcf7eb;
    border: none;
    /* border-radius: 50%; */
    cursor: grab;
    pointer-events: auto;
    white-space: nowrap;
    font-weight: bold;
    user-select: none;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px; 
    box-sizing: border-box;
    font-size: 20px;
    border-radius: 50%;
    /* border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: morph 10s ease-in-out infinite; */
  } 

  /* @keyframes morph {
    0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
} */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }