@font-face {
  font-family: 'Mikella';
  src: url('css/fonts/Mikella.otf') format('opentype');
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('css/fonts/LibreBaskerville-Regular.ttf') format('TrueType');
}
@font-face {
  font-family: 'Geologica';
  src: url('css/fonts/Geologica.ttf') format('TrueType');
}
h1, h2, h3, h4, h5, h6, div[class^="banner-"] {
  font-family:'Geologica';
}
.card {
  position: relative;
  overflow: hidden;
}

.card::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
}

.card.clicked::after {
  width: 100%;
  height: 100%;
  opacity: 1;
}