body {
  background-color: #dedede;
  margin: 0
}

::selection {
  background-color: #239edb;
  color: #1c1c1c;
}

.wrapper {
 overflow-x: hidden;
 width: 100%
}

a {
  color: #239edb
}

a:hover {
  background-color: #239edb;
  color: #1c1c1c;
  text-decoration: none
}

@font-face {
  font-family: bodytext; /* set name */
  src: url(fonts/MPLUSRounded1c-Regular.ttf); /* url of the font */
}

@font-face {
  font-family: bodytext;
  src: url(fonts/MPLUSRounded1c-Bold.ttf);
  font-weight: bold;
}

@font-face {
  font-family: bodytext;
  src: url(fonts/MPLUSRounded1c-Black.ttf);
  font-weight: 800;
}

@font-face {
 font-family: headers;
 src: url(fonts/FjallaOne-Regular.ttf);
}

/* row right */

.sidebar {
width: 25%;
position: fixed;
top:0;
left: 0;
color: #1c1c1c;
display: inline-block;
height: 100%;
padding: 1.5em 0;
background: #c9c9c9;
border-right: solid 5px #1c1c1c
}

.navhead {
  color: #1c1c1c;
  font-size: 30px;
  font-weight: 800;
  margin: 0 .3em;
  font-family: headers, monospace
}

.navdiv {
  height: 5px;
  background: #a8a8a8
}

.sidebar ul {
  font-size: 25px;
  list-style: none;
  font-family: bodytext, monospace
}

.sidebar a {
  text-decoration: underline;
  color: #1c1c1c
}

.sidebar a:hover {
  color: #1c1c1c;
  text-decoration: none
}

.sidebar li {
  margin: .7em 0
}

.sidebar li:before {
  content: "→";
  padding-right: 5px;
}

.timer {
  font-family: bodytext, monospace;
  text-align: center; 
  font-size: 20px; 
  margin: 0;
}

/* row row row your boat to the left */

.content {
  margin-left: 25%;
  color: #1c1c1c;
  padding: 1em 0;
}

.heading {
  font-weight: bold;
  font-size: 35px;
  padding: 0 .5em;
  font-family: headers, monospace
}

.divider{
  height: 7px;
  background: #1c1c1c;
  margin-bottom: .5em;
}

.text {
  padding: 0 1em;
  font-size: 18px;
  text-indent: 2em;
  text-align: justify;
  font-family: bodytext, monospace
}

/* box stuff */

.boxes {
  padding: 0 1em;
}

.row {
 display: flex;
 flex-direction: row;
 padding: .5em
}

.box {
  flex: 1 1 33%;
  max-width: 100%;
  background: #c9c9c9;
  padding: .2em;
  margin: 0 .5em .2em;
  text-align: center
}

.boxhead {
  font-size: 25px; 
  font-weight: 800;
  width: 100%;
  text-transform: capitalize;
  font-family: headers, monospace
}

.box-committee-head {
  font-size: 25px; 
  font-weight: 800;
  width: 100%;
  margin-top: .2em;
  font-family: headers, monospace
}

.box-subhead {
  font-size: 20px; 
  font-weight: 800;
  width: 100%;
  opacity: 0.7;
  font-family: headers, monospace
}

.boximg {
  height: 150px;
  margin: .5em .2em;
  image-rendering: pixelated;
  background-image: url("images/placehold.png");
  background-size: cover;
  background-position: center;
}

.boxtext {
  font-size: 16px;
  margin-bottom: .5em;
  font-family: bodytext, monospace
}

.boxtext-committee {
  font-size: 14px;
  margin-bottom: .5em;
  font-family: bodytext, monospace
}

.contact {
  justify-content: center;
  width: 100%;
  display: flex;
  padding: 1em;
}

table {
  width: 75%;
}

table img {
  width:100px;
}

table a:hover {
  background: none;
  filter: brightness(0) saturate(100%) invert(57%) sepia(82%) saturate(1619%) hue-rotate(169deg) brightness(88%) contrast(96%);
}

td, th {
  margin: 2px;
  border: 1px solid #1c1c1c;
  background: #c9c9c9
}

td {
  padding: 1em;
  font-family: bodytext, monospace
}

/* javascript */

#demo {
 text-align: center;
 font-size: 30px;
 margin: .5em 0 0;
 font-weight: 800; 
 font-family: headers, monospace
}

#wobble {
  font-family: headers, monospace
}

/* media */

@media only screen and (max-width: 790px){
  .sidebar {
    display: none
  }
  
  .content {
    margin-left: 0;
  }
  
  .row {
 flex-direction: column;
}

table {
 width: 100% 
}

.contact {
 padding: 0 
}

.topnav {
  display: flex;
  flex-direction: column;
}
}

@media only screen and (min-width: 791px){
  .topnav {
  display: none
}

#myLinks a {
  display: none;
}
}

/* mobile menu */

.topnav img {
  width: 35px;
  display: block
}

.topnav .icon:hover {
  background: none;
  filter: brightness(0) saturate(100%) invert(57%) sepia(82%) saturate(1619%) hue-rotate(169deg) brightness(88%) contrast(96%);
}

.topnav {
  background: #c9c9c9;
}


.topnav-row {
 display: flex;
 flex-direction: row;
 width: 100%;
 padding: 5px
}

.topnav.icon {
    flex: 0 0 auto;
    max-width: 100%;
    width: auto;
    text-align: right;
}

.jolly {
  margin: 0 .8em
  }

.topnav-navhead {
      flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    color: #1c1c1c;
  font-size: 30px;
  font-weight: 800;
  margin: 0 .3em;
  font-family: headers, monospace
}

.topnav #myLinks {
 display: none 
}

#myLinks a {
  display: block;
  padding: 10px;
  font-family: bodytext, monospace;
  font-size: 25px;
  color: #1c1c1c;
  text-decoration: none
}