/* ------------------------------------------------------
------------------vista movil-------------------------
------------------------------------------------------ */
@media screen and (min-width: 320px) {
  * {
    font-family: "Roboto", sans-serif;
    margin: 0;
  }

  .containerWelcome {
    color: white;
    /* width: 375px; */
    height: 965px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url("imagenes/fondopatas.png");
    background-size: cover;
  }

  #logoWelcome {
    margin-bottom: 25px;
  }

  .btn1 {
    border: 2px solid black;
    color: white;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 25px;
    margin-top: 25px;
    box-shadow: 8px 10px 10px 1px rgba(0, 0, 0, 0.5);
  }

  .login {
    border-color: #ffffff;
    background: transparent;
  }

  .login:hover {
    background-color: #ffffff;
    color: rgba(246, 91, 85, 1);
  }

  .btn2 {
    color: rgba(246, 91, 85, 1);
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 25px;
    margin-top: 18px;
    box-shadow: 8px 10px 10px 1px rgba(0, 0, 0, 0.5);
  }

  .register {
    border-color: #ffffff;
    background: white;
  }

  .register:hover {
    background-color: rgba(254, 186, 129, 1);
    color: white;
  }

  /*vista REGISTER */

  .containerRegister {
    background-color: #febd81;
    color: #c16b55;
    /* width: 375px;*/
    height: 965px;
  }

  .formRegister {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #logoRegister {
    margin-bottom: 25px;
    margin-top: 100px;
    width: 130px;
  }

  .labelRegisterMe {
    margin-bottom: 5px;
  }

  .inputRegisterMe {
    border: none;
    background-color: white;
    border-radius: 25px;
    width: 258px;
    height: 33px;
    left: 31px;
    margin-bottom: 25px;
    padding: 5px;
    justify-content: center;
    box-shadow: 8px 10px 10px 1px rgba(0, 0, 0, 0.5);
  }

  .mensajeError {
    margin-bottom: 20px;
  }

  .txtGoogle {
    margin-bottom: 20px;
    color: white;
  }

  .buttonRegisterMe {
    border-radius: 25px;
    width: 182px;
    height: 30px;
    left: 70px;
    top: 410px;
    border: none;
    background-color: white;
    color: #c16b55;
    margin-bottom: 25px;
    box-shadow: 8px 10px 10px 1px rgba(0, 0, 0, 0.5);
  }

  .buttonRegisterMe:hover {
    background-color: rgb(246, 91, 85);
    color: white;
  }

  .buttonRegisterGoogle {
    border-radius: 25px;
    width: 182px;
    height: 30px;
    left: 70px;
    top: 410px;
    border: none;
    background-color: white;
    color: #c16b55;
    margin-bottom: 25px;
    box-shadow: 8px 10px 10px 1px rgba(0, 0, 0, 0.5);
  }

  .buttonRegisterGoogle:hover {
    background-color: rgb(50, 27, 251);
    color: white;
  }

  /* VISTA LOG IN */

  .containerLogin {
    background-color: rgba(246, 91, 85, 1);
    color: #fed1a7;
    /* width: 375px;*/
    height: 965px;
  }

  .formlogin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #logoLogin {
    margin-bottom: 40px;
    margin-top: 200px;
    width: 130px;
  }

  .labelLoginMe {
    margin-bottom: 5px;
  }

  .inputLoginMe {
    border: none;
    background-color: white;
    border-radius: 25px;
    width: 258px;
    height: 33px;
    left: 31px;
    margin-bottom: 25px;
    box-shadow: 8px 10px 10px 1px rgba(0, 0, 0, 0.5);
  }

  .buttonLoginMe {
    border-radius: 25px;
    width: 182px;
    height: 30px;
    left: 70px;
    top: 410px;
    border: none;
    background-color: white;
    color: #c16b55;
    margin-bottom: 25px;
    box-shadow: 8px 10px 10px 1px rgba(0, 0, 0, 0.5);
  }

  .buttonLoginMe:hover {
    background-color: rgba(254, 189, 129);
    color: white;
  }

  .buttonLoginGoogle {
    border-radius: 25px;
    width: 182px;
    height: 30px;
    left: 70px;
    top: 410px;
    border: none;
    background-color: white;
    color: #c16b55;
    margin-bottom: 25px;
    box-shadow: 8px 10px 10px 1px rgba(0, 0, 0, 0.5);
  }

  .buttonLoginGoogle:hover {
    background-color: rgb(50, 27, 251);
    color: white;
  }
  /*VISTA MURO*/
  /*VISTA MURO*/
  .encabezadoMuro {
    background-color: rgb(246, 91, 85);
    box-shadow: 8px 10px 10px 1px rgba(0, 0, 0, 0.5);
  }
  #logoMuro {
    margin-top: 15px;
    margin-left: 15px;
    margin-bottom: 15px;
    width: 130px;
    /* height: 60px; */
  }

  .categoryFood,
  .categoryclean,
  .categoryVet,
  .categoryGo,
  .categoryPlay,
  .categoryAcc {
    width: 100px;
    height: 45px;
    margin: 8px;
    margin-top: 10px;
    background-color: rgba(254, 189, 129);
    color: #c16b55;
    border: none;
    border-radius: 15px;
    font-size: 13px;
    box-shadow: 8px 10px 10px 1px rgba(0, 0, 0, 0.5);
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.1s;
  }

  .categoryFood:hover {
    transform: scale(1.2);
  }
  .categoryclean:hover {
    transform: scale(1.2);
  }
  .categoryVet:hover {
    transform: scale(1.2);
  }
  .categoryGo:hover {
    transform: scale(1.2);
  }
  .categoryPlay:hover {
    transform: scale(1.2);
  }
  .categoryAcc:hover {
    transform: scale(1.2);
  }
  .logOut {
    background-color: rgba(254, 189, 129);
    color: #ffffff;
    float: right;
    cursor: pointer;
    margin-top: 15px;
    margin-right: 20px;
    font-size: 13px;
    width: 35px;
    height: 35px;
    border-radius: 30px;
    border: none;
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.5);
  }
  .logOut:hover {
    background-color: rgb(246, 91, 85);
    color: #ffffff;
    border: 2px solid rgba(254, 189, 129);
  }
  .containerPost {
    background-color: rgb(221, 221, 221);
    height: 700px;
    padding-left: 50px;
    padding-right: 50px;
    margin-top: 20px;
    overflow: scroll;
  }
  .containerForm {
    position: fixed;
    margin-left: 51px;
    margin-top: 50px;
  }
  .containerTask {
    margin-top: 250px;
  }
  .task-form {
    background-color: white;
    width: 230px;
    height: 153px;
    margin-right: 40%;
    color: #4f5252;
    border: none;
    border-radius: 15px;
    font-size: 15px;
    padding: 20px;
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.5);
  }
  .taskTittle {
    width: 130px;
    border-radius: 15px;
    border: 2px solid rgba(254, 189, 129);
    margin-bottom: 10px;
  }
  #menu {
    float: right;
    margin-right: 5px;
    margin-top: 4px;
    border: none;
  }
  .taskDescription {
    width: 220px;
    height: 50px;
    margin-top: 5px;
    margin-bottom: 10px;
    border-radius: 15px;
    border: 2px solid rgba(254, 189, 129);
    resize: none;
  }

  .nombreUsuario {
    font-size: small;
    color: rgb(165, 164, 164);
    margin-bottom: 5px;
  }

  .tituloPost {
    font-size: medium;
    color: rgb(246, 91, 85);
    margin-bottom: 10px;
  }

  .fecha {
    font-size: xx-small;
    color: rgb(216, 214, 214);
    margin-bottom: 5px;
  }

  hr.rounded {
    border-top: 3px solid rgb(226, 224, 224);
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .heart {
    color: #de264c;
    margin-right: 20px;
    background-color: #ffffff;
    border: none;
    margin-top: 10px;
  }
  .btnTask {
    width: 70px;
    height: 30px;
    float: right;
    cursor: pointer;
    margin-right: 4px;
    border-radius: 10px;
    border: none;
    background-color: rgba(254, 189, 129);
    color: #ffffff;
  }

  .post1 {
    background-color: white;
    width: 250px;
    height: 260px;
    margin-top: 18px;
    border: none;
    border-radius: 15px;
    font-size: 15px;
    padding: 10px;
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.5);
  }
  

  .comentario {
    color: #4f5252;
    width: 240px;
    height: 75px;
    margin-bottom: 5px;
    resize: none;
    border: none;
    font-size: x-small;
  }
  .btnDelete,
  .btnEdit {
    width: 70px;
    height: 25px;
    margin: 5px;
    cursor: pointer;
    border-radius: 10px;
    border: none;
    background-color: rgba(254, 189, 129);
    color: #ffffff;
  }
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
  #contador {
    width: 15px;
    border: none;
    background-color: #ffffff;
  }
  .btnsPost {
    display: flex;
    align-items: baseline;
    float: right;
  }
}
/* ------------------------------------------------------
------------------vista TABLET-------------------------
------------------------------------------------------ */

@media only screen and (min-width: 768px) {
  .containerWelcome {
    background-image: url("imagenes/fondowebWelcome.png");
    background-size: cover;
  }

  #logoWelcome {
    margin-bottom: 100px;
    width: 380px;
  }

  .btn1 {
    width: 300px;
    font-size: 20px;
  }

  .btn2 {
    width: 300px;
    font-size: 20px;
  }

  /*--------------------------------------REGISTER-------------------------------------------------*/

  .containerRegister {
    background-image: url("imagenes/fondoweb-register.png");
    background-size: cover;
  }

  .formRegister {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #logoRegister {
    margin-top: 120px;
    width: 180px;
  }

  .labelRegisterMe {
    margin-bottom: 20px;
    font-size: 20px;
  }

  .inputRegisterMe {
    width: 350px;
    height: 50px;
  }

  .buttonRegisterMe {
    margin-top: 20px;
    width: 250px;
    height: 50px;
    font-size: 18px;
  }

  .buttonRegisterGoogle {
    width: 250px;
    height: 50px;
    font-size: 18px;
  }

  /*--------------------------------------LOGIN---------------------------------------------------*/

  .containerLogin {
    background-image: url("imagenes/fondoweb-login.png");
    background-size: cover;
  }

  .formlogin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  #logoLogin {
    margin-top: 130px;
    width: 200px;
  }

  .labelLoginMe {
    margin-bottom: 20px;
    font-size: 20px;
  }

  .inputLoginMe {
    width: 350px;
    height: 50px;
  }

  .buttonLoginMe {
    margin-top: 20px;
    width: 250px;
    height: 50px;
    font-size: 18px;
  }

  .buttonLoginGoogle {
    width: 250px;
    height: 50px;
    font-size: 18px;
  }
  /*---------------------------------MURO--------------------------------------------------------*/

  #logoMuro {
    width: 170px;
  }

  .categoryHome {
    flex: 0 1 250px;
  }

  .containerPost {
    flex: 1 0 auto;
    height: 1060px;
    margin-top: 30px;
  }

  .mainPost {
    display: flex;
    flex-direction: row;
  }

  .categoryFood,
  .categoryclean,
  .categoryVet,
  .categoryGo,
  .categoryPlay,
  .categoryAcc {
    width: 200px;
    height: 80px;
    margin: 15px;
    margin-left: 30px;
    font-size: 20px;
    margin-top: 27px;
  }
  .logOut {
    margin-top: 20px;
  }
  .task-form {
    width: 423px;
    height: 140px;
  }
  .taskTittle {
    width: 280px;
  }
  .taskDescription {
    width: 400px;
    height: 45px;
  }
  .post1 {
    width: 425px;
    height: 230px;
    padding: 20px;
  }
  .comentario {
    width: 420px;
    height: 75px;
  }
  .containerForm {
    position: fixed;
    margin-left: 300px;
    margin-top: 30px;
  }
  .containerTask {
    margin-top: 200px;
  }
}
/* ------------------------------------------------------
------------------vista WEB-------------------------
------------------------------------------------------ */

@media screen and (min-width: 1100px) {
  .containerWelcome {
    background-image: url("imagenes/fondowebWelcome.png");
    background-size: cover;
  }
  .containerRegister {
    background-image: url("imagenes/fondoweb-register.png");
    background-size: cover;
  }
  .formRegister {
    margin-right: 800px;
  }
  #logoRegister {
    margin-top: 20px;
  }

  .containerLogin {
    background-image: url("imagenes/fondoweb-login.png");
    background-size: cover;
  }
  .formlogin {
    margin-right: 800px;
  }
  #logoLogin {
    margin-top: 80px;
  }

  /*MURO*/

  #logoMuro {
    width: 200px;
  }
  .categoryHome {
    flex: 0 1 250px;
  }
  .categoryFood,
  .categoryclean,
  .categoryVet,
  .categoryGo,
  .categoryPlay,
  .categoryAcc {
    width: 160px;
    height: 70px;
    margin-top: 20px;
    margin-left: 20px;
    font-size: 20px;
    margin-top: 30px;
  }
  .containerForm {
    position: fixed;
    margin-left: 245px;
    margin-top: 30px;
  }
  .containerTask {
    margin-top: 250px;
    width: 1200px;
  }
  .task-form {
    width: 1000px;
    height: 180px;
    padding: 25px;
  }
  .taskTittle {
    width: 480px;
  }
  .taskDescription {
    width: 1000px;
    height: 75px;
  }

  .post1 {
    width: 1000px;
    height: 265px;
    padding: 25px;
  }

  .nombreUsuario {
    font-size: medium;
    margin-bottom: 10px;
  }

  .tituloPost {
    font-size: x-large;
    margin-bottom: 10px;
  }

  .fecha {
    font-size: small;
    margin-bottom: 10px;
  }

  .comentario {
    font-size: medium;
    width: 1000px;
    height: 85px;
    margin-top: 7px;
    margin-bottom: 7px;
  }

  .fa-heart {
    font-size: large;
  }
  .btnDelete,
  .btnEdit {
    height: 35px;
    width: 100px;
  }
  .btnTask {
    width: 100px;
    height: 35px;
    margin-bottom: 15px;
    font-size: 18px;
    cursor: pointer;
    background-color: #ffffff;
    border: 2px solid rgba(254, 189, 129);
    color: #4f5252;
  }
  .btnTask:hover {
    background-color: rgba(254, 189, 129);
    color: white;
  }
}