:root {
--navajo-white: #ffdeadff;
--papaya-whip: #ffebcdff;
--jasmine: #f8de7eff;
--powder-blue: #a2add0ff;
--grey: #333333ff;
}

body {
  text-align: center;
  background-color: var(--navajo-white);
  font-family: "Newsreader", serif;
  margin: 0;
  padding: 0;
}

h2, p {
  margin: 10px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--grey);
}

ul li {
  float: left;
}

ul li a {
  display: block;
  color: var(--jasmine);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul li a:hover {
  background-color: var(--powder-blue);
  color: var(--grey);
}

button {
  color: var(--jasmine);
  border-radius: 25px;
  background-color: var(--grey);
  transition: all 0.2s ease-in-out;
  padding: 10px 20px;
  border: none;
}
button:hover {
  background-color: var(--powder-blue);
  color: var(--grey);
  transform: scale(1.1);
  cursor: pointer;
}