@charset "UTF-8";

body {
  align-items: center;
  color: #202020;
  display: flex;
  flex-direction: column;
  font-family: 'Merriweather', serif;
  font-variant-ligatures: none;
  font-size: 1.0em;
  letter-spacing: 0.13rem;
  margin: 0px;
  min-height: 100vh;
  text-align: center;
}

header {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 20px 0px 0px 0px;
  width: 100%;
}

a {
  text-decoration: none;
}

.logo {
  color: #c90c0c;
  font-family: 'Cutive Mono', monospace;
  font-size: 1.5em;
  font-weight: 600;
  text-decoration: none;
}

main {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0px 0px 0px 0px;
  width: 100%;
}

main h3 {
  display: block;
  font-size: 1.3em;
  font-style: italic;
  margin: 20px 0px 0px 0px;
  width: 85%;
}

main h1 {
  display: block;
  font-size: 1.6em;
  margin: 20px 0px 20px 0px;
  width: 85%
}

.table-container {
  display: flex;
  justify-content: center;
  overflow-x: auto;
  margin: 0px 2px 0px 2px;
  width: 90%;
}

table {
  border-collapse: collapse;
  margin-bottom: 10px;
  white-space: nowrap;
}

th {
  font-weight: 400;
}

.special {
  color: #c90c0c;
  font-size:1.2em;
  font-weight:600;
}

.tr1 {
  color: #c90c0c;
  font-style:italic;
}

.tr2 {
  height: 40px;
}

.c1 {
  font-size: 1.2em;
  height: 30px;
  padding: 0px 10px 0px 0px;
  text-align: left;
  width: 230px;
}

.c2, .c3, .c5 {
  border: 1px solid;
  border-color: #A9A9A9;
  height: 30px;
  width: 150px;
}

.c4 {
  border: 2px solid;
  border-color: #202020;
  height: 30px;
  font-size: 1.1em;
  font-weight: 600;
  width: 150px;
}

.join-cell {
  color: #c90c0c;
  font-size: 1.0em;
  height: 75px;
}

.join-button-1, .join-button-2, .join-button-4 {
  border-color:#A9A9A9;
  border-style: solid;
  border-radius: 10px;
  border-width: 1px;
  color: #202020;
  margin: auto;
  padding: 5px;
  width: 60%;
}

.join-button-3 {
  border-style: solid;
  border-radius: 10px;
  border-width: 2px;
  color: #202020;
  font-weight:600;
  margin: auto;
  padding: 5px;
  width: 60%;
}

.join-button-1:hover, .join-button-2:hover, .join-button-3:hover, .join-button-4:hover {
  background-color: #c90c0c;
  border-color:#202020;
  color: #FFFFFF;
}

footer {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 10px;
  margin-top: auto;
}

.link-area {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 5px 5px 5px 5px;
  padding: 0px;
}

.link-area a {
  color: #A9A9A9;
  font-size: 1.2em;
  margin: 10px;
  text-decoration: none;
}

.link-area a:hover {
  color: #202020;
}

.break2 {
  flex-basis: 100%;
  display: none;
  width: 0px; 
  height: 0px; 
  overflow: hidden;
}

.copyright {
  color: #A9A9A9;
  font-size: 1.0em;
  margin: 10px 10px 10px 10px;
}

/* 950px */

@media (max-width:950px){

    .logo {
      font-size: 1.4em;
    }

    main h3 {
      font-size: 1.2em;
      width: 90%;
    }

    main h1 {
      font-size: 1.5em;
      width: 90%;
    }

    table {
      min-width: 725px;
    }

    thead {
      height: 50px;
      font-size: 0.9em;
    }

    .c1 {
      font-size: 1.1em;
      width: 200px;
    }

    .c2, .c3, .c4, .c5 {
      font-size: 0.9em;
      width: 125px;
    }

    .join-cell {
      font-size: 0.9em;
      height: 65px;
    }

}

/* 800px */

@media (max-width:825px){

    .logo {
      font-size: 1.3em;
    }

    main h3 {
      font-size: 1.1em;
    }

    main h1 {
      font-size: 1.4em;
    }

    table {
      min-width: 625px;
    }

    thead {
      height: 50px;
      font-size: 0.8em;
    }

    .c1 {
      font-size: 1.0em;
      width: 170px;
    }

    .c2, .c3, .c4, .c5 {
      font-size: 0.8em;
      width: 100px;
    }

    .join-cell {
      font-size: 0.8em;
    }

}

/* 700px */

@media (max-width:700px){

    .logo {
      margin: 0px 20px 0px 20px;
    }

    .table-container {
      justify-content: left;
      margin-bottom: 20px;
    }

    .link-area a {
      font-size: 1.0em;
      margin: 5px 10px 5px 10px;
    }

}

/* 450px */

@media (max-width:450px){

    main h3 {
      font-size: 1.1em;
      width: 95%;
    }

    main h1 {
      width: 230px;
    }

    .c1 {
      font-size: 0.9em;
      width: 150px;
    }

    .break2 {
      display: inline-block;
    }

}