@charset "utf-8";

html {
  scroll-behavior: smooth;
}

body {
  color: blueviolet;
  background: lavender;
}

nav {
  margin: 1rem auto;
}

p {
  margin: auto;
  background: white;
  width: 9%;
}

p a {
  color: #ff88c9;
}

p a:hover {
  color: darkorange;
  background: mediumslateblue;
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  margin: 1rem auto;
  background: ivory;
  width: 50%;
}

th {
  color: white;
  background: blueviolet;
}

th,td {
  border: 1px solid black;
}

a {
  display: block;
}

tr a {
  color: blueviolet;
}

tr td:last-child {
  color: black;
}

tr:hover a,tr:hover td {
  color: red;
}

tr:hover {
  background: yellow;
}

footer {
  margin: 1rem auto;
}

/* =========== for Mobile =========== */
@media (max-width: 767px) {

p {
  width: 30%;
}

a {
  padding: 0.3rem 0;
}

table {
  width: 90%;
}

td {
  padding: 0.3rem 0;
}

}