@import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');
body {
 background-color:rgba(0, 0, 0, 0.8);
background-size:500px;
background-repeat:repeat;
background-image:url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cstyle%3E.st0%7Bfill:rgb(220,20,60)%7D%3C/style%3E%3Cpath class='st0' d='M125 250v125l125 125V375zM250 125L125 0v125l125 125zM250 250v125l125-125V125zM500 250V125L375 0v125zM500 500V375L375 250v125zM125 500V375L0 500zM375 500V375L250 500zM250 0v125L375 0zM0 125L125 0H0zM0 250v125l125-125V125z'/%3E%3C/svg%3E");
}
p {
  margin-top: .3rem;
}
a {
  text-decoration: none;
  color: white;
}
button {
  border: .2rem solid black;
  outline: none;
  font-size: 2.5rem;
  font-weight: 800;
  font-family: 'Voltaire', sans-serif;
  cursor: pointer;
  background-color:rgb(220, 20, 60) ;
  padding: .7rem;
  border-radius: .5rem;
  color: white;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4),
              5px 5px 5px rgba(0, 0, 0, 0.4);
}

button:active {
  margin-top: .3rem;
  transition: ease-in;
  box-shadow: none;
}
.card {
  width: 40rem;
  height: 27rem;
 border-radius: 10px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 5%;
  padding: 1rem;
  background-color: antiquewhite;
  font-family: 'Voltaire', sans-serif;
  font-size: 1.5rem;
   text-align: center;
}
.card::after{
 content: "";
 position: absolute;
 top: 82%;
 left: 347px;
 height: 60px;
 width: 42rem;
 background: url(images/rip.svg) bottom center;
    /* background-size: 150%; */
}
.head {
  font-family: 'Creepster', cursive;
  font-size: 120px;
  text-transform: uppercase;
  color: firebrick;
 
}