@charset "UTF-8";
::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

::-webkit-scrollbar
{width: 10px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
	background-color: #000000;
	border: 2px solid #555555;
}

::-webkit-scrollbar-thumb:hover {
    background: #b30000; 
}

body {
	background-color: grey;
	width: 110%;
	height: 110%;
}
img {
	align-content: center;
	padding: 2%;
image-orientation: from-image;	
}

.button {
	box-sizing:border-box;
	width: 70px;
	height: 70px;
	border-width: 30px 0 px 30px 70px;
}

.Video {
    position: relative;
	padding: 2%;
    min-width: 110%; 
}

.vertical {
  -webkit-transform: rotate(0deg); 
     -moz-transform: rotate(0deg); 
      -ms-transform: rotate(0deg); 
       -o-transform: rotate(0deg); 
          transform: rotate(0deg);
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865482, M12=0.7071067811865466, M21=-0.7071067811865466, M22=0.7071067811865482, SizingMethod='auto expand')";
   filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865482, M12=0.7071067811865466, M21=-0.7071067811865466, M22=0.7071067811865482, SizingMethod='auto expand');
}

#canvas {
	position: relative;
	width: 90%;
	Height: 90%;
	padding-left: 10%;
  	z-index: 1;
 	clear: both;
	overflow-y: scroll;
}

.content {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 20px;
	font-family: 'Apoc-Dark';
	color: lightgray;
	left: 2%;
	font-size: 1em;
	z-index: 100;
}

#menu {
	position: fixed;
	left: -18em;
	top: 50%;
	width: 18em;
	font-size: 1em;
	list-style-type: none;
	background: hsla(0, 0%, 70%, 1);
	margin: 1em 0em 3em 3em;
	padding: 1em 3em 1em 2em;
	z-index:100;
	overflow-y: auto;
	height: 100%;
}

#menu { transition: 2s }

#menu:hover, #menu:active, #menu:focus {
    left: 0;
}

#menu a {
  position: relative;
  left: 0;
}

#menu a { transition: 2s }


#menu {
  margin: 0;
  transform: translate(0, -50%);
}

#menu { margin: -3em 0 0 0 }
@supports (transform: translate(0, -50%)) {
  #menu {
    margin-top: 0;
    transform: translate(0, -50%);
  }
}

a {
	font-family: 'ATOsmose-Medium';
	color: black;
	text-decoration: none;
	
}

a:hover {
	color: white;
}

a.one {
	color: black;
	text-decoration: none;
		font-family: Courier, Monaco, monospace;

}

a.one:hover {
	color: white;
	font-style: italic;
}

.name {
	z-index: 15;
	align-content: center;
    position: fixed;
    top: 4%;
    padding: 0px;
	font-family: 'Apoc-Dark';
	left: 5%;
	font-size: 4em;
	line-height: .9em;
	clear: none;
}

p {
	font-family: Courier, Monaco, monospace;
	color: black;
	font-size: .7em;
	line-spacing:1em;
	
}

.textbox {
	width: 70%;
	height: 100%;
	overflow: none;
	line-height: 3em;
	padding: 2% 2% 2% 2%;
	align: left;
	font-family: Courier, Monaco, monospace;
	color: black;
	font-size: .7em;
	line-spacing:1em;

}

a.links:hover {
	font-style: italic;
	color: grey;
	z-index: 30;
	
}

#myBtn {
	font-family: 'ATOsmose-Medium';
	background: none;
	border: none;
    font-size: 1em;
    padding: 0px;
    color: lightgray;
    cursor: pointer;
}

#myBtn:hover {
    font-style: italic;
	font-color: blue;
}

@font-face {
font-family: "Apoc-Dark";
src: url("Apoc-Dark.eot");
src: 
url("Apoc-Dark.woff") format("woff"),
url("Apoc-Dark.otf") format("opentype"),
url("Apoc-Dark.woff2") format("woff2");
}

@font-face {
font-family: "ATOsmose-Medium";
src: url("ATOsmose-Medium.eot");
src: 
url("ATOsmose-Medium.woff") format("woff"),
url("ATOsmose-Medium.otf") format("opentype"),
url("ATOsmose-Medium.woff2") format("woff2");
}sx


.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.next:hover {
  color: orangered;
}

.text {
  color: white;
font-family: Courier, Monaco, monospace;
	font-size: .7em;
  position: fixed;
  bottom: 15px;
	right: 15px;
  width: 100%;
  text-align: right;
	z-index: 101;

}

.numbertext {
  color: darkblue;
  font-size: 1em;
  padding: 8px 12px;
  position: fixed;
  font-family: 'ATOsmose-Medium';
  top: 3px;
  right: 15px;
  z-index: 101;
}

.active, .dot:hover {
  background-color: #717171;
}

audio {
	padding-left: 30%;
	padding-top: 10%;
}