@font-face {
  font-family: 'Simplex Sans';
  src: url('simplex-sans.otf') format('opentype');
}

html {
  background-color: #f3ccb6;
}

body {
  font-family: 'Simplex Sans';
  background-color: #f3ccb6;
}

h1 {
  font-weight: bold;
  font-variant: small-caps;
}

a { color: black; }
a:hover { color: white; }

.circle {
  clip-path: circle();
}

.album-art {
  transition: all 100ms ease-out;
}

.album-art:hover {
  opacity: 0.8;
  transform: scale(1.025);
  cursor: pointer;
}

.card {
  max-width: 376px;
  border: none;
  text-align: center;
  background-color: unset;
}

.card-title {
  font-weight: bold;
}

.icon {
  height: 1rem;
}


/* Fade-In Animation */
body { opacity: 0; animation: fadeIn 1s forwards; }
@keyframes fadeIn { to { opacity: 1; } }