@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(216,216,216);
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;
}

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(255,255,255);
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 {
width:180px;
}

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(255,255,255);
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;
color:rgb(10,10,10);
border-radius:12px;
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;
}

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;
}





.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;
}









}