html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  font-family: 'DMSans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #131f1e;
}
img {
  display: block;
}

/* Tanker */
@font-face {
  font-family: 'Tanker';
  src: url('./assets/fonts/Tanker.otf') format('opentype');
}

/* DM Sans */
@font-face {
  font-family: 'DMSans';
  src: url('./assets/fonts/DMSans.woff2') format('woff2');
}


:root {
  --font-sans: 'DMSans', sans-serif;
  --font-display: 'Tanker', sans-serif;
}


.font-display,
h1, h2, h3 {
  font-family: 'Bold', sans-serif;
}

.card {
  background: rgba(20, 20, 20, 0.6);
  backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 16px;
  padding: 24px;

  transition: all 0.3s ease;

  /* subtle glow */
  box-shadow: 0 0 0 rgba(255, 100, 50, 0);
}

/* hover effect */
.card:hover {
  transform: translateY(-6px);

  border: 1px solid rgba(255, 100, 50, 0.4);

  box-shadow: 0 10px 30px rgba(255, 100, 50, 0.15);
}