/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

 @font-face {
      font-family: 'WildWords';
      src: url('/Fonts/wildwordsroman.TTF') format('truetype');
      font-weight: normal;
      font-style: normal;
    }

    body {
      margin: 0;
      font-family: sans-serif;
      background-image: url('CorkboardBkg.jpg');
    }

    .main-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px 20px;
    }

    .content-row {
      display: flex;
      gap: 60px;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      margin-top: 40px;
    }

    /* Title Paper */
    .title-paper {
      position: relative;
      width: 100%;
      max-width: 1000px;
      height: 110px;
      background-image: url('/irasutoya/plain.png');
      background-size: cover;
      animation: slideInPaper 0.5s ease-out forwards;
      opacity: 0;
      transform: rotate(-10deg);
      padding: 20px 40px;
      box-sizing: border-box;
      filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.4));
    }
    
    .title-paper p {
      margin: 0; /* Remove default spacing on all <p> elements inside the title */
    }

    @keyframes slideInPaper {
      0% {
        transform: translate(-100%, -100%) rotate(-20deg);
        opacity: 0;
      }
      100% {
        transform: translate(0, 0) rotate(-5deg);
        opacity: 1;
      }
    }

    .title-text {
      position: relative;
      white-space: nowrap;
      text-align: right;
    }

    .title-jp {
      font-size: 24px;
      margin-bottom: 2px;
    }

    .title-en {
      font-size: 50px;
      font-family: 'Courier New', Courier, monospace;
      font-weight: bold;
    }

    /* Sticky Note */
    .sticky-note-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .sticky-note {
      width: 300px;
      height: 300px;
      padding: 30px;
      background-image: url('/irasutoya/stickynote.png');
      background-size: 100% 100%;
      font-family: 'WildWords', sans-serif;
      font-size: 16pt;
      transform: rotate(-3deg);
      margin-bottom: 20px;
    }

    .random-button {
      width: 150px;
      margin-bottom: 10px;
      transform: rotate(2deg);
      cursor: pointer;
    }

    .random-button:hover {
      animation: shake 0.4s ease;
    }

    @keyframes shake {
      0% { transform: translateX(0); }
      25% { transform: translateX(-4px); }
      50% { transform: translateX(4px); }
      75% { transform: translateX(-2px); }
      100% { transform: translateX(0); }
    }

    .stamp {
      width: 120px;
      cursor: pointer;
      transform: rotate(-1deg);
      filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.4));
    }

    /* Tacked Paper */
    .tacked-paper {
      position: relative;
      width: 500px;
      height: 500px;
    }

    .tack {
      position: absolute;
      top: -20px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      z-index: 2;
    }

    .paper-box {
      width: 100%;
      height: 100%;
      background-image: url('/irasutoya/cutPaper1.png');
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      transform-origin: top center;
      filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.4));
    }

    .paper-box img {
      margin-top: 10px;
      max-width: 80%;
    }

    @keyframes pendulum {
      0%   { transform: rotate(0deg);}
      25%  { transform: rotate(6deg);}
      50%  { transform: rotate(-6deg);}
      75%  { transform: rotate(6deg);}
      100% { transform: rotate(0deg);}
    }

        .swinging {
      animation: pendulum 1.2s ease-in-out;
    }
    
        .button-stamp-row {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px; /* Adjust spacing between button and stamp */
      transform: translate(10px, -25px); /* move right and up */
    }
    
    .random-button,
    .stamp {
      margin-bottom: 0; /* Remove vertical spacing if any */
    }