body, html {
  height: 100%;
  font-family: 'Hero Light Regular';
}

h1, .h1 {
  /* margin-top: 0;
  margin-bottom: 0.5rem; */
  /* font-weight: 350; */
  /* line-height: 1.2;  */
  font-size: calc(1.5rem + 2vw); 
  font-family: 'Hero Light Regular';
  /* font-family: HeroXX;   /*Hero;*/ 
  text-shadow: 2px 3px 2px rgba(28,12,8,0.60);
}

  
.bg {
  height: 100%;
  width: 100%;
  /* Center and scale the image nicely */
  /* background-position: center; */
  background-image: url("/static/assets/back.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 80vh;
}

.box {
  width: 25vw;   /*480px;*/
  padding: 12px;
  background-color: rgba(255, 255, 255, 0.12);
}


h1 {
height: 100px;
line-height: 100px;
text-align: center;
}
p {text-align: center;}
div {text-align: center;}

.topnav {
overflow: hidden;
/* background-color: #333; */
}

.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.topnav a:hover {
/* background-color: #ddd; */
color: black;
}

.topnav a.active {
/* background-color: #04AA6D; */
color: white;
}

.topnav-right {
float: right;
}