{
/* width:100%; */
/* height: 100%; */
margin:0;
font-family: 'Roboto Condensed', sans-serif;
/*font-family: 'Quicksand', sans-serif;*/
}
body{
  display: flex;
  width: 100%;
  /* flex-direction: column; */
  background-image:url("/img/head2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  /* text-align: center; */
  
  /*background-color: #cccccc;*/
  text-decoration: none;
}
.container{
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  text-align: center;
}
 /* a {
 color:azure; 
}
a:hover{
  color:beige;
}*/
.mepre{
  
  align-items: center;
  text-align: center;

}
  .imagen{
    display: flex;
  width: 450px;
  flex-wrap:wrap;
  text-align: center;
  align-items: center;
    background-image: url(/img/bicimari.PNG);
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 20px;
    
  }
  .logo{
    background-color: rgb(250, 250, 251);
    width: 200px;
    height: 200px;
    padding: 50px;
    animation-name: anima ;
    transition: 2s;
  }
h1{
  padding: 10px;
color:rgb(57, 57, 59);
font-family: 'Roboto Condensed', sans-serif;

/*font-family: 'Signika Negative', sans-serif;*/
/*font-family: 'kanit';
font-weight: 900;*/
font-size: 4em;
font-weight: 900;
/*font-variant-caps: petite-caps;*/
text-align: center;
transition:2s;
}

h2{
color:rgb(72, 74, 74);
font-family: 'Roboto Condensed', sans-serif;
/*font-family: 'Quicksand', sans-serif;*/
font-weight: 500px;
font-size: 24px;
text-align: center;
}
h3{
  font-family: 'Roboto Condensed', sans-serif;
 /* font-family: 'Quicksand', sans-serif;*/
  font-size: 20px;
  color:rgb(72, 74, 74);
  /* color: rgb(162, 169, 167); */
  text-align: center;
}

p{
  font-family: 'Roboto Condensed', sans-serif;
  color:rgb(72, 74, 74);
 /* font-family: 'Quicksand', sans-serif;*/
  /* color: rgb(162, 169, 167); */
  text-align: center;}
  .anima{
    display: flex;
    /* width: 100%; */
    background-color: rgb(255, 255, 255);
    width: fit-content;
    text-align: center;
    border-radius: 40px;
    animation-duration: 3s;
    animation-name: move;
    animation-iteration-count:2;
    /*margin: auto;
    text-align: center;*/
    animation-direction: alternate;
     z-index: 3;
  }
  
  .move {
    animation-duration: 2s;
    animation-name: move;
    animation-iteration-count: 1;
    /*animation-direction: alternate;*/
  }
  
@keyframes move {
  from {
    position: relaitive;
   animation-duration: 3s;
    left: 150px;
  }
  to {
    left: 0px;
  }
}

.areabutton{
  /*display: flex;*/
  justify-content: center;
  align-items: center;
}

button{
padding: 10px 20px;
background-color:rgba(57, 81, 200, 0.9);

color:rgb(249, 245, 231);
/*font-family: Arial, Helvetica, sans-serif;*/
font-size:1rem;
border-color: beige;
border-radius: 10px;
transition-duration: 0.4s;
}

button:hover {

  background-color:rgba(134, 141, 234, 0.805);
    box-shadow: 0 5px 5px 0 rgba(0,0,0,0.24), 0 10px 20px 0 rgba(0,0,0,0.19);
    gap: 20px;
    font-size: 1.3rem;
  }
      
      @media screen and (min-width: 481px) and (max-width: 894px) {
        .container {
          margin: 1em 2em;
          display: inline;
          padding: 0;
          background-color: rgba(250, 237, 249, 0.707); 
      }
      
        .imagen{
          display: block;
          margin: auto;
          width: 200px;
         height: 350px;
    }
      }
      @media screen and (min-width: 320px) and (max-width: 667px) {
        .container {
          /*margin: 1em 2em;*/
          display:inline;
          flex-direction: row;
          padding: 0;
          background-color: rgba(250, 237, 249, 0.707); 
      }
           .imagen{
          display: block;
          margin: auto;
          width: 250px;
         height: 400px;
    }
}

  footer{
    height: 10vh;
    display: flex;
    background-color: black;
    color: aliceblue;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  /*
  @media screen and (min-width: 481px) and (max-width: 894px) {
    .container {
      margin: 1em 2em;
      display: inline;
      padding: 0;
      background-color: rgba(250, 237, 249, 0.707); 
  }
  
    .imagen{
      display: block;
      margin: auto;
      width: 200px;
     height: 350px;
}
  }*/
  @media screen and (min-width: 320px) and (max-width: 667px) {
    .container {
      /*margin: 1em 2em;*/
      display:inline;
      flex-direction: row;
      padding: 0;
      background-color: rgba(250, 237, 249, 0.707); 
  }
       .imagen{
      display: block;
      margin: auto;
      width: 250px;
     height: 400px;
}
  }