@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;700&display=swap');
*{
 margin: 0px;
 padding: 0px;
}
body{
 font-family: arial;
}
.main{

 margin: 2%;
}

h1{
  color: red;
  font-size: 4rem;
  position: relative;
  left: 36%;
  font-family: 'Unbounded', cursive;
  margin-top: 20px;
  margin-bottom: -30px;
  
}

.title h1{
  color: black;
  font-size: 1.5rem;
  left: 0%;
  font-family: sans-serif;
  margin-top: 0%;
  margin-bottom: 0%;
}

.card{
     width: 20%;
     display: inline-block;
     /* box-shadow: 2px 2px 20px black; */
     border-radius: 5px; 
     margin: 2%;
    }

.image img{
  width: 100%;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  
 }

.title{
 
  text-align: center;
  padding: 10px;
  
 }

/* h1{
  font-size: 20px;
 } */

.des{
  padding: 3px;
  text-align: center;
 
  padding-top: 10px;
        border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
/* button{
  margin-top: 40px;
  margin-bottom: 10px;
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
  padding:10px;
}
button:hover{
  background-color: black;
  color: white;
  transition: .5s;
  cursor: pointer;
} */