:root {
    --paper-shadow: #c9bf8d;
  }

  
  .pinned-paper {
    --paper-dark: #e5c93d;
    --paper-color: #ffed87;
    font-family: "Ingrid Darling", cursive;
    color: #2c2d2e;
    position: relative;
    display: flex;
    justify-content: center;
    /*min-width: 325px;
    min-height: 175px;*/
    aspect-ratio: 13/7;
    width:100%;
    background: linear-gradient(
      135deg,
      var(--paper-dark),
      30%,
      var(--paper-color)
    );
    box-shadow: 3px 3px 2px var(--paper-shadow);
    transform: rotate(10deg);
    transform-origin: top left;
    padding: 0.2rem;
  }
  
  .pinned-paper p {
    margin: auto;
    font-size: 1.2rem;
  }
  
  /*.pin {
    --pin-color: #d02627;
    --pin-dark: #9e0608;
    --pin-light: #fc7e7d;
  
    position: absolute;
    left: 20px;
    width: 60px;
    height: 50px;
  }
  
  .shadow {
    position: absolute;
    top: 18px;
    left: -8px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: radial-gradient(var(--paper-shadow), 20%, rgba(201, 191, 141, 0));
  }
  
  .metal {
    position: absolute;
    width: 5px;
    height: 20px;
    background: linear-gradient(to right, #808080, 40%, #eae8e8, 50%, #808080);
    border-radius: 0 0 30% 30%;
    transform: rotate(50deg);
    transform-origin: bottom left;
    top: 15px;
    border-bottom: 1px solid #808080;
  }
  
  .bottom-circle {
    position: absolute;
    right: 15px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: var(--pin-color);
    background: radial-gradient(
      circle at bottom right,
      var(--pin-light),
      25%,
      var(--pin-dark),
      90%,
      var(--pin-color)
    );
  }*/
  
  /* Barrel 
  .bottom-circle::before {
    content: "";
    position: absolute;
    top: 0;
    left: -2px;
    width: 20px;
    height: 30px;
    transform: rotate(55deg);
    transform-origin: 100% 100%;
    border-radius: 0 0 40% 40%;
    background: linear-gradient(
      to right,
      var(--pin-dark),
      30%,
      var(--pin-color),
      90%,
      var(--pin-light)
    );
  }
  
  /* Top circle 
  .bottom-circle::after {
    content: "";
    position: absolute;
    right: -10px;
    top: -5px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: radial-gradient(
      circle at right,
      var(--pin-light),
      30%,
      var(--pin-color),
      var(--pin-dark) 80%
    );
  }
  */