body, html, header {
  margin: 0;
  padding:0;
}

@keyframes Appear{
	from{opacity:0;}
	to{opacity:100;}
}

.topoheader {
	background-color: #230C33;
	margin:0;
	display: flex;
	width:100%;
}

.titulo {
	font-family: 'Annie Use Your Telescope';
	margin: 15px;
	width:70%;
	padding-left: 50px;
}

.titulo a {
	font-size: 40px;
	text-decoration: none;
	letter-spacing: 5px;
	color: #EBE0FF;
	transition: 0.5s;
	animation-name: Appear;
	animation-duration:2s;
	animation-fill-mode: both;
}

.titulo a:hover{
	letter-spacing: 7px;
	padding-left:10px;
}

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

.menu {
	width:30%;
	padding:5px;
	margin:0;
	display: flex;
}

.menu a {
	color: #EBE0FF;
	font-family: 'Athiti';
	margin: 5px;
	font-size: 18px;
	text-decoration: none;
	width: 50%;
	text-align: center;
	align-content: center;
	justify-content:center;
	letter-spacing:2px;
	transition: 0.5s;
	animation-name: Appear;
	animation-duration:2s;
	animation-delay: 0.2s;
	animation-fill-mode: both;
}

.menu a:hover{
	letter-spacing: 5px;
}

.DemoReel {
	background-color: #EBE0FF;
	display: flex;
	flex-flow: column;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 100px;
	color: #230C33;
}

.DemoReel h1 {
	font-family: 'Annie Use Your Telescope';
	color:#592E83;
	font-size: 70px;
	letter-spacing: 5px;
	animation-name: Appear;
	animation-duration:2s;
	animation-delay:0.4s;
	animation-fill-mode: both;
	
}

.videoframe{
	background-color: gray;
	margin-left: auto;
	margin-right: auto;
	width: 75%;
	animation-name: Appear;
	animation-duration:2s;
	animation-delay:0.5s;
	animation-fill-mode: both;
}

footer {
	background-color: #230C33;
	display: flex;
	width:100%;
}

.footername{
	font-family: 'Annie Use Your Telescope';
	font-size: 50px;
	letter-spacing:5px;
	width:50%;
	align-content: center;
	text-align: center;
	color: #E1D8F7;
}

.footername a{
	color: #E1D8F7;
	text-decoration: none;
	transition: 0.3s;
	
	animation-name: Appear;
	animation-duration:2s;
	animation-fill-mode: both;
}

.footername a:hover{
	letter-spacing:7px;
}

.contact{
	font-family: 'Athiti';
	width:50%;
	padding: 20px;
	color: #E1D8F7;
	letter-spacing: 2px;
	
	animation-name: Appear;
	animation-duration:2s;
	animation-delay: 0.2s;
	animation-fill-mode: both;
}

.email p{
	letter-spacing: 1px;
	font-size: 20px;
}

.socialmedia {
	width:100%;
}

.socialmedia i{
	margin:5px;
	font-size: 20px;
	background: #D7C8F3;
	color: #592E83;
	border-radius:50%;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 12px;
	padding-bottom: 12px;
	transition: 0.3s;
}

.socialmedia i:hover{
	background: #CAA8F5;
	color: #FFFFFF ;
}



@media screen and (min-width: 701px) and (max-width: 992px){

* { margin: 0; padding: 0; }
	
.topoheader {
	background-color: #230C33;
	margin:0;
	display: block;
	text-align: center;
	align-content: center;
	justify-content:center;
}

.titulo {
	width:100%;
	margin:0;
	font-family: 'Annie Use Your Telescope';
	padding-left: 0px;
	text-align: center;
	align-content: center;
	justify-content:center;
	padding-top: 30px;
	padding-bottom: 30px;
}

.titulo a {
	font-size: 40px;
	text-decoration: none;
	letter-spacing: 5px;
	color: #EBE0FF;
	transition: 0.5s;
	animation-name: Appear;
	animation-duration:2s;
	animation-fill-mode: both;
}

.titulo a:hover{
	letter-spacing: 7px;
	padding-left:0px;
}

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

.menu {
	margin:0;
	padding: 0;
	display: flex;
	width:100%;
}

.menu a {
	margin:10px;
	width:50%;
	color: #EBE0FF;
	font-family: 'Athiti';
	font-size: 18px;
	text-decoration: none;
	text-align: center;
	align-content: center;
	justify-content:center;
	letter-spacing:2px;
	transition: 0.5s;
	animation-name: Appear;
	animation-duration:2s;
	animation-delay: 0.2s;
	animation-fill-mode: both;
}

.menu a:hover{
	letter-spacing: 5px;
}

.DemoReel {
	background-color: #EBE0FF;
	display: block;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 100px;
	color: #230C33;
}

.DemoReel h1 {
	padding-bottom: 30px;
	font-family: 'Annie Use Your Telescope';
	color:#592E83;
	font-size: 50px;
	letter-spacing: 5px;
	animation-name: Appear;
	animation-duration:2s;
	animation-delay:0.4s;
	animation-fill-mode: both;
	
}

.videoframe{
	background-color: gray;
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	animation-name: Appear;
	animation-duration:2s;
	animation-delay:0.5s;
	animation-fill-mode: both;
}

footer {
	background-color: #230C33;
	display: block;
	align-content: center;
	text-align: center;
}

.footername{
	width:100%;
	padding-top: 30px;
	font-family: 'Annie Use Your Telescope';
	font-size: 40px;
	letter-spacing:5px;

	align-content: center;
	text-align: center;
	color: #E1D8F7;
}

.footername a{
	color: #E1D8F7;
	text-decoration: none;
	transition: 0.3s;
	
	animation-name: Appear;
	animation-duration:2s;
	animation-fill-mode: both;
}

.footername a:hover{
	letter-spacing:7px;
}

.contact{
	width:100%;
	padding:0;
	padding-top: 30px;
	font-family: 'Athiti';

	color: #E1D8F7;
	letter-spacing: 2px;
	align-content: center;
	text-align: center;
	
	animation-name: Appear;
	animation-duration:2s;
	animation-delay: 0.2s;
	animation-fill-mode: both;
}

.email p{
	letter-spacing: 1px;
	font-size: 20px;
}

.socialmedia {
	width:100%;
	padding-top: 30px;
	padding-bottom: 30px;
}

.socialmedia i{
	margin:5px;
	font-size: 20px;
	background: #D7C8F3;
	color: #592E83;
	border-radius:50%;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 12px;
	padding-bottom: 12px;
	transition: 0.3s;
}

.socialmedia i:hover{
	background: #CAA8F5;
	color: #FFFFFF ;
}
}

@media screen and (max-width: 700px){

* { margin: 0; padding: 0; }
	
.topoheader {
	background-color: #230C33;
	margin:0;
	display: block;
	text-align: center;
	align-content: center;
	justify-content:center;
}

.titulo {
	width:100%;
	margin:0;
	font-family: 'Annie Use Your Telescope';
	padding-left: 0px;
	text-align: center;
	align-content: center;
	justify-content:center;
	padding-top: 30px;
	padding-bottom: 30px;
}

.titulo a {
	font-size: 40px;
	text-decoration: none;
	letter-spacing: 5px;
	color: #EBE0FF;
	transition: 0.5s;
	animation-name: Appear;
	animation-duration:2s;
	animation-fill-mode: both;
}

.titulo a:hover{
	letter-spacing: 7px;
	padding-left:0px;
}

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

.menu {
	margin:0;
	padding: 0;
	display: flex;
	width:100%;
}

.menu a {
	margin:10px;
	width:50%;
	color: #EBE0FF;
	font-family: 'Athiti';
	font-size: 18px;
	text-decoration: none;
	text-align: center;
	align-content: center;
	justify-content:center;
	letter-spacing:2px;
	transition: 0.5s;
	animation-name: Appear;
	animation-duration:2s;
	animation-delay: 0.2s;
	animation-fill-mode: both;
}

.menu a:hover{
	letter-spacing: 5px;
}

.DemoReel {
	background-color: #EBE0FF;
	display: block;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 100px;
	color: #230C33;
}

.DemoReel h1 {
	padding-bottom: 30px;
	font-family: 'Annie Use Your Telescope';
	color:#592E83;
	font-size: 50px;
	letter-spacing: 5px;
	animation-name: Appear;
	animation-duration:2s;
	animation-delay:0.4s;
	animation-fill-mode: both;
	
}

.videoframe{
	background-color: gray;
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	animation-name: Appear;
	animation-duration:2s;
	animation-delay:0.5s;
	animation-fill-mode: both;
}

footer {
	background-color: #230C33;
	display: block;
	align-content: center;
	text-align: center;
}

.footername{
	width:100%;
	padding-top: 30px;
	font-family: 'Annie Use Your Telescope';
	font-size: 40px;
	letter-spacing:5px;

	align-content: center;
	text-align: center;
	color: #E1D8F7;
}

.footername a{
	color: #E1D8F7;
	text-decoration: none;
	transition: 0.3s;
	
	animation-name: Appear;
	animation-duration:2s;
	animation-fill-mode: both;
}

.footername a:hover{
	letter-spacing:7px;
}

.contact{
	width:100%;
	padding:0;
	padding-top: 30px;
	font-family: 'Athiti';

	color: #E1D8F7;
	letter-spacing: 2px;
	align-content: center;
	text-align: center;
	
	animation-name: Appear;
	animation-duration:2s;
	animation-delay: 0.2s;
	animation-fill-mode: both;
}

.email p{
	letter-spacing: 1px;
	font-size: 20px;
}

.socialmedia {
	width:100%;
	padding-top: 30px;
	padding-bottom: 30px;
}

.socialmedia i{
	margin:5px;
	font-size: 20px;
	background: #D7C8F3;
	color: #592E83;
	border-radius:50%;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 12px;
	padding-bottom: 12px;
	transition: 0.3s;
}

.socialmedia i:hover{
	background: #CAA8F5;
	color: #FFFFFF ;
}
}