#randstuff {
  box-sizing:border-box;
  border:2px dashed #37474f;
  font-family:"PRISTINA";
  display:grid;
  height:333px;
  grid-template-rows:150px 31px 150px 150px;
  grid-template-columns:150px auto 150px;
  grid-template-areas:
    "setup_pic setup_text setup_text"
    "rand_spacer rand_spacer rand_spacer"
    "punch_text punch_text punch_pic"
    "cover cover cover";
}

#setup_pic {
  grid-area:setup_pic;
}

#setup_pic img {
  display:block;
  border-radius:8px;
  height:125px;
  margin-top:12px;
  margin-left:auto;
  margin-right:auto;
  
}

#setup_text {
  display:flex;
  align-items:center;
  justify-content:center;
  grid-area:setup_text;
  overflow:hidden;
}

#setup_text h3 {
  font-family:"PRISTINA";
  font-size: 30px;
  margin:15px 20px 15px 0px;
  
}

#punch_pic {
  grid-area:punch_pic;
}

#punch_pic img {
  display:block;
  border-radius:8px;
  height:125px;
  margin-top:12px;
  margin-left:auto;
  margin-right:auto;
  transform: scaleX(-1);
}

#punch_text {
  display:flex;
  align-items:center;
  justify-content:center;
  grid-area:punch_text;
  overflow:hidden;
}

#punch_text h3 {
  font-family:"PRISTINA";
  font-size: 30px;
  margin:15px 0px 15px 20px;
}

#rand_spacer {
  grid-area:rand_spacer;
}

#cover {
  grid-area:cover;
  translate: 0 -150px;
  overflow:hidden;
  color:white;
  font-size:35px;
  box-sizing:border-box;
  background-color:#37474f;  
  border-bottom-left-radius:8px;
  border-bottom-right-radius:8px;
  border-top-left-radius:0px;
  border-top-right-radius:0px;
  transition: background-color .75s ease, color .75s ease, border .75s ease;
}

#cover:hover {
  background-color:transparent;
  color:transparent;
  border-top:none;
}

#cover p {
  margin-top:35px;
  text-align:center; 
  animation: wobble 15s infinite ease-in-out;
  animation-delay:4s;
}

@keyframes wobble {
    0% {
        transform: translateX(0);
    }
    1% {
        transform: translateX(-5%) rotate(-3deg);
    }
    2% {
        transform: translateX(5%) rotate(2.5deg);
    }
    3% {
        transform: translateX(-3.75%) rotate(-2deg);
    }
    4% {
        transform: translateX(2.5%) rotate(1.5deg);
    }
    5% {
        transform: translateX(-1.25%) rotate(-1deg);
    }
    6% {
        transform: translateX(0);
    }
}
