@charset "UTF-8";
/* CSS Document */

/* Universal  Styles */

html {
  display: block;
}

.container{
  max-width: 960px;
  margin: auto;
}

.flex{
  display: flex;
}

/* Header */

header{

}

main.banner{

}

/* Nav */

#nav-bar{
  viewport: top;
   display: flex;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #FFA7E0;
}

nav > ul {
  display: flex;
  list-style: none;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #FFA7E0;
}

.nav-link  a {
  border-right: 1px solid #E0D2EF;
  display: block;
  padding: 1.2rem 1rem;
  color: #E0D2EF;
}

/* Body */

body {
  font-family: Lucida, Georgia;
  background-color: #F2F2F2;
  display: block;
  margin: 8px;
  text-align: center;
  line-height: 1.4rem;
}


h1 {
  text-align: center;
  color: #FF83CF;
  display: block;
  font-size: 3em;
  font-weight: bold;
}

h2 {
   text-align: center;
  color: #FFA7E0;
  display: block;
  font-size: 1.7em;
  font-weight: bold;
}

p {
   text-align: center;
  color: #FFA7E0;
  display: block;
  font-size: 1em;
  font-weight: bold;
}

/* Table */

table {
  border: 3px solid #FF83CF;
  width: 750px;
  margin: 0 auto;
  display: table;
  box-sizing: border-box;
  text-wrap: wrap;
  line-height: normal;
  font-weight: normal;
  font-size: 1em;
  background-color: #E0D2EF;
  border-spacing: 2px;
  text-align: center;
  vertical-align: middle;
}

thead {
  background-color:#FFA7E0;
  display: table-header-group;
  vertical-align: middle;
  border-color: #FFA7E0;
  font-size: 1em;
  text-align: center;
}

tr {
  display: table-row;
  text-align: center;
  vertical-align: middle;
}

td {
    font-family: monospace;
  background-color: #C0C0BE;
  text-align: center;
  vertical-align: middle;
}

td:hover {
  background-color: #0c960c;
  transition: background-color .15s, font-size .15s;
  font-size: 18px;
}

.name {
  font-family: monospace;
  background-color: #C0C0BE;
  text-align: center;
  vertical-align: middle;
}

.name:hover {
  background-color: #0c960c;
  transition: background-color .15s, font-size .15s;
  font-size: 18px;
}

/* Footer */