@font-face {
      font-family: 'DrunkenSailor';
      src: url('https://file.garden/aolBC37TLTA2Tusx/DrunkenSailor.ttf') format('truetype');
    }
body {
    background: url('/images/woodplanks.png');
    font-family: 'DrunkenSailor', sans-serif;
    background-position: center;
    }
    
h1 {
    color: white;
    font-size: 40px;
}    

h3 {
    color: white;
}

.card-img-1 {
    width: 175px;
position: absolute;
top: 80px;
left: -0px;
z-index: 30;
  }

.pinCollection {
    z-index: 1;
    position: absolute;
    scale: 50%;
    left: 170px;
    top: -5px;
    filter: drop-shadow(10px 10px 1px rgba(16, 9, 47, 0.29));
}

.pinCollection span {
    opacity: 0;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    font-size: 4rem;
    font-family: DrunkenSailor;
    line-height: 0.9;
    letter-spacing: 10px;

    color: #fff7dd;
    filter: drop-shadow(1px 1px 0 #382d77) drop-shadow(-1px 1px 0 #382d77) drop-shadow(1px -1px 0 #382d77)
        drop-shadow(-1px -1px 0 #382d77);
}
.pinCollection:hover span,
.pinCollection:focus span {
    opacity: 1;
}
.pinCollection:hover img,
.pinCollection:focus img {
    filter: hue-rotate(deg) saturate(%);
    transform: rotate(3deg);
    transition: .3s;
}