body,html{
  transition: 0.3s;
  background:url(banner.png) center no-repeat;
  background-size:100%;
  min-height:100%;
  font-family: 'Roboto Mono',  monospace;
  font-size:15px;
  display:flex;
  align-items:center;
  justify-content:center
  
}

body,html:hover {
  transition: 0.3s;
  background-size: 110%;
}

h1{
  font-weight:400;
  letter-spacing:-2px
}
h2{
  font-weight:400;
  letter-spacing:-2px;
  color: yellow;
}
.card {
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: 200px;
  min-width: 300px;
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.3);
  -webkit-animation: fadein 2s;
          animation: fadein 2s;
  overflow:hidden;
  z-index: 999;
}

.header {
  position: relative;
  z-index:1;
  width: 100%;
  height: 180px;
  box-shadow:0 4px 3px #0002;
  overflow: hidden;
}
.card img{
  width:100%;
  height: 100%;
  transition: all 1s ease;
  z-index:0
}




.image {
  width: 100%;
  height: 180px;
  cursor:crosshair;
  overflow:hidden;
}

.image:hover img{
  -webkit-transform: scale(1.2, 1.2);
          transform: scale(1.2, 1.2);
}

.header h2{
  position:absolute;
  bottom:0;
  margin:0;
  width:100%;
  padding:0 10px;
  color:rgb(94, 255, 0);
  text-transform:uppercase;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  font-size: 24px;
}
.icon {
  position: absolute;
  background:#fff;
  right: 10px;
  top: 135px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow:hidden;
  border:3px solid #fff;
  box-shadow:0 4px 3px #0002;
  z-index:9
}
#rest{
  padding:30px 15px;
  line-height:30px;
  color:#000d42
}