* {
  /*border: 1px solid black !important;*/
  box-sizing: border-box;
  /*background-color: #fffcbc;*/
}


@font-face {
  font-family: 'gameofthrones';
  src: url('got.ttf');
}

/*block level elements get the treatment*/
.header {

}

div {
  font-size: 1rem;
}
.footer {
  width: 100%;
  display: flex;
  padding: .5em;
  margin-top: .5em;
  text-align: center;
}

main  {
    max-width: 80%;
    margin: auto;
    margin-top: 3em;
    padding: .5em;
    font-family: 'Didact Gothic', sans-serif;
    /*background-color: #fffcbc;*/
  }

nav {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  position: fixed;
  top: 0px;
  align-items: center;
  font-size: 1em;
  font-family: 'Didact Gothic', sans-serif;
  font-weight: bold;
}
.hamburger{
  display: none;
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: .5em;
  text-align: center;
}
.logo{
  flex:5;
  /*padding: .7em;*/
}

.navItem {
flex: 1;
padding:.7em;
}

/*text elements get the treatment*/
h1 {
  font-family: 'gameofthrones', fantasy, serif;
  font-size: 3em;
  padding-top: .4em;
  padding-bottom: .25em;
  font-weight: 400;
}

h2 {
  font-family: 'gameofthrones', fantasy, serif;
  font-size: 2.5em;
  padding-bottom: .25em;
  padding-top: .4em;
  font-weight: 400;
}

h3{
  font-family: 'Cinzel', serif;
  font-size: 2.75em;
  font-weight: bold;
  padding: .20em 0em .10em 0em;
}

h4 {
  font-family: 'Cinzel', serif;
  font-size: 2.5em;
  font-weight: bold;
  padding: .25em 0em .25em 0em;
}

h5 {
  font-family: 'Cinzel', serif;
  font-size: 2.25em;
  font-weight: bold;
  padding: .25em 0em .25em 0em;
}

h6{
  font-family: 'Cinzel', serif;
  font-size: 2em;
  font-weight: bold;
  padding: .25em 0em .25em 0em;
}

p {
  font-family: 'Didact Gothic', sans-serif;
  font-size: 1.3em;
  line-height: 1.5em;
  padding: .5em;
}

/*This is the grid system*/
.container {
  display: flex;
  justify-content: center;
  vertical-align: middle;
  margin-bottom: .5em !important;
}

.column {
  flex-direction: column;
}
.col1 {
  flex: 1;
  padding: .8rem;
}
.col2 {
  flex: 2;
  padding: .8rem;
}
.col3 {
  flex: 3;
  padding: .8rem;
}
.col4 {
  flex: 4;
  padding: .8rem;
}
.col5 {
  flex: 5;
  padding: .8rem;
}
.col6 {
  flex: 6;
  padding: .8rem;
}
.col7 {
  flex: 7;
  padding: .8rem;
}
.col8 {
  flex: 8;
  padding: .8rem;
}

.space {
  margin-left: .25em;
  margin-right: .25em;
  padding: .5em;
}
/*UL and OL schenanigans....*/
ul {
  list-style-type: square;
  list-style-position: inside;
  margin-left: .5em;
  padding: .5em;
  font-size: 1.25em;
  line-height: 1.1;
  font-family: 'Cinzel';
  font-weight: 600;
}

ol {
  list-style-type: lower-roman;
  list-style-position: inside;
  margin-left: .5em;
  padding: .5em;
  font-size: 1.25em;
  line-height: 1.1;
  font-family: 'Cinzel';
  font-weight: 600;
}

li {
  padding: .25em;
}

/*blockquote and all that jazz (who uses blockquotes?)*/
blockquote {
  font-size: 1.25em;
  font-family: 'Cinzel', sans-serif;
  font-weight: 600;
  line-height: 1.25;
  width: 80%;
  padding: 2em;
  border-left: 5px solid black !important;
  margin:auto;
  margin-top: 1em;
  margin-bottom: 1em;
  padding: 0em 1em 0em 1em;
}

/*forms and all their stupid non-glory */
form {
  width: 80%;
  margin: auto;
  padding: .5em;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 1em;
}

legend {
  font-size: 1.5em;
  font-weight: bold;
}

.formParent {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  margin: .5em;
}

label {
  flex:2;
  padding: .5em;
  margin: .5em;
  background:transparent;
}

input {
  flex:3;
  padding: .5em;
  margin: .5em;
  font-family: 'Didact Gothic', sans-serif;
  font-size: .9em;
  text-align: center;
  background-color: white;
  border: 2px solid black;
}

select {
  flex:2;
  background-color: white;
  border: 2px solid black;
  font-size: .9em;
  text-align: center;
  padding: .5em;
  margin: .5em;
  font-family: 'Didact Gothic', sans-serif;
}

textarea {
  flex:2;
  background-color: white;
  text-align: center;
  margin: .5em;
  border: 2px solid black;
  font-size: 1em;
  text-align: center;
  font-family: 'Didact Gothic', sans-serif;
}

button, input[type='submit'] {
  border: 2px solid black;
  cursor: pointer;
  text-align: center;
  margin: auto;
  width: auto;
}

button:hover, input[type='submit']:hover {
  border: 2px solid black;
}

.smallButt {
  height: 3em;
  line-height: 1.5;
  font-size: .5em;
  margin: .5em;
}

.mediumButt {
  height: 3em;
  line-height: 1.5;
  font-size: .75em;
  margin: .5em;
}

.largeButt {
  height: 3em;
  line-height: 1.5;
  font-size: 1.2em;
  margin: .5em;
}

.buttonDisplay {
  display: flex;
  justify-content: center;
  align-items: center;
}

/*tables and stuff*/
table {
  margin: auto;
  margin-top: 1em;
  margin-bottom: 1em;
  font-size: 1.2em;
  font-family: 'Cinzel', sans-serif;
  font-weight: 600;
  font-size-adjust: auto;
}

th {
  padding: .5em;
  font-weight: bold;
  text-overflow: ellipsis;
  text-decoration: underline;
  font-size-adjust: auto;
  border: 2px solid black;
}

td {
  padding: .5em;
  border: 2px solid black;
}


/*to center font within different elements*/
.center {
  text-align: center;
  margin: 0 auto;
}

.underline {
  border-bottom: 2px solid black;
}
/*color system for targaryen*/
.targaryen {
  background-color: #C9381F;
  color: #090404;
}

.targaryenHover:hover {
  background-color: #661C15;
  color: #A07875;
}

.stark {
  background-color: #3D3131;
  color: #A7A3A4;
}

.starkHover:hover {
  background-color: #767272;
  color:white;

}

.lannister {
  background-color: #A52B1C;
  color:#F3B32F;
}

.lannisterHover:hover{
  background-color: #F3B32F;
  color: #951A14;
}

.tyrell {
  background-color: #364B0E;
  color: #C4A833;
}

.tyrellHover:hover {
  background-color:#A46C04;
  color: #364B0E;
}

.martell {
  background-color: #F95B0C;
  color: black;
}

.martellHover:hover {
  background-color: #FB9E04;
  color:red;
}

.baratheon {
  background-color: #EFB22C;
  color:black;
}

.baratheonHover:hover {
  background-color: #946E23;
  color: #FBEAC7;
}

.greyjoy {
  background-color: #201D1B;
  color: #BDA24A;
}

.greyjoyHover:hover {
  background-color: grey;
  color:black;
}

@media (max-width: 768px) {
.logo {
    display: none;
}

h1 {
  font-size: 2.5em;
  }

h2 {
  font-size: 2em;
  }

h3{
  font-size: 2.25em;
  }

h4 {
  font-size: 2em;
  }

h5 {
  font-size: 1.75em;
  }

h6{
  font-size: 1.5em;
  }
p {
  font-size: 1.1em;
  line-height: 1.25;
}
.container {
  flex-wrap: wrap;
}
.space {
  margin-top: .75em;
}
.col1 {
  min-width: 150px;
}
.formParent {
  flex-wrap: wrap;
  flex-direction: column;
  min-width: 300px;
}
form {
  min-width: 345px;
}
label {
  flex:1;
  padding: .25em;
  margin: 0;
}
.nav .col1 {
  min-width: 50px;
}
table {
  max-width: 80%
  margin: auto;
  margin-top: .5em;
  margin-bottom: .5em;
  font-size: 1em;
  font-size-adjust: auto;
}

th {
  font-weight: bold;
  text-decoration: underline;
  font-size-adjust: auto;
  border: 2px solid black;
}
td {
  border: 2px solid black;
}

}
@media (max-width: 550px) {
  .navItem {
    display: none;
  }
  .hamburger {
    display: flex;
    text-align: center;
  }
  .logo {
    display: none;
  }
}
@media (max-width: 413px) {
  main {
    width: 100%;
    margin: 0 auto;
    margin-top: 2.2em;
    padding: 0;
  }
  .col1 {
    min-width: 100px;
  }
  h1 {
    font-size: 2.25em;
    }

  h2 {
    font-size: 1.75em;
    }

  h3{
    font-size: 2em;
    }

  h4 {
    font-size: 1.75em;
    }

  h5 {
    font-size: 1.5em;
    }

  h6{
    font-size: 1.25em;
    }
  p {
    padding: .5em;
  }
  blockquote {
    max-width: 100%;
  }
  form {
    min-width: 50px;
    max-width: 225px;
  }
  .formParent {
    min-width: 50px;
    max-width: 225px;
  }
  input {
    max-width: 150px;
    min-width: 50px;
  }
  textarea {
    max-width: 175px;
  }
  table {
    width: 100%
    margin-top: .5em;
    margin-bottom: .5em;
    margin-left: 0;
    font-size: .75em;
  }

  th {
    font-weight: bold;
    text-decoration: underline;
    font-size-adjust: auto;
    border: 1px solid black;
  }
  td {
    border: 1px solid black;
  }
}