*{
  margin: 0;
  box-sizing:border-box;
}

body{
  background-image: url(https://cdn.glitch.com/4a3c1083-ccce-4613-96b9-ae0811196350%2Fdigital-1742687_1920.jpg?1541079807796);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

header{
  text-align: center;
 text-shadow: 2px 2px 4px white;
  padding:1em;
  box-shadow: 0 4px 4px black;
}

.container{
  display:flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.contents{
  border-radius:20px;
  width: 400px;
  border: 20px solid;
  background-color:black;
  border-image:url(https://cdn.glitch.com/4a3c1083-ccce-4613-96b9-ae0811196350%2Fmatrix-1274888_1920.png?1541076903567) 80;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgba(0,0,0,0);
  margin: 2em;
  padding: 1em;
  transition: all 2s;
}

.contents h3{
  color: white;
  transition: all 2s;
  text-align: center;
}

.contents p{
  position: relative;
  top:-40px;
  text-align: center;
  padding:1em;
}

.contents img{
  opacity: 0;
  transition: all 2s;
}

.contents:hover>h3{
  color: black;
}

.contents:hover{
  color:white;
}