@font-face {
  font-family: 'RailroadGothic'; /* Name you give your font */
  src: url('/font/RailroadGothicCC.ttf') format('truetype'),
     url('/font/RailroadGothicCC.otf') format('opentype');
}

/* Then apply the font to elements on your website */
body {
  font-family: 'Roboto Slab', serif; /* Specify a fallback font family */
  height: 100%;
  color: #333;
}

body::after {
  content: "";
  background: url(/images/skyline2026.webp);
  opacity: 0.3;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: -1;
  background-size: 100%;
}

#banner {
  text-align: center;
  border: 10px solid #338;
  box-shadow: rgba(64, 64, 238, 0.25) 0px 30px 60px -12px inset, rgba(152, 149, 255, 0.3) 0px 18px 36px -18px inset;
  padding: 0em 3em;
  max-width: 30em; margin: auto;
  animation: 1s ease-out 0s 1 slideDownAndGrow;
}
#banner h2 {
  margin: -0.7em 0 -0.3em 0;
}

#meat {
  font-weight: 400;
  clear: all;
  margin-top: 2em;
  max-width: 30em; margin: auto;
  margin-bottom: 4em;
}

.sectionheader {
  font-family: 'RailroadGothic', 'Roboto Slab', serif;
  font-weight: 400;
  color: #008000;
  font-size: 1.5em;
  margin-top: 1em;
  margin-bottom: -0.2em;
}
  

h1, h2, h3, h4 {
	font-family: 'RailroadGothic', 'Roboto Slab', serif;
}

h1 {
  font-size: 3em; margin: 0px auto;
}
h2 {
  font-size: 2.5em; margin: 0px;
}
h3 {
  font-size: 1.4em; margin: 0px;
}
h4 {
  border-top: 3px solid #333;
  font-size: 1.5em;
  margin-bottom: 0;
  margin-top: 0.2em;
  animation: 0.3s ease-out 0s 1 slideDownAndGrow;
}
i {
  color: #0f2603; background: #d8ffe14a;
}
a { color: #291999; }
a:visited { color: #681767; }
a:hover { color: #a00808; background: #fff6; }

.flex {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
#footer {
  position: fixed;
  bottom: 0px;
  width: 100%;
  text-align: center;
  margin-bottom: 0.4em;
}
#footer span {
  border-radius: .5em .5em 0 0;
  border: 0.2em solid #fff5;
  background: #fff7;
  padding: 0.6em 1em 1em 1em;
  width: 100%;
}
#footer span:hover {
  background: #bbbc;
  transition: background 0.5s;
}
#footer img {
  vertical-align: middle;
}
#footer a > img {
  height: 34px;
  width:  34px;
  border: 1px solid #fff0;
  border-radius: 7px;
}
#footer a > img:hover {
  border: 1px solid #fff;
  background: #ccd5fb;
}


.button_squared {
  border: 1px solid #cbe0f2;
  border-radius: 7px;
  background: #aad5fb;
}




/* any animation */
@keyframes slideDownAndGrow {
  0% {
    transform: translateY(-100%) scale(10%);
	border-color: #8270;
	color: #0000;
  }

  100% {
    transform: translateY(0);
  }
}