@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sriracha:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arvo:wght@400;500;700;900&display=swap');

:root {
  --bg-color-line: #cbcbcb;
  --bg-color-page: #19223e;
  --color-cgi: #991f3d;
  --color-black: #555555;
  --color-brand-primary: #3863d9;
  --bg-footer-1: #bbdeea;
  --bg-footer-2: #eafdfc;
  --color-text: hsl(222deg, 22%, 5%);
  --color-background: hsl(0deg, 0%, 100%);
  --color-blurred-background: hsla(0deg, 0%, 100%, 0.85);
  --color-primary: hsl(245deg, 100%, 60%);
  --color-secondary: hsl(333deg, 100%, 45%);
  --color-tertiary: hsl(255deg, 85%, 30%);
  --color-decorative: hsl(200deg, 75%, 65%);
  --color-muted: hsl(210deg, 55%, 92%);
  --color-muted-background: hsla(210deg, 55%, 92%, 0.85);
  --color-info: hsl(245deg, 100%, 60%);
  --color-success: hsl(160deg, 100%, 40%);
  --color-success-background: hsla(160deg, 100%, 40%, 0.1);
  --color-error: hsl(340deg, 95%, 50%);
  --color-error-background: hsla(340deg, 95%, 43%, 0.1);
  --color-alert: hsl(37deg, 100%, 50%);
  --color-alert-background: hsla(52deg, 100%, 50%, 0.25);
  --color-venn-0: hsl(190deg, 100%, 65%);
  --color-venn-1: hsl(340deg, 100%, 65%);
  --color-gray-100: hsl(225deg, 25%, 95%);
  --color-gray-200: hsl(225deg, 16%, 90%);
  --color-gray-300: hsl(225deg, 8%, 80%);
  --color-gray-400: hsl(225deg, 8%, 70%);
  --color-gray-500: hsl(225deg, 7%, 60%);
  --color-gray-600: hsl(225deg, 15%, 50%);
  --color-gray-700: hsl(225deg, 12%, 40%);
  --color-gray-900: hsl(225deg, 25%, 20%);
  --color-gray-1000: hsl(225deg, 15%, 15%);
  --color-subtle-background: hsl(225deg, 25%, 95%);
  --color-subtle-floating: hsl(0deg, 0%, 100%);
  --color-homepage-light: hsl(204deg, 67%, 85%);
  --color-homepage-dark: hsl(202deg, 71%, 90%);
  --color-homepage-bg: hsl(204deg, 67%, 85%);
  --syntax-bg: hsl(225deg, 25%, 97%);
  --syntax-highlight: hsl(225deg, 25%, 93%);
  --syntax-txt: #2a2a2a;
  --syntax-comment: #467790;
  --syntax-prop: #da0079;
  --syntax-bool: #bf00b8;
  --syntax-val: #78909c;
  --syntax-str: #651fff;
  --syntax-name: #aa00ff;
  --syntax-del: rgb(255, 85, 85);
  --syntax-regex: #3600d6;
  --syntax-fn: #3d5afe;
  --fs-primary: 16px;
  --ff-primary: 'Inconsolata', sans-serif;
}

/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  font-size: var(--fs-primary);
  font-family: var(--ff-primary);
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
  font: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}

h1,
h2 {
  margin: 10px;
}

h2 {
  color: var(--color-text);
}
/* table {
  margin: 10px;
  border-collapse: collapse;
  width: 80%;
}

table,
th,
td {
  border: 2px solid var(--bg-color-line);
}
thead {
  background-color: var(--color-gray-700);
  color: white;
  text-transform: uppercase;
}


tbody tr:nth-child(odd) {
  background-color: #fff;
}

tbody tr:nth-child(even) {
  background-color: #eee;
}

tbody tr:hover {
  background-color: var(--color-gray-400);
}

tr,
th,
td {
  white-space: nowrap;
} */

.center {
  text-align: center;
}

.flex {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

table {
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
  border-collapse: collapse;
  background-color: #fff;
  border: 1px solid #ccc;
}

th, td {
  padding: 6px 10px;
  border: 1px solid #ddd;
  white-space: nowrap;
  color: #333;
}

thead {
  background-color: #f0f0f0;
}

tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

tbody tr:hover {
  background-color: #f1f1f1;
  transition: background-color 0.15s ease;
}