@font-face {
  font-family: "kells";
  src: url("font/kells.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "viking";
  src: url("font/viking.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.header {
  font-color: white;
  text-align: center;
  font-family: "viking", sans-serif;  
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
}

.content {
  text-align: center;;
}

.page {
  display: inline-block;
  height: 90%;
}

.flex {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.box {
  font-family: "kells", sans-serif;
  align-self: center;
}

.nav {
  display: block;
}

.button {
	display: inline-block;
	margin: 5pt;
	cursor: pointer;
}

.btnbox {
	display: inline-block;
	border: 1px solid black;
	border-radius: 2px;
	padding: 5px 10px 5px 10px;
	margin: 0px 10px 0px 10px;
}

.disabled {
	color: #0005;	
}

.high {
	font-weight: bold;
}

@media (orientation: portrait) {
  .header {
    font-size: clamp(18px, 6.0vw, 120px);
    margin-top: 30%;
  }

  .content {
    height: 44%;
    font-size: clamp(17px, 4.0vw, 120px);
  	margin-top: 5pt;  	
  }

  .nav {
  	margin-top: 5%;  	
  }

  .box {
  	  max-width: 85%;
  }  
}

p {
	margin: 0px;
}

@media (orientation: landscape) {
  .header {
    font-size: clamp(15px, 2.2vw, 120px);
    margin-top: 17%;
  }

  .content {
    height: 40%;
    font-size: clamp(20px, 1.2vw, 90px);
  	margin-top: 5pt;  	
  }

  .nav {

  }

  .box {
  	  max-width: 100%;
  }  
}

.content span {
}