:focus, a:focus {
  outline: 0;
}

html, header, body, footer {
  padding: 0px;
  margin: 0px;
  transition: 0.15s;
  scroll-behavior: smooth;
}

html {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

body {

}

#mainBody {
  transition: 0.5s;
}

#topDiv {}
#midDiv {}
#botDiv {}

html, input, textarea, select, button {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-stretch: normal;
  line-height: initial;
  
  color: #2f4858;
  background-color: white; /* #ece0d1, #292929, #313131, #363636, #181818, #1e1a29 */
}

a {
  color: #2f4858;
  transition: 0.15s;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

input  { cursor: text; }
button { 
  border: none;
  padding: 10px;
  cursor: pointer;
  transition: 0.15s;

  color: white;
  border-radius: 5px;
  background-color: #344e76;
}

button:hover {
  background-color: #43454a;
}

button:active {
  background-color: crimson;
}



/* =========================================================== */
/* Tab Toggle Switch */
/* =========================================================== */

.switch {
  vertical-align: middle;
  position: relative;
  display: inline-block;
  width: 45px;
  height: 24px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  border: solid 1px transparent;
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #4e4e4e;
  -webkit-transition: .14s;
  transition: .14s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .14s;
  transition: .14s;
}

input:checked + .slider {
  background-color: crimson;
}

input:focus + .slider {
  box-shadow: 0 0 1px transparent;
}

input:checked + .slider:before {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  left: 8px;
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}





/* =========================================================== */
/* Scrollbars */
/* =========================================================== */
/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_scrollbar */
/* =========================================================== */
html, body, footer, header {
  scroll-behavior: smooth;
  scrollbar-color: darkgray transparent;
  scrollbar-width: thin;
}

body {
  overflow-y: auto;
  overflow-x: hidden;
}

/* width */
::-webkit-scrollbar {
  width: 5px;
  border-radius: 0.5rem;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: darkgray; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: darkgray; 
  cursor: pointer;
}

/* =========================================================== */
/* Mobile & Tablet Design */
/* =========================================================== */

/* 320px — 480px: Mobile devices */
/* 481px — 768px: iPads, Tablets */
/* 769px — 1024px: Small screens, laptops */
/* 1025px — 1200px: Desktops, large screens */
/* 1201px and more —  Extra large screens, TV */

@media only screen and (max-width: 1050px) {
  footer { margin: 0.5rem; }
}