@font-face {
  font-family: Roboto;
  src: url(fonts/Roboto-Regular.ttf);
}

@media (orientation: portrait) {
	footer {
	margin-left: 4vw;
	margin-top: 4vw;
	font-size: 4vw;
	}
	body {
	 margin: 0;
	 font-size: 6vw;
}
button {
  padding: 2vw 4vw;
  font-size: 4vw;
  margin-bottom: 4vw;
  border-radius: 2vw;
  text-align: center;
  }
  .input_text {
  border-radius: 1vw;
  }
	#diagram {
  position: relative;
  width: 100vw;
  height: 70vw;
}
#text {

	margin-top: 4vw;
	}
.textelement {
	margin-left: 4vw;
}
input {
	font-size: 6vw;
}
select {
	font-size: 6vw;
}
.diagram_part {
	position: absolute;
 
  width: 70vw;
  height: same-as-width;
  margin-left: 15vw;
  margin-right: 15vw;
}
h1 {
text-align: center;
font-size: 8vw;
}
}
@media (orientation: landscape) {
	footer {
	margin-left: 4vh;
	margin-top: 4vh;
	font-size: 4vh;
	}
		body {
	 margin: 0;
	 font-size: 6vh;
}
button {
  padding: 2vh 4vh;
  font-size: 4vh;
  margin-bottom: 4vh;
  border-radius: 2vh;
  text-align: center;
  }
  .input_text {
  border-radius: 1vh;
  }
input {
	font-size: 6vh;
}
select {
	font-size: 6vh;
}
	#diagram {
  position: relative;
  width: 100vh;
  height: 70vh;
}
#text {

	margin-top: 4vh;
	}
.textelement {
	margin-left: 4vh;
}

.diagram_part {
	position: absolute;
 
  width: 70vh;
  height: same-as-width;
  margin: auto;
}
h1 {
text-align: center;
font-size: 8vh;
}
}
body {
	background: #202125;
	 color: #9ba0a6;
	 font-family: Roboto;
}
button {
  background-color: #d93d31;
  border: none;
  color: #ffffff;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  }

.circle {
	fill:none;
	stroke: #e9eaee;
	stroke-width:10;
	stroke-linecap:butt;
	stroke-linejoin:miter;
	stroke-miterlimit:4;
	stroke-dasharray:none;
	stroke-opacity:1
}
.text_circle {
	fill: #e9eaee;
	font-size: 60px;
	font-style: normal;
	font-family: Roboto;
}
.text_satpointer {
	fill: #e9eaee;
	font-size: 60px;
	font-style: normal;
	font-family: Roboto;
}
.pointer {
	fill:none;
	stroke: #d93d31;
	stroke-width:10;
	stroke-linecap:butt;
	stroke-linejoin:miter;
	stroke-miterlimit:4;
	stroke-dasharray:none;
	stroke-opacity:1;
}
.satpointer {
fill:none;
stroke: #e9eaee;
stroke-width:10;
stroke-linecap:butt;
stroke-linejoin:miter;
stroke-miterlimit:4;
stroke-dasharray:none;
stroke-opacity:1;
}
#circle {
  z-index: 200;
}

#pointer {
  z-index: 400;
}
#satpointer {
  z-index: 300;
}
.variable_text {
	color: #e9eaee;
	background-color: inherit;
	border: 0;
}
h1 {
color: #e9eaee;
}
.input_text {
background-color: #303135;
}
a:link {
	 color: inherit;
  background-color: transparent;
  text-decoration: underline;
}

a:visited {
	 color: inherit;
  background-color: transparent;
  text-decoration: underline;
}

a:hover {
  color: #d93d31;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: #d93d31;
  background-color: transparent;
  text-decoration: underline;
}