@font-face {
    font-family: "OCR-A";
    src: url(https://fnbdecatur.neocities.org/OCR-A.otf);
}

:root {
  --dark: #00292E;
  --light: #FFA100;
}

body {
  background: var(--light);
  color: var(--dark);
  font-family: "OCR-A", Monaco, san-serif;
  text-align: left;
  margin: 50px 400px 50px 400px;
}

#bannerbox {
    text-align: center;
  }

#banner {
  width: 100%;
  max-width: 400px;
  height: auto;
  }

h1 {
  font-size: 22pt;
  font-weight:normal;
  text-transform: uppercase;
  text-align: center;
}
  
p {
  font-size: 16pt;
  margin: 0 0 8pt 0;
}

.caps {
  text-transform: uppercase;
  }
  
#email {
  font-size: 10pt;
  text-align: center;
  }

.toggle-container {
  display: flex;
  padding: 20px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#RSSfeed {
  width: 50px;
  padding: 2px;
  transform: translateY(2px);
}

#sun-icon, #moon-icon {
  width: 50px;
  padding: 2px;
  }

/* Hide moon icon by default (light mode) */
#moon-icon {
    display: none;
}
.dark-mode {
  background: var(--dark);
  filter: invert(59%) sepia(67%) saturate(1128%) hue-rotate(360deg) brightness(102%) contrast(104%);
}
.dark-mode #sun-icon {
    display: none;
}
.dark-mode #moon-icon {
    display: inline-block;
}

/*REMEMBER TO CHANGE THESE FILTERS IF YOU CHANGE THE COLORS!*/

.filter-dark {
  filter: invert(14%) sepia(14%) saturate(3645%) hue-rotate(142deg) brightness(92%) contrast(105%);
}

.filter-light {
  filter: invert(59%) sepia(67%) saturate(1128%) hue-rotate(360deg) brightness(102%) contrast(104%);
}

@media only screen and (max-width: 800px) {
  body {
  margin: 20px;
  }
}