:root {
  /* Color palette variables */
  --purple-80: #582f77;
  --purple-50: #8b5898;
  --purple-30: #d398f2;
  --purple-10: #f9eeff;

  --peach-80: #ec926d;
  --peach-50: #efb19a;
  --peach-30: #f9ded3;
  --peach-10: #fff6f3;

  --torquoise-80: #294653;
  --torquoise-50: #42878c;
  --torquoise-30: #84c8cf;
  --torquoise-10: #eafffe;

  --gray-80: #353231;
  --gray-50: #9e9a98;
  --gray-30: #d2d0cf;
  --gray-10: #faf6f4;

  --white: #fffcfa;
  --black: #111110;
}

/* Focus visible styles */
:focus-visible {
  outline: 3px solid var(--peach-50);
  outline-offset: 3px;
}

/* Include padding and border in all elements total width and height */
* {
  box-sizing: border-box;
}

/* =========================================
   Body
========================================= */
body {
  margin: 0;
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  line-height: 1.7;
  color: var(--black);

  background: var(--peach-10);

  padding: 60px 20px;
  max-width: 950px;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================
   Typography
========================================= */
/* Header styles */
header {
  margin-bottom: 55px;
}

/* H1 heading styles */
h1,
.subtitle {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.7rem;
  font-weight: 600;
  color: var(--torquoise-50);
  letter-spacing: 0.5px;
}

/* First H1 heading styles */
h1:first-child {
  position: relative;
}

/* First H1 heading underline */
h1:first-child::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9%;
  width: 200px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: var(--purple-50);
}

/* H2 heading styles */
h2 {
  margin-top: 65px;
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--torquoise-50);
  position: relative;
  padding-bottom: 10px;
}

/* H2 heading underline */
h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 90px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--purple-50), var(--purple-30));
}

/* Paragraph styles */
p {
  display: flex;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--gray-80);
}

/* 'note'-class styles */
.note {
  display: block;
}

/* =========================================
   Table
========================================= */
/* Table wrapper styles */
.table-wrapper {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--peach-30);
  box-shadow: 0px 0px 15px var(--peach-30);
}

/* Table styles */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
}

/* Table header styles */
th {
  background: linear-gradient(var(--torquoise-10), var(--torquoise-30));
  color: var(--gray-80);
  text-align: left;
  padding: 16px 20px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* Table row styles */
tr {
  box-shadow: 0px 0px 1px 0px var(--peach-30);
}

/* Table data cell styles */
td {
  padding: 15px 20px;
}

/* First table data cell styles*/
table td:first-child {
  font-weight: 600;
  color: var(--torquoise-80);
}

/* Table row hover styles */
tr:hover {
  background: var(--torquoise-10);
  transition: background 0.3s ease;
}

/* Last table row data cell styles */
tr:last-child td {
  border-bottom: none;
}

/* =========================================
   Footer
========================================= */
/* Footer styles */
footer {
  margin-top: 80px;
  padding-top: 25px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--gray-80);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* =========================================
   Top of page accent line
========================================= */
/* Body before pseudo-element */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(
    to right,
    var(--purple-50),
    var(--purple-30),
    var(--peach-50),
    var(--peach-80)
  );
  z-index: 10;
}

/* =========================================
   Back to top button
========================================= */
/* 'backToTop'-id styles */
#backToTop {
  position: fixed;
  bottom: 40px;
  right: 20px;

  width: 48px;
  height: 48px;
  border-radius: 50%;

  border: none;
  cursor: pointer;

  color: white;

  background: linear-gradient(135deg, var(--torquoise-50), var(--torquoise-30));

  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);

  transition: all 0.3s ease;
}

/* 'backToTop'-id span styles */
#backToTop span {
  font-size: 1.4rem;
  line-height: 1;
}

/* 'backToTop'-id visible state styles */
#backToTop.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* 'backToTop'-id hover styles */
#backToTop:hover {
  background: linear-gradient(135deg, var(--torquoise-80), var(--torquoise-50));
}

/* =========================================
   Responsive, mobile
========================================= */
/* Media query for screens with a maximum width of 600px */
@media (max-width: 600px) {
  /* Body styles */
  body {
    padding: 40px 20px;
  }

  /* H1 heading styles */
  h1,
  .subtitle {
    font-size: 2rem;
  }

  /* Table styles */
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  /* Table header styles */
  th {
    display: none;
  }

  th:first-child {
    display: block;
    content-visibility: hidden;
  }
  /* Table data cell styles */
  td {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 12px;
  }

  /* First table data cell styles */
  td:first-child {
    font-weight: 700;
  }

  /* First data cell styles in the last row */
  tr:last-child td:first-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
}