* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "JetBrains Mono", monospace;
}

body {
    background-image: url("/Assets/Images/Frontpage/one-pce.png");
    background-size: cover;       /* Ensures the image covers the screen */
    background-position: center;  /* Centers the image */
    background-repeat: no-repeat; /* Prevents tiling */
    overflow: hidden;
}

.container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center; 
    align-items: flex-start;
}

.paper{
    background-color: transparent;
    border: none;
    outline: none;
    cursor:pointer;
}

.item-1{
    rotate: 90deg;
    scale: 35%;
    transform: translate(90%,300%);
    position: relative;
    
}

.item-1 h1{
    rotate: 270deg;
    position: absolute;
    transform: translate(120%,90%);
    font-size: 90px;
    font-family: "Carter One", system-ui;
    font-weight: 400;
    font-style: normal;
    color: rgb(204, 255, 218);
      text-shadow:
        0 0 10px #00ff66,
        0 0 20px #00cc3a,
        0 0 30px #059900;
}

.paper:active::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  background: rgba(234, 255, 0, 0.588);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: ripple 0.4s linear;
}

@keyframes ripple {
  to {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}