@font-face {
  font-family: runic;
  src: url(runic.ttf);
}
@font-face {
  font-family: norse;
  src: url(norse.otf);
}
@font-face {
  font-family: norsebold;
  src: url(norse-bold.otf);
}
@font-face {
  font-family: inter;
  src: url(inter.ttf);
}
@font-face {
  font-family: interitalic;
  src: url(inter-italic.ttf);
}

body {
font-size:1em;
font-family:inter,tahoma, arial, helvetica;
font-weight: normal;
overflow-wrap: break-word;
background-color:rgb(110,110,109);
color:rgb(255,255,255);
min-height:500px;
max-height:99999px;
}

logotext {
font-family:norsebold;
font-size:3em;
position:absolute;
left:11px;
top:0px;
min-height:2px;
max-height:400px;
min-width:2px;
max-width:400px;
z-index:0;
}

logotextcover {
position:absolute;
left:11px;
top:0px;
width:270px;
height:100px;
z-index:1;
}

.radiotable {
text-align:center;
width:100%;
border-collapse: collapse;
box-shadow:0px 10px 10px rgb(180,180,180);
}

.radiotable td, th {
border:2px solid rgb(0,0,0);
}

.radiotable td, th {
padding:10px 4px 10px 4px;
}





.visualbox {
transition:left 2s ease-in-out;
position:absolute;
border:1px solid rgb(0,0,0);
background-color:rgb(190,190,190);
border-radius:5px;
box-shadow: 2px -1px 1px rgb(100,100,100);
text-align:center;
z-index:0;
}

.visualbox:nth-of-type(1) {
width:150px;
height:70px;
left:10px;
top:500px;
}

.visualbox:nth-of-type(2) {
width:150px;
height:70px;
left:-10000px;
top:428px;
}

.visualbox:nth-of-type(3) {
width:150px;
height:70px;
left:-10000px;
top:356px;
}

.visualbox:nth-of-type(4) {
width:150px;
height:70px;
left:-10000px;
top:284px;
}

.visualbox:nth-of-type(5) {
width:150px;
height:70px;
left:-10000px;
top:212px;
}

.visualbox:nth-of-type(6) {
width:150px;
height:70px;
left:-10000px;
top:140px;
}






.laddercontainer {
text-align:center;


}
.square {
display:inline-block;
width:100px;
height:100px;
background-color:green;
}

.square:hover {
background-color:red;
}

.square p {
padding:0px;
}


.popupmenu {
position:fixed;
left:50%;
bottom:-3px;
width:90%;
margin-left:-45%;
min-height:10px;
max-height:500px;
background-color:rgba(100,20,20,0.5);
border-radius:15px 15px 0px 0px;
}

.popupmenu p {
display:inline-block;
padding:15px;
margin:0px;
}

.popupmenu p:hover {
color:orange;
}




container {
position:absolute;
top:90px;
left:10px;
right:10px;
min-height:600px;
max-height:99999px;
border-radius:12px;
padding-top:50px;
padding-bottom:20px;
padding-left:20px;
padding-right:20px;
background-color:rgb(0,0,0);
z-index:50;
}

container img {
display:inline-block;
width:70%;
height:auto;
cursor:pointer;
border-radius:10px;
}

container img:hover {
background-color:rgb(150,150,150);
}

.container .stickyoutput {
border-radius:13px;
border-bottom:1px solid black;
position:sticky;
top:0px;
padding-top:20px;
text-decoration:none;
text-align:center;
font-size:0.8em;
background-color:rgb(216,216,216);
z-index:100;
}

container p {
display:block;
padding-bottom:10px;
padding-left:20px;
}

container a {
color:rgb(1 69 255);
}









container input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size:1.5em;
padding:8px 16px 8px 16px;
border:none;
border-collapse: separate;
border-radius:15px;

width:210px;
}









select {
box-sizing: border-box;
width:180px;
}

label {
word-break:keep-all;
}

container .styledbutton {
background: #ff7300;
background: linear-gradient(360deg,rgba(255, 115, 0, 1) 0%, rgba(255, 255, 255, 1) 100%);
padding:5px;
border-radius:6px;
border:2px solid rgb(0,0,0);
color:rgb(0,0,0);
text-decoration:none;
}

container .styledbutton:hover {
background:none;
background-color:rgb(255, 115, 0);
border:none;
padding:7px;
}

menu {
display:inline-block;
position:absolute;
left:10px;
top:-60px;
border:none;
background-color:rgb(0,0,0);
border-radius:12px;
padding-top:20px;
padding-bottom:20px;
padding-left:0px;
padding-right:0px;
z-index:100;
}

menu p {
display:block;
padding:0px;
margin:0px;
border:none;
}

menu a {
text-decoration:none;
border-radius:12px;
color:rgb(255,255,255);
display:box;
padding:20px;
}

menu a:hover {
background-color:rgb(255 98 0);
}

menu .currentpage {
text-decoration:underline;
}




container #footer {
font-size:0.5em;
display:block;
position:absolute;
left:0px;
right:0px;
bottom:-600px;
text-align:center;
}

h1 {
font-family: 'Courier New', monospace;
background: linear-gradient(135deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
color: transparent;
background-clip: text;
-webkit-background-clip: text;
text-overflow: ellipsis;
}

h2 {
border-left:2px solid rgb(0,0,0);
font-family: 'Courier New', monospace;
margin-left:20px;
}

h4 {
font-family: 'Courier New', monospace;
margin-left:20px;
}

.centered {
font-size:1.5em;
text-align:center;
}



.metercontainer {
display:inline-block;
width:200px;
height:200px;
background-image:url("gaugebackground.svg");
background-size:100% 100%;
}

.meterneedle {
display:inline-block;
width:100%;
height:100%;
background-image:url("gaugeneedle.svg");
background-size:100% 100%;
transition:rotate 5s;
}






code {
font-family: 'Courier New', monospace;
font-size:0.5em;
}

































@media (min-width: 700px) {

container {
position:absolute;
left:50%;
width:600px;
margin-left:-300px;
}
logotext {
position:fixed;
}
logotextcover {
position:fixed;
}


container img {
display:inline-block;
width:40%;
height:auto;
}









}