/*Documento CSS  - style-ufologia.css*/
  body{
       background-image:url(/static/img/fundo_ufologia.jpg);/*declarar uma imagem*/
     }
<!--==================================================================================--> 
/* Reset CSS */
*, *:after, *:before{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /*font-size: 0.875em;*/
  line-height: 1.5em;
}

/* Fundo do menu */
.menu{
padding-top: 10px;
/*position: fixed; não declarar, porque ao diminuir a tela o texto fica escondido*/
background: #000;
/*height: 100px; melhor não declarar a altura, porque o fundo preto aumenta a medida que se aumenta o zoom*/
}

/*Remove as bolinhas do lado das listas*/
.menu .menu-list, .menu .sub-menu{
  list-style: none;
}
/* Configura todos os links do nosso menu */
.menu a{
  color: #fff;
  text-decoration: none;
  display: block;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing:0.2em;
}
/* Faz os <li>s ficarem na horizontal */
.menu > .menu-list > li{
 position: relative;
 float: left;
}
/* Configura os links do menu principal */
.menu > .menu-list > li > a {
  padding: 0.5em;
  margin: 0 0.5em;
  background: #000;
}

/*Mostra o submenu no evento de mouse hover*/
.menu > .menu-list > li:hover > .sub-menu {
  display: block;
  padding: 1em;
}
/* Configura o estilo do submenu //////////////////////////////////////////////////*/
.menu > .menu-list > li > .sub-menu {
  position: absolute;
  top: 2em;;/*=====cola o submenu no topo===========================================================*/
  left: 0.2em;
  background-image:url(/static/img/fundo_ufologia.jpg);/*declarar uma imagem*/
  /*background: green; Cor do submenu */ 
  min-width: 6em;
  z-index: 1000;
  display: none;
}
/* Configura os links do submenu */
.menu > .menu-list > li > .sub-menu > li > a {
padding: 0.5em 0.5em;/*espaçamento entre as palavras do submenu e a parte cinza*/ 
}

/* Clearfix para o menu */
.menu:after {
  content: '.';
  display: block;
  visibility: hidden;
  line-height: 0;
  height: 0;
  clear: both;
}

	
h1, h3{
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   color: #B00000; /*vermelho queimado*/ 
   text-align: center;
}


/*Pra dispositivos que tem uma largura mínima de 768 pixels. Tablets, por exemplo.*/
@media screen and (max-width: 720px) {
      #container, .menu, .submenu, #footer{
	  min-width: 240px;
	  width: 240px;
	 /*background-color: aqua;*/
	
  }
}
		
#container{
	position: relative;
	width: 55%;/*largura da div*/
	/*height:600px;/*altura da div*/
	border:1px solid #CCCC33; /*Considerada ultrapassada por alguns, largura, tipo e cor da borda*/
	margin: 0 auto; /*centraliza a página*/
	padding: 1.6em;/*afasta o texto da margem esquerda da div e não do browser*/
	background-color: #FFFFFF; /*cor de fundo*/
	box-shadow: 0.5em 0.5em 0.5em 0.5em #001F3D; /*#8B4513;/*sombra ao redor da div*/
	}

iframe{
display:block;
margin: 0 auto;
width: 50%;
height: 170px;
}

 p{
   text-indent: 3em;
  text-align: justify;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   color: #373737;   
  font-size: 1em;
}

em{
 color: green;
 font-size: 1.25em;
}
	
#footer{
	/*border:1px solid #000; Considerada ultrapassada por alguns, largura, tipo e cor da borda*/
	width: 90%; 
	height:	30%; 
	padding: 1.25em;
	margin-bottom: 0.2em;
	text-align: center;
	/*box-shadow: 4px 8px 1px 10px #181818; /*o primeiro número é da sombra direita, o 2º é da parte debaixo,*/
	}