@font-face {
  font-family: 'GeistMono';
  src: url('media/fonts/GeistMono-Light.woff2') format('woff2');
  font-weight: 300; /* Light */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GeistMono';
  src: url('media/fonts/GeistMono-Regular.woff2') format('woff2');
  font-weight: 400; /* Regular */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GeistMono';
  src: url('media/fonts/GeistMono-Medium.woff2') format('woff2');
  font-weight: 500; /* Medium */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GeistMono';
  src: url('media/fonts/GeistMono-SemiBold.woff2') format('woff2');
  font-weight: 600; /* Semibold */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GeistMono';
  src: url('media/fonts/GeistMono-Bold.woff2') format('woff2');
  font-weight: 700; /* bold */
  font-style: normal;
  font-display: swap;
}

html, body {
  min-height: 100vh;
}
body {
  font-family: 'GeistMono', monospace;
  background-color: #FDA7DF;
  padding-bottom: 20px;
}
p {
  font-family: 'GeistMono', monospace;
  font-size: 16px;
  font-weight: 600;
  color: #221f1f;
  letter-spacing: .03em;
  word-wrap: break-word;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased !important;
  -moz-font-smoothing: antialiased !important;
  text-rendering: optimizelegibility !important;
}
#quote-container {
  margin: 10px auto;
  border-radius: 10px;
  padding: 20px;
  background-color: #fff;
  font-family: 'GeistMono', monospace;
}
#quote {
  font-family: 'GeistMono', monospace;
  font-size: 20px;
  margin-bottom: 20px;
  color: #333;
}
#author {
  font-family: 'GeistMono', monospace;
  font-style: italic;
  color: #777;
}
#image-container {
  margin-top: 20px;
}
#quote-card {
  max-width: 800px;
  margin: 10px auto;
  font-family: 'GeistMono', monospace;
}
.generate-button {
  font-family: 'GeistMono', monospace;
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 4px;
}

.generate-button:hover {
  background-color: #45a049;
}
.read-score {
  font-family: 'GeistMono', monospace;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  border-radius: 32px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased !important;
  -moz-font-smoothing: antialiased !important;
  text-rendering: optimizelegibility !important;
}
.loading {
  display: none;
  text-align: center;
}
input {
  font-family: 'GeistMono', monospace;
}
select {
  font-family: 'GeistMono', monospace;
}
/* Default styles for the table */
.table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'GeistMono', monospace;
  font-weight: 700;
  font-size: 15px;
}

/* Styles for table headers */
.table-wrapper th {
  background-color: #f2f2f2;
  border: 1px solid #dddddd;
  padding: 8px;
  text-align: left;
}

/* Styles for table cells */
.table-wrapper td {
  border: 1px solid #dddddd;
  padding: 8px;
  text-align: left;
}

/* Media query for smaller screens (e.g., mobile devices) */
@media screen and (max-width: 600px) {
  /* Modify table layout for smaller screens */
  .table-wrapper table {
      width: 100%; /* Ensure table occupies full width of viewport */
  }
  .table-wrapper th,
  .table-wrapper td {
      padding: 4px; /* Decrease padding for smaller screens */
      font-size: 15px; /* Decrease font size for smaller screens */
      font-weight: 700;
  }
}