/*TELA*/ 

.tela {
background-color: #070D12;
height: 500px;
	width: 500px;
	top: 0px;
}

.para1 {
  font-family: 'Garamond', monospace; 
	color: #070D12;
	font-style: bold;
	animation-name: SOS;
	animation-duration: 100s;
	font-size: 26px;
}


@keyframes SOS {
  0%   {color:#070D12;}
  10%  {color:#070D12;}
  12%  {color:#EDF3F8;}
  99%  {color:#EDF3F8;}
}


.para2 {
  font-family: monospace; 
	color: #070D12;
	font-style: bold;
	position: relative;
	top: -350px;
	left: 800px;
	width: 300px;
	text-align: justify;
	animation-name: SINA;
	animation-duration: 100s;
	font-size: 26px;
}

@keyframes SINA {
  0%   {color:#070D12;}
  12%  {color:#070D12;}
  20%  {color:#EDF3F8;}
  99%  {color:#EDF3F8;}
}

.dot {
  height: 25px;
  width: 25px;
  left: 700px;
  top: 200px;
  background-color: #EDF3F8;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  background-color: #EDF3F8;
  animation-name: myAnimation;
  animation-duration: 10s;
}

  

@keyframes myAnimation {
  0%   {background-color:#EDF3F8; left:705px; top:200px;}
  5%   {background-color:#EDF3F8; left:700px; top:200px;}
  10%   {background-color:#EDF3F8; left:705px; top:195px;}
  15%   {background-color:#EDF3F8; left:695px; top:205px;}
  25%  {background-color:#EDF3F8; left:100px; top:200px;}
  50%  {background-color:#EDF3F8; left:200px; top:200px;}
  75%  {background-color:#EDF3F8; left:85px; top:200px;}
  80% {background-color:#EDF3F8; left:700px; top:20px;}
  100% {background-color:#EDF3F8; left:700px; top:200px;}
}

.dot2 {
 height: 25px;
  width: 25px;
  left: 700px;
  top: 300px;
  background-color: #EDF3F8;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  background-color: #EDF3F8;
  animation-name: myAnimation2;
  animation-duration: 10s;
}

@keyframes myAnimation2 {
  0%   {background-color:#EDF3F8; left:700px; top:200px;}
  5%   {background-color:#EDF3F8; left:692px; top:213px;}
  10%   {background-color:#EDF3F8; left:712px; top:186px;}
  15%   {background-color:#EDF3F8; left:685px; top:205px;}
  25%  {background-color:#EDF3F8; left:100px; top:200px;}
  50%  {background-color:#EDF3F8; left:300px; top:500px;}
  75%  {background-color:#EDF3F8; left:550px; top:20px;}
  80% {background-color:#EDF3F8; left:700px; top:20px;}
  100% {background-color:#EDF3F8; left:700px; top:300px;}
}

.dot3 {
 height: 25px;
  width: 25px;
  left: 700px;
  top: 400px;
  background-color: #EDF3F8;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  background-color: #EDF3F8;
  animation-name: myAnimation3;
  animation-duration: 10s;
}

@keyframes myAnimation3 {
  0%   {background-color:#EDF3F8; left:700px; top:200px;}
  5%   {background-color:#EDF3F8; left:720px; top:185px;}
  10%   {background-color:#EDF3F8; left:705px; top:195px;}
  15%   {background-color:#EDF3F8; left:690px; top:225px;}
  25%  {background-color:#EDF3F8; left:100px; top:200px;}
  50%  {background-color:#EDF3F8; left:130px; top:500px;}
  75%  {background-color:#EDF3F8; left:550px; top:20px;}
  80% {background-color:#EDF3F8; left:700px; top:20px;}
  100% {background-color:#EDF3F8; left:700px; top:400px;}
}
 
/*TECAS*/ 

.audioteca {
background-color: #070D12;
}
.para2 {
font-family: 'Garamond', monospace; 
	font-size: 21px;
	box-align: center;
}

.audio {
  width: 850px;
  height: 25px;
  margin-top: 100px;
  margin-bottom: 0px;
  margin-left: 300px;
  position: relative;
  background-color: #EDF3F8;
}

.audio#sidebar {
  width: 300px;
  height: 100px;
  margin-top: 50px;
  margin-bottom: 0px;
  margin-left: 650px;
  position: fixed;
  background-color: #070D12;
  font-family: monospace; 
  font-style: italic;
	font-size: 12px;
	color: #EDF3F8;
}

.biblioteca {
background-color: #070D12;
}
.para3 {
  position: relative;
  background-color: #EDF3F8;
}
.para4 {
  position: relative;
  background-color: #EDF3F8;
}

.videoteca {
  top: 120px;
  left: -270px;
  width: 900px;
  height: 120px;
  margin-top: 200px;
  margin-bottom: 0px;
  margin-left: 200px;
  border-width: 1cm;
  border-color: #EDF3F8;
  position: fixed;
  outline-style: dotted;
}




button, summary {
	cursor: pointer;
}

th, td {
	padding: unset;
}

/* embed */

img, svg, audio {
	display: block;
}

iframe {
	border: unset;
}

body {
	background-color: black;
	user-select: none;
}

#arena {
	margin: 64px;
	position: fixed;
}

#oito {
	position: relative;
	cursor: grab;

	&:active {cursor: grabbing}
}

 #meiaum{
	position: absolute;
	bottom:0%;
	left: 2%;
	top: 10%;
	cursor: grab;

	&:active {cursor: grabbing}
}

 #vintequatro{
	position: absolute;
	bottom:0%;
	left: 4%;
	top: 15%;
	cursor: grab;

	&:active {cursor: grabbing}
}

#cincotres{
	position: absolute;
	bottom:0%;
	left: 6%;
	top: 20%;
	cursor: grab;

	&:active {cursor: grabbing}
}

#umnovetres {
	position: absolute;
	bottom:0%;
	left: 400px;
	top: 5%;
	cursor: grab;

	&:active {cursor: grabbing}
}

 #doisumdois {
	position: absolute;
	bottom:0%;
	left: 410px;
	top: 10%;
	cursor: grab;

	&:active {cursor: grabbing}
}

 #quatroumseis{
	position: absolute;
	bottom:0%;
	left: 420px;
	top: 15%;
	cursor: grab;

	&:active {cursor: grabbing}
}

#quinze{
	position: absolute;
	bottom:0%;
	left: 0px;
	top: 300px;
	cursor: grab;

	&:active {cursor: grabbing}
}

#dezesseis{
	position: absolute;
	bottom:0%;
	left: 20px;
	top: 320px;
	cursor: grab;

	&:active {cursor: grabbing}
}


@keyframes action {
  0% {width: 20px; height: 30px}
  100% {width: 100px; height: 100px;}
}




/*CONTEUDO*/ 


.container {
  width: 400px;
  height: 120px;
  margin-top: 720px;
  margin-bottom: 0px;
  margin-left: 290px;
  position: relative;
  background-color: none;
  opacity: 1;
}
  
.a {
  font-family: 'Garamond', monospace;
  font-size: 22px;
  opacity: 0.7;
  font-weight: bold;
  letter-spacing: 0.05cm;
}
  
.a:link {text-decoration: none; color: #EDF3F8}

.a:visited {text-decoration: none; color: #EDF3F8}

.a:hover {text-decoration: none; opacity: 1.5; color: white}
  
.a:active {text-decoration: none; color: #EDF3F8}
  
  
.box {
  width: 220px;
  height: 30px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 290px;
  border: none;
  font-family: monospace;
  font-style: italic;
  font-size: 16px;
  text-align: center;
}

.box#pic {
  width: 520px;
  height: 420px;
  top: 295px;
  left: -70px;
  background-size: 500px;
  position: fixed;
}

.box#tit {
  top: 170px;
  left: 570px;
  width: 375px;
  height: 220px;
  background-color: #EDF3F8;
  position: fixed;
}

.box#tit2 {
  top: 0px;
  bottom: 100px;
  left: 570px;
  width: 375px;
  height: 120px;
  background-color: #EDF3F8;
  position: fixed;
}

.box#ret {
  top: 120px;
  left: 570px;
  width: 370px;
  height: 420px;
  border-width: 1cm;
  border-color: #EDF3F8;
  position: fixed;
  outline-style: dotted;
}

.box#ret2 {
  top: 120px;
  left: -270px;
  width: 250px;
  height: 420px;
  border-width: 1cm;
  border-color: #EDF3F8;
  position: fixed;
  outline-style: dotted;
}

.box#prosa {
  top: 320px;
  left: -40px;
  width: 250px;
  height: 40px;
  border-width: 1cm;
  border-color: #EDF3F8;
  position: fixed;
}

.box#poesia {
  top: 320px;
  left: 570px;
  width: 250px;
  height: 40px;
  border-width: 1cm;
  border-color: #EDF3F8;
  position: fixed;
}

.box#a {
  top: -550px;
  left: 350px;
  position: relative;
}

.box#b {
  top: -540px;
  left: 350px;
  position: relative;
}

.box#c {
  top: -530px;
  left: 350px;
  position: relative;
}

.box#d {
  top: -520px;
  left: 350px;
  position: relative;
}

.box#e {
  top: -510px;
  left: 350px;
  position: relative;
}