body{
	overflow: hidden;
	padding:0px;
	margin:0px;
	font-family:courier;
	color:#e4c9ac;
	background-color:#241b11;
}

.link{
  border: 0px;
}
a:link{
text-decoration:none;
color:white;
}

a:visited {
    text-decoration: none;
color:white;
}

a:hover {
    text-decoration: ;
font-weight: bold;
}

.arrow{
  filter: brightness(25%);
}

@media screen and (orientation:portrait) { 

body {
  background-size: 100vw 70vh;
}
.all{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70%;
}
.frame{
  position: absolute;
  top: 0;
  left: ;
  width: 100%;
  height: 100%;
  content: url('frameP.gif');
}
.interface{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
}
.box{
  float: left;
}
.info{
  width: 50%;
  height: 70%;
  font-size: 4.5vw;
  background-color: #241b11;
  overflow-x: hidden;
  overflow-y: scroll;
  float: left;
}
.arrow{
  height: 50%;
  width: 50%;
  float: left;
}
.arrows{
  width: 50%;
  height: 70%;
  background-color: #241b11;
}
.links{
  width: 100%;
  height: 30%;
  background-color: #241b11;
}
.link{
  width: 49.5%;
  height: 100%;
  float: left;
}
}

@media screen and (orientation:landscape) {

body {
  background-size: 80vw 100vh;
}
.all{
  position: fixed;
  top: %;
  left: %;
  width: 80%;
  height: 100%;
}
.frame{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: url('frame.gif');
}
.interface{
  position: fixed;
  top: 0;
  right: 0;
  width: 20%;
  height: 100%;
  background-color: #241b11;
}
.box{
  float: left;
}
.info{
  right: 4.5%;
  width: 100%;
  height: 70%;
  font-size: 1.3vw;
  background-color: #241b11;
  overflow-x: hidden;
  overflow-y: scroll;
}
.arrows{
  height: 10%;
  width: 100%;
  background-color: #241b11;
  float: left;
}
.arrow{
  width: 25%;
  height: 100%;
  float: left;
}
.links{
  height: 20%;
  width: 100%;
  float: left;
}
.link{
  width: 100%;
  height: 50%;
  float: left;
}
}