@import url('https://fonts.googleapis.com/css?family=Cinzel&display=swap');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin:0;padding:0;border:0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
  box-sizing:border-box;
}
body {line-height: 1;}

/* Mi codigo */
body{
  width:100vw;
  height:100vh;
  background-image: url("bg-principal.jpg");
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  font-family: 'Cinzel', serif;
}

nav,section{
  padding:12px;
}

/* Codigo nav */
nav{
  background-color:rgba(80,80,80,0.1);
}
ul{list-style-type:none;text-align:center;}
li{display:inline-block}
a{
  display:inline-block;
  padding:12px;
  color:white;
  font-size:1em;
  font-weight:bold;
  letter-spacing:1px;
  text-decoration:none;
  border-bottom:3px solid transparent;
}
a:hover{
  border-bottom:3px solid #888888;
}

/* Codigo principal */
section{
  position:relative;
  top:30%;
  text-align:center;
  color:white;
  animation-name:bouncing;
  animation-duration:2s;
}
h1{font-size:3em;}
p{font-size:1.2em;}

@keyframes bouncing{
  from{top:-100%;}
}