@font-face {
  font-family: "Pixel";
  src: url("fonts/pixelpoiiz.woff2") format("woff2");
}

@font-face {
  font-family: "Smalle";
  src: url("fonts/smalle.woff2") format("woff2");
}

body {
    margin: 0;
    background: #eaeaea;
  
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    background-image: url("images/bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    font-family: "Pixel", serif;

  }

  /* Main container */
  .scene {
    position: relative;
    width: 900px;   
    height: 700px;  
    margin-top: 20px;
  }
  
  /* Background */
  .bg {
    position: absolute;
    width: 900px;
    top: 80px;   
    left: 0;
  }
  
  /* Title */
  .title {
    position: absolute;
    width: 600px;
    top: 0;
    left: 150px; 
    z-index: 2;
  }

  /* Status widget */
  .line {
    white-space: nowrap;
  }

  .status-widget {
    position: fixed;
    top: 80px;
    left: 75px;
    z-index: 10;
  }

  .status-icon {
    width: 80px;
  
    filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.4));
    transition: filter 0.2s ease;
  }
  
  .status-widget:hover .status-icon {
    content: url("images/statusicon-hover.png");
  
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.8));
  }

  .status-box {
    position: absolute;
    top: 95px;
    left: 90%;
    z-index: 20;

    min-width: 190px;
    max-width: 245px;
  
    background: rgba(255, 255, 255, 0.444);
  
    padding: 10px 14px;
    border-radius: 0px;
  
    font-size: 14px;
    color: #333;
  
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 5px);
    transition: opacity 0.2s ease;
  
    filter: drop-shadow(2px 4px 4px rgba(247, 247, 247, 0.386));
  }

  .status-box p {
    margin: 6px 0;
  }

  .status-widget:hover .status-box {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
  
  .number {
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 1px;
    color: #3d62e7;
  
    filter: drop-shadow(0 0 3px rgba(218, 122, 122, 0.555));
  }

  .line {
    white-space: nowrap;
    letter-spacing: -0.3px;
  }
  
  /* GIF base */
  .gif {
    position: absolute;
    z-index: 3;
  }
  
  /* about me gif */
  .about {
    position: absolute;
    width: 185px;   
    top: 133px;
    left: 120px;
  }

  .about-img {
    display: block;
    width: 100%;

    filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.4));

  }

  /* swap on hover */
  .about:hover .about-img {
    content: url("images/about-hover.gif");

    filter: drop-shadow(0 0 8px rgba(255,255,255,0.8));
  }


  /* works gif */
  .works {
    position: absolute;
    width: 104px;
    top: 425px;
    left: 715px;
  }

  .works-img {
    display: block;
    width: 100%;
  
    filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.4));
    transition: filter 0.2s ease;
  }

  .works:hover .works-img {
    content: url("images/tear-hover.gif");
  
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.8));
  }
  
    /* exhibitions gif */
  .exhibitions {
    position: absolute;
    width: 219px;
    top: 120px;
    left: 540px;
  }

  .exhibitions-img {
    display: block;
    width: 100%;
  
    filter: drop-shadow(1px 3px 3px rgba(0,0,0,0.3));
    transition: filter 0.2s ease;
  }

  .exhibitions:hover .exhibitions-img {
    content: url("images/heart-hover.gif");
  
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.7));
  }
  
    /* blog gif */
  .blog {
    position: absolute;
    width: 146px;
    top: 430px;
    left: 50px;
  }

  .blog-img {
    display: block;
    width: 100%;
  
    filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.4));
    transition: filter 0.2s ease;
  }

  .blog:hover .blog-img {
    content: url("images/candle-hover.gif");
  
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.8));
  }

  

  /* buttons */
  .buttons {
    display: flex;
    justify-content: center;
    gap: 20px;              /* space between buttons */
    margin-top: -50px;       /* space below book */
  }

  .btn {
    width: 210px;
  }

  .btn-img {
    display: block;
    width: 100%;
  
    filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.524));
    transition: filter 0.2s ease;
  }

  /* Instagram */
.btn:nth-child(1):hover .btn-img {
    content: url("images/instagram-hover.png");
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.8));
  }
  
  /* Bluesky */
  .btn:nth-child(2):hover .btn-img {
    content: url("images/bluesky-hover.png");
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.8));
  }
  
  /* Itchio */
  .btn:nth-child(3):hover .btn-img {
    content: url("images/itchio-hover.png");
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.8));
  }

  /* arena */
  .btn:nth-child(4):hover .btn-img {
    content: url("images/arena-hover.png");
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.8));
  }

  .btn:hover {
    transform: translateY(-3px);
  }