@font-face {
	font-family:'Junicode Two Beta';
	src:local('Junicode Two Beta'),url('fonts/JunicodeTwoBeta-Regular.ttf');
}

@font-face {
	font-family:'EBH Alternates';
	src:local('EBH Alternates'),url('fonts/EBH-Alternates.otf');
}

body {
	font-family:'Junicode Two Beta', Junicode, serif;
	background-color:#282828;
}

html {
	height: -webkit-fill-available;
}

a:link, a:visited, a:hover, a:active {
	text-decoration:none;
}

#solution ul li:hover {
	background-color: #AB4642;
	color: #F7CA88;
}

@media screen and (orientation:landscape)

{

#nav {
display:block;
position:fixed;
top:0px;
left:0px;
right:7px;
height:3vh;
margin:0;
padding:0;
background-color:#282828;
color:#fff;
z-index:2;
font-size:2.5vh;
}

#nav ul {
display:inline-block;
position:relative;
float:right;
list-style:none;
height:100%;
margin:0 2px;
padding:0;
text-align:center;
background-color:#282828;
}

#nav ul li {
border:1px solid #F7CA88;
color:#282828;
background-color:#DC9656;
display:inline-block;
height:100%;
min-width:2vh;
margin:0;
padding:0;
text-align:center;
}

#solution {
	margin-top:8vh;
	min-height:6vh;
	display: none;
}

#solution ul {
display:inline-block;
position:relative;
list-style:none;
margin:2px;
padding:0;
text-align:center;
}

#solution ul li {
border:1px solid #F7CA88;
color:#282828;
background-color:#DC9656;
display:inline-block;
font-size:4vh;
min-width:2vh;
margin:0 3px;
padding:1px 2px;
text-align:center;
}

a:link li, a:visited li {
	background-color: #DC9656;
	color: #AB4642;
}

a:hover li, a:active li {
	background-color: #AB4642;
	color: #F7CA88;
}

#dropdown {
background-color:#282828;
border:none;
height:3vh;
margin:0;
padding:0;
}

select, option {
height:100%;
font-size:2.5vh;
margin:0;
}

h1 {
	color:#fff;
	font-size:5vh;
	text-align: center;
}

h1 a:link, h1 a:visited {
	color:#fff;
}

h1 a:hover, h1 a:active {
	color:#AB4642;
}

h2 {
	color:#000;
	font-size:3.5vh;
	text-align: center;
	clear:both;
}

#tabular {
	position: static;
	display:block;
	width:calc(64vh + 14px);
	height:calc(64vh + 14px);
	margin-left: auto;
	margin-right: auto;
}

table {
	position:static;
	display:block;
	table-layout:fixed;
	height:100%;
	width:100%;
	background-color: #dc9656;
	border:2px solid #dc9656;
	border-collapse:separate;
	border-spacing:2px;
	margin-left:auto;
	margin-right:auto;
	margin-top: 0;
	margin-bottom:0;
}

table.exeter {
	font-family: "EBH Alternates";
}

tr {
	height:16vh;
	margin:0;
}

td {
	width:calc(16vh - 4px);
	height:calc(16vh - 4px);
	font-size:10vh;
	text-align:center;
	background-color: #a1b56c;
	border:1px solid #A16946;
	color: #000;
}

table.exeter td {
	font-size:8vh;
}

#timercontainer {
	display:block;
	width:calc(48vh + 13px);
	position:absolute;
	top:calc(82vh + 13px);
	left:50%;
	margin-right: -50%;
	transform: translate(-50%, -50%)
}

#timer {
	position: relative;
	display: inline-block;
	top:4px;
	margin-left: auto;
	margin-right: auto;
	width:24vh;
	height:6.7vh;
	border: 2px solid #F7CA88;
	font-size:calc(8vh * 0.6);
	color:#000;
	background-color:#DC9656;
	text-align: center;
}

#solutionbutton {
	position: relative;
	display: inline-block;
	top:4px;
	margin-left: auto;
	margin-right: auto;
	width:24vh;
	height:6.7vh;
	border: 2px solid #F7CA88;
	font-size:calc(8vh * 0.6);
	color:#000;
	background-color:#DC9656;
	text-align: center;
}

td:hover, #nav ul li:hover {
	border: 1px solid #F7CA88;
	background-color: #AB4642;
	color: #F7CA88;
}

#timer:hover, #solutionbutton:hover {
	border: 2px solid #F7CA88;
	background-color: #AB4642;
	color: #F7CA88;
}


#text, #solution {
width=95%;
background-color:#F7CA88;
border: 2px solid #DC9656;
color: #282828;
margin-bottom:6px;
}

#text a:link, #text a:visited, #solution a:link, #solution a:visited {
	color:#AB4642;
}

#text a:hover, #text a:active, #solution a:hover, #solution a:active {
	color:#A1B56C;
}

#text {
	min-height:80vh;
}

.centering {
	text-align:center;
}

#text table {
	position:static;
	display:inline-block;
	height:auto;
	width:auto;
	background-color: #dc9656;
	border:2px solid #dc9656;
	border-collapse:separate;
	border-spacing:2px;
	margin-left:2px;
	margin-right:2px;
	margin-top: 0;
	margin-bottom:0;
}

#text tr {
	height:auto;
	margin:0;
}

#text td {
	width:auto;
	height:auto;
	font-size:24px;
	text-align:center;
	background-color: #a1b56c;
	border:1px solid #A16946;
	color: #000;
}

#text th {
	font-size:30px;
}

p {
font-size: 24px;
text-align:justify;
padding:9px 8px;
clear:both;
}

#solution p {
text-align: center;
}

}

@media screen and (orientation:portrait)

{

#nav {
display:block;
position:fixed;
top:0px;
left:0px;
right:7px;
height:3vh;
margin:0;
padding:0;
background-color:#282828;
color:#fff;
z-index:2;
font-size:2.5vh;
}

#nav ul {
display:inline-block;
position:relative;
float:right;
list-style:none;
height:100%;
min-width:2vh;
margin:0;
padding:0;
text-align:center;
background-color:#282828;
}


#nav ul li {
border:1px solid #F7CA88;
color:#282828;
background-color:#DC9656;
display:inline-block;
height:100%;
min-width:2vh;
margin:0;
padding:0;
text-align:center;
}

a:link li, a:visited li {
	background-color: #DC9656;
	color: #AB4642;
}

a:hover li, a:active li {
	background-color: #AB4642;
	color: #F7CA88;
}

#dropdown {
background-color:#282828;
border:none;
height:3vh;
margin:0;
padding:0;
}

select, option {
height:100%;
font-size:2.5vh;
margin:0;
}

h1 {
	color:#fff;
	font-size:5vw;
	text-align: center;
	margin-top:4vh;
}

h1 a:link, h1 a:visited {
	color:#fff;
}

h1 a:hover, h1 a:active {
	color:#AB4642;
}

h2 {
	color:#000;
	font-size:3.5vw;
	text-align: center;
	clear:both;
}

#tabular {
	position: static;
	display:block;
	width:calc(92vw + 14px);
	height:calc(92vw + 14px);
	margin-left: auto;
	margin-right: auto;
}

table {
	position:static;
	display:block;
	height:100%;
	width:100%;
	background-color: #dc9656;
	border:2px solid #dc9656;
	border-collapse:separate;
	border-spacing:2px;
	margin-left:auto;
	margin-right:auto;
	margin-top: 0;
	margin-bottom:0;
}

table.exeter {
	font-family: "EBH Alternates";
}

tr {
	height:23vw;
	margin:0;
}

td {
	height:calc(23vw - 4px);
	width:calc(23vw - 4px);
	font-size:14.5vw;
	text-align:center;
	background-color: #a1b56c;
	border:1px solid #A16946;
	color: #000;
}

table.exeter td {
	font-size:6.5vh;
}

#timercontainer {
	display:block;
	width:calc(48vw + 13px);
	position:absolute;
	top:116vw;
	left:50%;
	margin-right: -50%;
	transform: translate(-50%, -50%)
}

#timer {
	position: relative;
	display: inline-block;
	top:4px;
	margin-left: auto;
	margin-right: auto;
	width:24vw;
	height:6.7vw;
	border: 2px solid #F7CA88;
	font-size:calc(8vw * 0.63);
	color:#000;
	background-color:#DC9656;
	text-align: center;
}

#solutionbutton {
	position: relative;
	display: inline-block;
	top:4px;
	margin-left: auto;
	margin-right: auto;
	width:24vw;
	height:6.7vw;
	border: 2px solid #F7CA88;
	font-size:calc(8vw * 0.63);
	color:#000;
	background-color:#DC9656;
	text-align: center;
}

td:hover, #timer:hover, #solutionbutton:hover {
	border: 1px solid #F7CA88;
	background-color: #AB4642;
	color: #F7CA88;
}

#text, #solution {
width=95%;
background-color:#F7CA88;
border: 2px solid #DC9656;
color: #282828;
margin-bottom:4px;
}

.centering {
	text-align:center;
}

#text table {
	position:static;
	display:inline-block;
	height:auto;
	width:auto;
	background-color: #dc9656;
	border:2px solid #dc9656;
	border-collapse:separate;
	border-spacing:2px;
	margin-left:2px;
	margin-right:2px;
	margin-top: 0;
	margin-bottom:0;
}

#text tr {
	height:auto;
	margin:0;
}

#text td {
	width:auto;
	height:auto;
	font-size:24px;
	text-align:center;
	background-color: #a1b56c;
	border:1px solid #A16946;
	color: #000;
}

#text th {
	font-size:30px;
}

#solution {
	margin-top:12vw;
	min-height:6vh;
	display: none;
}

#solution ul {
display:inline-block;
position:relative;
list-style:none;
margin:2px;
padding:0;
text-align:center;
}

#solution ul li {
border:1px solid #F7CA88;
color:#282828;
background-color:#DC9656;
display:inline-block;
font-size:4vh;
min-width:2vh;
margin:0 3px;
padding:1px 2px;
text-align:center;
}

p {
font-size:24px;
padding:0 0.25em;
text-align:justify;
padding:9px 4px;
clear:both;
}

#solution p {
text-align: center;
}

}

.tooltip {
  position:relative; /* making the .tooltip span a container for the tooltip text */
  border-bottom:1px dashed #000; /* little indicater to indicate it's hoverable */
}

.tooltip:before {
  content: attr(data-def);
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  left:100%;
  margin-left:15px;
  width:180px;
  padding:10px;
  border-radius:10px;
  background-color: #a1b56c;
  color: #000;
  text-align:center;
  font-size:40%;
  display:none;
}

.tooltip:hover:before {
  display:block;
  z-index:10;
}