styles.css

@charset "UTF-8";

/*Importación de fuentes */
@font-face {
  font-family: 'jedi';
  src: url('src/fonts/Starjedi.ttf');
}

@font-face {
  font-family: 'jedi_white';
  src: url('src/fonts/SF Distant Galaxy Outline.ttf');
}

@font-face {
  font-family: 'regular';
  src: url('src/fonts/Gabriel Serif.ttf'); 
}

/*Configuración por defecto del cuerpo de la página*/
body{
  font-family: 'regular', serif;
  font-size: 20px;
  text-shadow: 1px 1px black;
  background-color: black;
  color: white;
}

/*Configuración por defecto del los titulos*/
h1 {
    font-family: 'jedi_white', monospace;
  font-size: 90px;
  text-shadow: 4px 4px #b52d34;
  text-align: center;
}

/*Configuracion de la caja superior de todas las paginas*/
.logo {
  border-color: #5c605c;
  border-radius: 50px;
  background-position: center;
  background-size: cover;
  margin: auto;
  width: 100%;
  height: 150px;
  text-align: center;
}

/*Estilo del contenedor*/
.content {
  position: relative;
  padding-top: 15px;
  margin: auto;
  width: 860px;
  font-family: 'regular', monospace;
  text-align: center;
  font-size: 20px;
}

/*Contenedor para botones de navegacion*/
.navBox {
  min-width: 200px;
  max-width: 100%;
  margin: auto;
}

/*Configuracion del estilo de los botones*/
.buttons{
  color: #ffffff;
  font-family: 'jedi',monospace;
  font-size: 30px;
  border-style: solid;
  text-shadow: 3px 3px black;  
  font-weight: bold;
  text-align: center;
  background-color: #3fa6ae;
  height: 75px;
  padding:5px 10px 6px 8px;
  border-radius: 50px;
  min-width: 250px;
  transition-duration: 0.4s;
}

/*Configuración del estilo del pie de página*/
.footNote {
  font-family: 'regular', monospace;
  font-size: 10px;
  border-color: white;
  background-image: url(src/img/favicon.png);
  text-align: center;
  text-shadow: 1px 1px #bfbc8d;
  color: white;
  width: 100%;
  height: 50px;
  bottom:0;
  left:0;
}
/*Estilo pantallas grandes*/
@media only screen and (min-width: 720px) {
	.content{
	    margin: auto;
	    width: 720px;
	} 
}
/*Estilo de las pantallas de dispositivos moviles*/
@media only screen and (max-width: 720px) {
	.content, .footNote {
		font-size: 13px;
	}
	.content {
		width: auto;
	}
}