@import url('https://fonts.googleapis.com/css2?family=Gemunu+Libre:wght@200&display=swap');

body,html{
  background:url(/images/2021-09-25_13.46.16.png) center no-repeat;
  background-size:cover;
  min-height:100%;
  font-family: 'Roboto Mono',  monospace;
  font-size:15px;
  display:flex;
  align-items:center;
  justify-content:center
}
body:before{
  content:""; width:100%; height:100%; background:rgba(0,0,0,0.8);
  position:absolute;
  top:0;
  left:0;
  z-index:10
}
h1,h2{
  font-weight:400;
  letter-spacing: 15px;
  font-family: 'Roboto Mono', monospace;
}

.reload {
  position: fixed;
  margin: 10px;
  left: 0px;
  width: auto;
  bottom: 0px;
  padding: 7px;
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 0px 16px 0px rgb(0 0 0 / 30%);
  overflow: hidden;
  z-index: 999;
  color: black;
  transition: all 0.5s ease 0s;
}

.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%;
  transition: all 1s ease;
  z-index:0
}
.image {
  width: 100%;
  height: 190px;
  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:#fff;
  text-transform:uppercase;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
}
.icon {
  position: absolute;
  background:#fff;
  right: 10px;
  top: 121px;
  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 0px;
  line-height:30px;
  color:#000d42
}

.button {
  background-color: #1a181d; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 30px 2px ;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.3s;
}

.button2:hover {
  box-shadow: 0 8px 12px 2px rgb(0 0 0 / 24%), 0 8px 12px 2px rgb(0 0 0 / 24%);
}

.button2:focus {
  box-shadow: 0 0px 10px 18px rgb(0 0 0 / 24%);
  transform: scale(0.9);
}

.container {
  padding: 16px;
}

.containers {
  padding: 16px;
  height: 348px;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 999999999999; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

.animate {
  -webkit-animation: animatezoom 0.5s;
  animation: animatezoom 0.5s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}