* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html {
      scroll-behavior: smooth;
      overflow: hidden;
    }
    /* bg */
    body {
      background: url('https://i.pinimg.com/originals/6d/50/ef/6d50efb46f1c5b38714a995c2dc4cddf.gif') no-repeat center center fixed;
      background-size: cover;
      color: white;
      font-family: monospace;
      overflow: hidden;
    }

    a {
      color: white;
      transition: 0.3s;
    }

    a:hover {
      color: grey;
    }

    .main {
      display: flex;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }

    canvas {
      position: fixed;
      z-index: -1;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
    }

    ul {
      list-style: none;
      display: flex;
      gap: 15px;
      margin-top: 10px;
      margin-bottom: 10px;
      padding-left: 0;
    }

    ul a {
      font-size: 30px;
    }

    .main > * {
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInSlideUp 1s forwards;
    }

    .main h1 {
      animation-delay: 0.5s;
    }

    .main h2 {
      animation-delay: 0.7s;
    }

    .main p:nth-of-type(1) {
      animation-delay: 1s;
    }

    .main p:nth-of-type(2) {
      animation-delay: 1.2s;
    }

    .main ul {
      animation-delay: 1.4s;
    }

    .main p:nth-of-type(3) {
      animation-delay: 1.6s;
    }

    #now-playing {
      animation-delay: 1.8s;
    }

    @keyframes fadeInSlideUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    ul a:hover {
      color: #007bff;
      transform: scale(1.2);
    }
    /* dev */
    .devicon-javascript-plain:hover {
      transform: scale(1.1);
      color: #f0db4f;
    }

    .devicon-html5-plain:hover {
      transform: scale(1.1);
      color: #e34c26;
    }

    .devicon-python-plain:hover {
      transform: scale(1.1);
      color: #306998;
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
        opacity: 1;
      }
      50% {
        transform: scale(1.05);
        opacity: 0.8;
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    #overlay-text {
      animation: pulse 1.5s infinite ease-in-out;
    }

    /* Avatar */
    .avatar-container {
      position: relative;
      margin-bottom: 20px;
    }

    .avatar {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      border: 3px solid white;
    }

    .status-indicator {
      position: absolute;
      bottom: 5px;
      right: 5px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 3px solid #1e1e1e;
      background-color: gray;
    }