body {
    padding: 0;
    margin: 0;
    height:auto;
  }
  
  body {
    font-family: calibri;
    background-image: linear-gradient(to top, #aeaeae, #c2c2c2, #d6d6d6, #eaeaea, #ffffff);
  }

  header {
    display: flex;
    flex-direction: column;
    background-color: #7034;
    height:10vw;
  }
  





@media (min-width: 768px) {
:root::-webkit-scrollbar{
  display: none;
}

::selection{
  color: #000;
  background: #fff;
}

body {
  padding: 0;
  margin: 0;
  height: auto;
}

body {
	font-family: calibri;
  background-color: #000;
  /*background: linear-gradient(0deg, rgba(16,170,255,1) 0%,
   rgba(0,238,255,1) 58%, rgba(0,255,255,1) 87%, rgba(1,254,255,0) 95%);*/
}

/*Header -----*/

header {
	width: 100%;
	background-color: #000;
	clear: both;
	display: inline-flex !important;
	justify-content: space-between;
  background-blend-mode: darken;
  flex-direction: row;
  align-items: center;
}


.navegador { 
	display: flex;
	flex-wrap: wrap;
	align-content: center;
}

.navegador-link {
  list-style: none;
  float: left;
  position: relative;
  margin: 2.5vh;
	text-decoration: none;
  color: #fff !important;
  font-size: 1.8vw;
  font-weight: 500;
  padding: 0.2em 0.8em;
  background: #000;
  transition: all 1s ease;
  position: relative;
}

.navegador-link:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.navegador-link:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}


.logo{
  color: #fff;
}

.logo h1{
  font-family:'Alfa Slab One', cursive;
  font-size: 5.5vw;
  animation-name: appear;
  animation-duration:4s;
  margin-left: 2vw;
}
@keyframes appear {
  0%{transform:translate(-25vw)}
  100%{transform:translate(0px)}
}

/*--------Body ---------*/

main{
  margin:0;
  height:80vw;
  background:#000;
  color: #fff;
}

.presentacion{
  height:100vh;
  width:100vw;
  display: inline-block;
}

.presentacion h2 {
  margin-top: 6%;
  margin-left: 6%;
  font-family: 'Lobster', cursive;
}

.nombre{
  font-size: 4vw;
  animation-name: appearr;
  animation-duration:4s;
}
@keyframes appearr {
  0%{transform:translateY(-25px)}
  100%{transform:translateY(0px)}
}

.profesion{
  font-size: 2.5vw;
}

body {
  min-height: 200vh;
}

#scroll-progress {
  position: fixed;
  top: 0;
  width: 0%;
  height: 4px;
  background: #ffffff;
  z-index: 10000;
}

/* pie de pagina ---*/

footer {
  display: flex;
  margin:0px;
  align-self: flex-end;
  background:#000;
}

.pie_depagina {
  padding:3vw;
  background-color: rgba(0,160,255);
  margin: 0px;
}

.pie-depagina h4{
  
	width: 100%;
	height: minmax(100px, 1fr);
  margin: 0px;
}
}




@media all {

  /* olas*/

.waves {
  position:relative;
  width: 100%;
  height:15vh;
  margin-bottom:-7px;
  min-height:100px;
  max-height:150px;
  
}

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}

@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
  .content {
    height:30vh;
  }
  h1 {
    font-size:24px;
  }
}
}