html {
      position:relative;
      background-color: white;
}

body {
      z-index: -3;
      margin: 0;
      position:absolute;
      overflow: hidden;
}

.page_wrapper {
      z-index: -2;
      background-color: rgba(255, 255, 255, 0);
      position:absolute;
      width:100vw;
      height:100vh;
      position:relative;
}

.content {
      z-index: 1;
      margin:0 auto;
      padding: 2rem;
      /* backdrop-filter: blur(2px);
      background-color: rgba(255, 255, 255, 0.337); */
}

.theme_font {
      font-family: "Nanum Gothic Coding", serif;
      font-weight: 400;
      font-style: normal;
}

.title_container {
      color:rgb(0, 0, 0);
}

.title {
      letter-spacing: 0.4rem;
      padding-left: 10px;
}

.description {
      font-size: 0.8rem;
      letter-spacing: normal;
      margin-top:1.5rem;
}

.work_example{
      border-radius: 10px;
      width:auto;
      padding-left: 10px;
      line-height:1.1rem;
}

.work_example:hover{
      background-color: black;
      color:rgba(255, 255, 255, 0);
}

.mail_container {
      margin-top:1.5rem;
}

.mail {
      padding-left: 10px;
      text-decoration: none;
      color:blue;
      font-size: 0.8rem;
}

@media screen and (max-width: 768px) {
      .title {
            width:50%;
            line-height: 3rem;
      }
      .work_example {
            line-height:1rem;
      }
      #canvas {
            z-index: -1;
            position:absolute;
            top: 0;
            left: 0;
            height:100vh;
      }
}

#canvas {
      z-index: -1;
      top: 0;
      left: 0;
      position:absolute;
      border-radius: 10px;
      width: 100%;
      height: 100vh;
      display: block; /* Ensures no extra space */
    }