body {
    background-color: #202847;
    background-image: url("imgs/ptrn2.png") ; 
    background-size: 70%;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  }
.landing{
  margin:auto;
  position:relative;
}

  .mat {
    background-color:#46B46B;
    border: 1px solid #fff;
    box-shadow: 10px 5px 5px #1c1f23;
    float:left;
    width:67%;
    padding-left: 40px;
    border-radius: 10px;
    padding: 20px 110px 20px 20px;
    margin-top: 50px;
    margin-left: 50px;
    margin-bottom: 20px;
  }
  .card {
    margin: auto;
    transform: rotate(15deg);
    padding:10px;
    transition: all .2s ease-in-out;
    position:fixed;
    left: 75%;
    top: 30%;
    width: 20%;
    height:auto;

  }
  .card:hover { 
    transform:  rotate(10deg) scale(1.1); 
  
    }
.link{
  color:#041122;
  border-radius: 10px;
  background: #cbebbe;
  text-decoration: none;
  transition: all .2s ease-in-out;
  display: inline-block;
  padding: 8px;
  margin: 3px;
  
  
}
.link:hover{
  background-color: #afe098;
}


  /*responsive layout*/
@media only screen and (max-width: 768px) {
  .card {
    position:absolute;
    float:none;
    margin:auto;
    top: auto;
    left: 25%;
    right:25%;
    bottom: auto;
    right: auto;
    width:50%;
    height:auto;
  }
}
@media only screen and (max-width: 768px) {
  .mat {
    color:#041122;
    width:80%;
    border: 1px solid #fff;
    box-shadow: 10px 5px 5px #1c1f23;    
    border-radius: 10px;
    padding: 20px 20px 170px 20px;
    margin: auto;
    float:none;
    
  }

.stamps {
    text-align: center;
    max-width: 100%;
  }
}