@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;1,400&display=swap');

*, html,body{
  padding:0px;
  margin:0px;
  box-sizing:border-box;
  font-family:'Poppins', sans-serif;
  perspective:800px;
  text-transform: none;
  text-decoration: none;
  
}
:root{
    --verde: #006b74;
    --limon: #00EBFF;
    --degradado: linear-gradient(90deg, var(--limon), var(--verde) );

}


header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: white;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.1);
  padding: 2rem 9%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
}

header .logo{
  font-size: 1.2rem;
  color: var(--verde)
}

header.logo span{
  color: var(--limon);
}

header .navbar a{
  font-size: 1.1rem;
  margin-left: 1.05rem;
  color: var(--verde);
}

header .navbar a:hover{
  color:var(--limon)
}

header input{
  display: none;
}

header label{
  font-size: 3rem;
  color: var(--verde);
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
}

body{
  width:100%;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background-color: #00EBFF;
}
.timeline{
  margin-top: 100px;  
  width:800px;
  background-color:#072736;
  color:#fff;
  padding:30px 20px;
  box-shadow:0px 0px 10px rgba(0,0,0,.5);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-bottom: 50px;
}
.timeline ul{
  list-style-type:none;
  border-left:2px solid #094a68;
  padding:10px 5px;
}
.timeline ul li{
  padding:20px 20px;
  position:relative;
  cursor:pointer;
  transition:.5s;
}
.timeline ul li span{
  display:inline-block;
  background-color:#1685b8;
  border-radius:25px;
  padding:2px 5px;
  font-size:15px;
  text-align:center;
}
.timeline ul li .content h3{
  color:#34ace0;
  font-size:17px;
  padding-top:5px;
}
.timeline ul li .content p{
  padding:5px 0px 15px 0px;
  font-size:15px;
}
.timeline ul li:before{
  position:absolute;
  content:'';
  width:10px;
  height:10px;
  background-color:#34ace0;
  border-radius:50%;
  left:-11px;
  top:28px;
  transition:.5s;
}
.timeline ul li:hover{
  background-color:#071f2a;
}
.timeline ul li:hover:before{
  background-color:#0F0;
  box-shadow:0px 0px 10px 2px #0F0;
}
@media (max-width:300px){
  .timeline{
    width:100%;
    padding:30px 5px 30px 10px;
  }
  .timeline ul li .content h3{
    color:#34ace0;
    font-size:15px;
  }

}

@media(max-width:1200px){
  html{
      font-size: 55%;
  }

}

@media(max-width:768px){
  header label{
      visibility: visible;
      opacity: 1;
  }
  header .navbar{
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      background: white;
      padding: 1rem 2rem;
      border-top: .1rem solid rgba(0, 0, 0, .2);
      box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
      transform-origin: top;
      transform: scaleY(0);
      opacity: 0;
      transition: .3s linear;

  }

  header .navbar a{
      display: block;
      margin: 2rem 0;
      font-size: 2rem;
  }

  header input:checked ~.navbar{
      transform: scaleY(1);
      opacity: 1;
  }
  header input:checked ~ label::before{
      content: '\f00d';

  }
  .inicio{
      flex-flow: column-reverse;
  }

  .inicio .image img{
      width: 100%;
  }

  .inicio .content h3{
      font-size: 3.6rem;
  }
  .inicio .content p{
      font-size: 1.5rem;
  }
}

@media(max-width:450px){
  html{
      font-size: 49%;

  }
}