/* Add the Bahnschrift font family */
 @font-face {
      font-family: 'Bahnschrift'; /* Use Bahnschrift in case somebody has downloaded anything else */
      src: url('fonts/BAHNSCHRIFT.eot') format('embedded-opentype'),
           url('fonts/BAHNSCHRIFT.woff2') format('woff2'),
           url('fonts/BAHNSCHRIFT.woff') format('woff'),
           url('fonts/BAHNSCHRIFT.ttf') format('truetype'),
           url('fonts/BAHNSCHRIFT.svg') format('svg');
  }

/* Base HTML, everything should have this as a base. */
html {
  font-family: "Roboto", Arial, Bahnschrift, Bahnschrift; /* Use Bahnschrift in case somebody has downloaded anything else */
  text-align: center;
}

/* Body */
/* Dark mode is the default here */
body {
  background-color: #0C0C0C;
  color: white;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  font-size: 18px;
  height: 100vh;
}
.content {max-width:1380px; padding: 5px; padding-bottom: 25px;
  border-radius: 15px;}

/* Light mode */
.lightmode {
  background-color: #D6D6D6;
  color: #2A2A2A;
}

/* Links */
a:link {color: #3888FF;}
a:visited {color: #2C6FCC;text-decoration: underline;}
a:hover {color: #D8D8D8;font-weight: bold; transition: 0.25s background-color;}
a:active {color: #3888FF;}
:root {
  color-scheme: dark;
}

/* Buttons */
button {
  background-color:#D6D6D6;
  border: none;
  color: #2A2A2A;
  border-radius: 10px;
  font-weight:bold;
  font-family:"Roboto", Arial, Bahnschrift;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 24px;
  margin: 4px 2px;
  cursor: pointer;
}
button.lightmode {background-color: #2A2A2A; color: #D6D6D6;}

/* I basically copied the switch/slider stuff from W3schools but I'm lazy and it's 2:41 AM and nobody cares anyway */
/* The lines are reduced on purpose just so it doesn't look too ugly, and I'm never gonna touch it again anyway */
/* Switch */
.aheader {text-align: center;}
.switch {
  position: relative;display: inline-block;width: 70px;height: 33px;padding-top:15px;margin-left:3px;
} .switch input {opacity: 0; width: 0; height: 0;}
/* Slider */
.slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;margin:auto;
  bottom: 0;background-color: #D6D6D6;-webkit-transition: .4s; transition: .4s;}
.slider:before {position: absolute; content: "";margin:auto; height: 40px; width: 28px; left: 4px;
  bottom:3px;background-color: #2a2a2a; -webkit-transition: .4s; transition: .4s;}
input:checked + .slider {background-color: #2A2A2A;}
input:focus + .slider {box-shadow: 0 0 1px #2196F3;}
input:checked + .slider:before {-webkit-transform: translateX(34px);
  -ms-transform: translateX(34px);transform: translateX(34px); background-color: #D6D6D6;}
.slider.round {border-radius: 35px;} .slider.round:before {border-radius: 50%;}
/* Tooltips, mostly copied from W3 schools too but I did change the vast majority of this. */
.tooltip {border-bottom: 1px dotted gray;}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: gray;
  color: #D6D6D6;
  text-align: center;
  border-radius: 6px;
  font-family: "Roboto", Arial, Bahnschrift;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.topnav {
  overflow: hidden;
  padding-bottom: 5px;
}

.topnav a {
font-size: 24px;
  float: left;
  display: block;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  color: white;
}

@media screen and (min-width: 650px){
.topnav a:hover {background-color: #3F3F3F;}
.topnav a.topbutton {float: right;}
}

.topnav a:hover {
  color: white;
  font-weight: normal;
  border-radius: 15px;
}

.topnav .icon {
  display: none; background-color: #0C0C0C;
}
@media screen and (max-width: 650px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 650px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
/* Table */
  table {font-family: "Roboto", Arial, Bahnschrift; background-color: #707070; color:#D8D8D8; width: 30%;border-collapse: collapse; text-align: center;border: 1px solid #A0A0A0}
    th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #D8D8D8;
  color: #2A2A2A;
  border: 1px solid #A0A0A0;
}
  table.center {
    margin-left:auto;
    margin-right:auto;
    overflow:scroll;
  }
table.lightmode {background-color:#A0A0A0; color: #2A2A2A; border: 1px solid #A0A0A0}
th.lightmode {background-color:#2A2A2A; color: #D8D8D8; border: 1px solid #A0A0A0}
/* Lists */
ul {list-style-position: inside; margin:0;}
li {list-style-position: inside;margin:0;}

/* Footers & Headers */
header {flex-wrap: wrap;padding-top:2vh}
hr {width: 300px; height:0; background-color:#2A2A2A; color:none; border: 2px solid #D6D6D6}
hr.lightmode {background-color:#D6D6D6; color:none; border: 2px solid #2A2A2A}

/* Padding Calibration (Just to fix the actual body of the page and not heading/footer) */
.padding_calibration {padding:1vh}

/* Bold Text */
.boldtext {font-weight:bold; font-size: 24px;}
.boldertext {font-weight:bold; font-size: 32px;}
.boldesttext {font-weight:bold; font-size: 40px;}

/* Small Text */
.smalltext {font-size: 15px;}
.smallertext {font-size: 12px;}
.smallesttext {font-size: 9px;}

/* Blog stuff */
#rtb {width: 90%}
.rtb-col {background-color: #707070; border-width: 5; border-color: 707070; border-style: solid; padding: 10px; border-radius: 30px}
.post-title {width: 70%; height: auto;}
.author {font-size: 20px;}
.btn-primary {font-size: 18px; font-weight: bold}
#post-container {width: 90%}
a.pager {all: unset;
  background-color:#D8D8D8;
  border: none;
  color: #2A2A2A;
  padding: 10px 21px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  font-family: "Roboto", Arial, Bahnschrift;
  margin: 4px 2px;
  cursor: pointer;
}

/* Objects/Iframes */
iframe {border: none;}
object {height: auto; width: 100%; max-width:1300px; min-width: 230px;}
      @media only screen and (max-device-width: 230px) {object, .table{display:none}}
      @media only screen and (min-device-width: 430px) {object, .table{width:100%}}
      @media only screen and (min-device-width: 530px) {object, .table{width:90%}}
      @media only screen and (min-device-width: 1030px) {object, .table{width:70%}}

/*Pie Chart*/
            .piechart {width: 200px; height: 200px; border-radius: 50%; background-image: conic-gradient( pink 70deg, lightblue 0 235deg,
                    orange 0
                );
            }

/*Inline List*/
ul.list-inline {--n:2;width:100%;list-style-type: none;
  font-size: 60px;
  margin: 0.5%;
  margin-left: -0.5%
  height: 30%;
  padding: 0; text-align:center;
  overflow:hidden;
  background:
    repeating-linear-gradient(to right,
      transparent 0 calc(100% - 1px),grey calc(100% - 1px) 100%)
      0 /calc(100%/var(--n,10)) 100%;
  color: black;
  border-color: #D8D8D8;
  border-style: solid;
  font-weight: 500;
  border-width: 2.5px;
-webkit-text-size-adjust: auto;}
      @media only screen and (max-device-width: 230px) {ul.list-inline{display:none}}
      @media only screen and (min-device-width: 430px) {ul.list-inline{width:95%}}
      @media only screen and (min-device-width: 630px) {ul.list-inline{width:85%}}
      @media only screen and (min-device-width: 830px) {ul.list-inline{width:75%}}
      @media only screen and (min-device-width: 1030px) {ul.list-inline{width:65%}}
      @media only screen and (min-device-width: 1530px) {ul.list-inline{width:50%}}

iframe.graph {width: 1200px;}
      @media only screen and (max-device-width: 1200px) {iframe.graph{width:100%}}

/* select */
.redistricter {width: 100%; max-width: 700px; height: 70vh; background-color: white; border: solid 3px;}
.interactivemaps {width: 100%; max-width: 1000px; height: 70vh; background-color: white; border: solid 3px;}
@media only screen and (min-device-width: 1000px) {.redistricter{width: 75vw}}
.hide {
  display: none;
}
.customselect {margin: 7px; padding: 10px 21px}
select {
  appearance: none;
  background-color: #707070;
  border: solid 16px #707070;
  color: #D8D8D8;
  font-family: inherit;
  margin: inherit;
  font-size: 20px;
  cursor: inherit;
  line-height: inherit;
  text-align: center;
  width: 100%; max-width: 700px;
}

textarea, input {
  appearance: none;
  background-color: #D6D6D6;
  border: solid 0 #D6D6D6;
  color: #2A2A2A;
  font-family: inherit;
  padding: 3px;
  font-size: 20px;
  cursor: inherit;
  line-height: inherit;
  text-align: center;
  width: auto;
}
p {font-family: "Roboto", Arial, Bahnschrift;
position: -webkit-sticky;
position: sticky;
top: 0; width: 100%;
background-color: #2A2A2A;
padding-bottom: 6px;
padding-top: 6px;}
img {width: 100%; max-width: 750px}

/* other */
.table {height: 300px; display: inline-block; margin: auto;}

.flex-wrapper {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: flex-start;
}

.footer { margin-top: auto; padding: 50px; background-color:#3F3F3F; color: black; bottom: 0;}


.footerlink:link, .footerlink:visited {color: white; text-decoration: none; font-weight: normal;}
.footer:hover {color: #D8D8D8;font-weight: bold; transition: 0.25s background-color;}
.footer:active {color: #3888FF;}