/*
 * Name: Bit Bits
 * Author: xandra
 * Website: https://xandra.cc
*/

@font-face {
font-family: 'silkscreen';
src: url('//32bit.cafe/~xandra/silkscreen.ttf')  format('truetype');
}

body {
background-color: #E1CCDD;
}

.header {
padding: 0px !important;
text-align: center;
width: 100%;
}

.header a {
/* entire header width */
font-family: 'silkscreen';
text-decoration: none;
color: #FFF;
background-color: none;
padding: 0px !important;
text-shadow: -4px 4px #ef3550,
             -6px 6px #f48fb1,
             -8px 8px #7e57c2,
             -10px 10px #2196f3,
             -12px 12px #26c6da,
             -14px 14px #43a047;
}

.topnav {
/* main nav width */
font-family: 'silkscreen', cursive;
}

.topnav a {
/* individual navigation item */
background-color: #FFF !important;
border: 2px solid #000 !important;
border-radius: 0 !important;
font-size: 10pt !important;
padding: 10px !important;
color: #1A659E;
box-shadow: 5px 8px #000;
height: 5vh;
}

.topnav a:hover {
/* individual navigation item on hover */
background-color: #FFFAEB !important;
}

.sidebar {
/* secondary navigation */
font-family: 'silkscreen', cursive;
background-color: #FFF;
color: #E69CAF;
text-align: center;
}

.sidebar h3 {
font-size: 1rem;
text-align: center;
color: #000;
text-shadow: -4px 4px #ef3550,
             -6px 6px #f48fb1,
             -8px 8px #7e57c2,
             -10px 10px #2196f3,
             -12px 12px #26c6da,
             -14px 14px #43a047;
margin-top: 10px !important;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 20px !important;
}
.sidebar a {
color: #43AA8B;
text-decoration: none;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-bottom: 2px dotted;
padding: 2px !important;
}
.sidebar a:hover {
color: #000;
border: 0px;
}

.sidebar active {
color: #000;
border: 0px;
}

.sidebar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.sidebar li {
  display: block;
  padding: 5px;
}

.main {
 font-family: Verdana, sans serif;
 font-size: 11pt;
 letter-spacing: 0.8px;
 background-color: #FFF;
 line-height: 18pt;
}

.main a {
font-family: 'silkscreen', cursive;
font-weight: normal;
font-smooth: never;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: greyscale;
text-decoration: none;
color: #FFF;
font-size: 10pt;
background-color: #1A659E;
padding: 1px 5px 3px 5px;
}

.main a:hover {
color: #000;
background-color: #FFFAEB;
}

table {
overflow-x: auto !important;
}

.main h2 {
  font-family: 'silkscreen', cursive;
  color: #43AA8B;
  font-weight: normal;
  font-smooth: never;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: greyscale;
}

.main h3 {
  font-family: 'silkscreen', cursive;
  color: #1A659E;
  font-weight: normal;
  font-smooth: never;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: greyscale;
}

section {
background-color: #FFF;
margin: 20px;
padding: 20px;
border: 2px solid #713E5A;
box-shadow: 5px 5px #713E5A;
}

.row {  
  display: flex;
  flex-wrap: wrap;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

 .column.gallery a {
  background-color: transparent !important;
}

.footer {
  font-family: 'silkscreen', cursive;
  background-color: #FFF;
  text-align: center;
  padding: 10px;
  font-weight: normal;
  color: #764A62;
  font-weight: normal;
  font-smooth: never;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: greyscale;
}

.footer a {
color: #1A659E;
text-decoration: none;
border-right: 0px;
border-left: 0px;
border-top: 0px;
border-bottom: 2px dotted;
}

input, select {
  color: #000;
  font-family: 'silkscreen', cursive;
  font-size: 0.8rem;
  font-weight: normal;
  font-smooth: never;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: greyscale;
  border: 0;
  padding: 5px;
  border: 1px solid #000;
}

.footer a:hover {
color: #764A62;
border-bottom: 0px;
}

.footer-text {
  font-size: 8.5pt;
}

@media screen and (max-width: 699px) {
/* mobile */
  .container {
  width: 100%;
  }
  .column.sidebar, .column.main {
  width: 100%;
  }
  .header {
  width: 100vw !important;
  padding-bottom: 20px !important;
  }
  .header h1 {
  float: left;
  margin: 5px 10px 5px 10px;
  }
  .header button {
  background-color: #FFF;
  border: 2px solid black;
  color: #000;
  font-size: 16pt;
  float: right;
  }
  .topnav {
  width: 100vw;
  flex-direction: column;
  margin: 10px;
  padding: 5px;
  padding-bottom: 20px;
  text-align: center;
  line-height: 9pt;
  }
  .topnav a {
  display: block;
  padding: 5px;
  text-decoration: none;
  margin: 6px;
  font-size: 12pt !important;
  }
  .main {
  width: 100vw;
}
  .footer {
  width: 100vw;
 }
  .gallery {
  width: 100vw !important;
  margin: 2px !important;
}
}
@media screen and (min-width: 700px) and (max-width: 950px) {
/* tablets */
  .container {
  padding: 5px;
  }
  .column.sidebar, .column.main {
    width: 100vw;
  }
  .header, .topnav {
    width: 100vw;
    text-align: center;
  }
  .header {
  width: 100vw;
  vertical-align: middle;
  }
  .header h1 {
  float: left;
  margin: 5px 10px 5px 10px;
  padding-bottom: 10px;
  }
  .header button {
  background-color: #FFF;
  border: 2px solid black;
  color: #000;
  font-size: 16pt;
  float: right;
  }
  .column.main {
  width: 100%;
  }
  .topnav {
  flex-direction: column;
  padding: 5px;
  }
  .topnav a {
  display: block;
  padding: 5px;
  text-decoration: none;
  margin-bottom: 15px;
  font-size: 16pt !important;
  }
  .header button {
  float: right;
 }
  .column.gallery {
  width: 100vw !important;
  margin: 2px !important;
}
  .sidebar h3 {
  font-size: 16pt !important;
}
  .sidebar li {
  font-size: 14pt !important;
}
}
@media screen and (min-width: 950px) {
/* desktops */
  .container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70vw;
 }
.column.sidebar { 
  width: 20vw !important;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 10px !important;
  margin-bottom: 0px !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
  max-height: 65vh;
}
.column.main {
  margin-top: 10px !important;
  margin-bottom: 0px !important;
  margin-left: 0p !important;
  margin-right: 0px !important;
  width: 50vw !important;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 65vh;
}
  .header {
  width: 13vw !important;
  height: 10vh;
 }
  .header h1 {
  font-size: 1.5vw;
 }
  .column.gallery {
  width: 30% !important;
}
  .topnav {
  overflow-x: auto;
  overflow-y: hidden;
 }
  .topnav a {
  position: relative;
  top: 3vh;
  border: 2px solid #000;
  border-radius: 20px;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  margin: 5px;
  background-color: #F1F1F1;
  font-size: 0.8vw !important;
 }
  .mobile-only {
  display: none;
  }
  .footer {
  width: 79vw;
  border: 0px; !important;
 }
}