*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    scroll-behavior: smooth;
  }



@font-face {
  font-family:GermaniaOne-Regular;
  src: url(assets/fonts/GermaniaOne-Regular.ttf);
}
@font-face {
  font-family:cut-font;
  src: url(assets/fonts/cut-font.ttf);
}
@font-face {
  font-family:cormorant-italic;
  src: url(assets/fonts/CormorantGaramond-Italic.ttf);
}

.card{
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
   width: 22%;
   margin: 15px;
   background-color: rgba(128, 128, 128, 0.623);
   border-radius: 20px 20px 20px 20px;
   transition: .2s;
   
   display: inline-block;
  
}

.card img{
    width: 100%;
    border-radius: 20px 20px 15px 15px;
    overflow: hidden;
    
    
}
.content{
    font-size: 25px;
    font-family: GermaniaOne-Regular;
    padding: 10px;
}
.content span{
  font-family: cut-font;
  font-size: 25px;
  color: black;
}
.card:hover{
  border-radius: 20px 20px 30px 30px ;
  background-color: rgba(255, 0, 0, 0.747);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
  
}
.content a{
  font-family: cormorant-italic;
  text-decoration: none;
}

.heading{
  font-family: cut-font;
  font-size: 5em;
  text-align: center;font-style: italic;
}

.content p span {
  visibility: visible;
  transition: visibility 1.0s;
}
 .content p span:hover{
   visibility: hidden;
}

.content a {
  visibility: visible;
  transition: visibility 1.0s;
}
 .content a:hover{
   visibility: hidden;
}
@media screen and (max-width: 1024px){
  .card{
    width: 30%;
  }
}

@media screen and (max-width:768px){
  .card{
    width: 60%;
  }
}

@media screen and (max-width: 600px){
  .card{
    width: 90%;
  }
}