* {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  scrollbar-color: hsl(178.9, 100%, 68.04%) hsl(234.89, 55.29%, 50%);
}

h2 {
  font-size: x-large;
  color: rgb(78, 78, 78);
  margin-bottom: 5px;
}

h1 {
  font-size: xx-large;
  margin-top: 5px;
  margin-bottom: 5px;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.main {
  background-color: rgb(254, 196, 196);
  max-width: 800px;
  padding: 5vh 5vw;
  margin: 5vh 5vw;
  border-radius: 30px;
  filter: drop-shadow(0 0 0.75rem rgb(255, 162, 162));
}

.top {
  margin: 0 5vw;
  text-align: center;
}

.office-hours ul {
  list-style: none;
}

.office-hours {
  margin: 20px;
}

.links {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: 20px;
}

.links > * {
  margin: 16px 2px;
}

.links > p {
  text-align: left;
  vertical-align: middle;
  align-self: center;
}

.button {
  background-color: #c8f1f8;
  border: none;
  color: black;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  border-radius: 16px;
  height: 40px;
  align-self: center;
  line-height: 40px;
  border: 1px solid black;
  filter: drop-shadow(3px 7px);
  position: relative;
  bottom: 2px;
  min-width: 256px;
}

.button:hover {
  background-color: #83ecff;
  right: -2px;
  bottom: 0px;
  filter: drop-shadow(1px 5px);
}

.bottom-text {
  text-decoration: none;
  color: rgb(104, 104, 104);
  text-align: center;
}

.bottom-text:hover {
  color: rgb(81, 81, 81);
}

.full-width {
  grid-column-start: 1;
  grid-column-end: 3;
}

@media only screen and (max-width: 800px) {
  .links {
    grid-template-columns: 1fr;
  }
}

/* Animations  - credit to https://gist.github.com/Kn4ppster/d20385eda9d9b8f9b01e */

.animated-gradient {
  background: repeating-linear-gradient(
    to right,
    hsl(234.89, 55.29%, 50%) 0%,
    hsl(234.09, 55.64%, 50.22%) 4.05%,
    hsl(231.82, 56.62%, 50.85%) 7.75%,
    hsl(228.37, 58.18%, 51.81%) 11.25%,
    hsl(224, 60.29%, 53.06%) 14.5%,
    hsl(218.97, 62.92%, 54.52%) 17.65%,
    hsl(213.53, 66.03%, 56.14%) 20.6%,
    hsl(207.92, 69.58%, 57.85%) 23.55%,
    hsl(202.35, 73.5%, 59.6%) 26.45%,
    hsl(197.01, 77.69%, 61.31%) 29.4%,
    hsl(192.08, 82.02%, 62.93%) 32.35%,
    hsl(187.72, 86.27%, 64.39%) 35.5%,
    hsl(184.07, 90.17%, 65.64%) 38.75%,
    hsl(181.29, 93.4%, 66.6%) 42.25%,
    hsl(179.51, 97.14%, 67.49%) 45.95%,
    hsl(178.9, 100%, 68.04%) 50%,
    hsl(179.51, 97.14%, 67.49%) 54.05%,
    hsl(181.29, 93.4%, 66.6%) 57.75%,
    hsl(184.07, 90.17%, 65.64%) 61.25%,
    hsl(187.72, 86.27%, 64.39%) 64.5%,
    hsl(192.08, 82.02%, 62.93%) 67.65%,
    hsl(197.01, 77.69%, 61.31%) 70.6%,
    hsl(202.35, 73.5%, 59.6%) 73.55%,
    hsl(207.92, 69.58%, 57.85%) 76.45%,
    hsl(213.53, 66.03%, 56.14%) 79.4%,
    hsl(218.97, 62.92%, 54.52%) 82.35%,
    hsl(224, 60.29%, 53.06%) 85.5%,
    hsl(228.37, 58.18%, 51.81%) 88.75%,
    hsl(231.82, 56.62%, 50.85%) 92.25%,
    hsl(234.09, 55.64%, 50.22%) 95.95%,
    hsl(234.89, 55.29%, 50%) 100%
  );

  background-size: 200% auto;
  background-position: 0 100%;
  animation: gradient 50s infinite;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes gradient {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -200% 0;
  }
}