styles.scss

@media (max-width: 500px) {
  .widescreen {
    display: none;
  }
}

@media (min-width: 501px) {
  .shortscreen {
    display: none;
  }
}

nav {
  background-color: lightcyan !important;
}

body {
  background-color: white !important;
  margin-left: 20px !important;
  margin-right: 20px !important;
}

nav {
  a {
    font-size: large;
  }

  a:hover {
      background-color: lightgray;
  }
}

.center {
  text-align: center;
}

%title {
  text-align: center;
  font-weight: bold;
}

.title {
  @extend %title;
  font-family: serif;
}

#main-title {
  @extend %title;
  font-family: cursive;
}

img {
  width: 50%;
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}

p {
  text-align: center;
}

$border: 1px solid black;

table {
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  border: $border;
}

table {
  th {
    font-size: medium;
    font-family: cursive;
    font-weight: bold;
    text-align: center;
    border: $border;
  }

  td {
    font-size: small;
    text-align: center;
    border: $border;
  }
}