@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap");
body {
  font-family: "Ubuntu", sans-serif; }
  body .header__container {
    background-color: #8A1E41; }
    body .header__container .header__container-logo img {
      max-width: 200px; }
  @media screen and (max-width: 414px) {
    body .header__container .header__container-logo img {
      max-width: 100px; } }
  body .main__container {
    height: 90vh;
    background-image: url(../img/hero.jpg);
    background-position: center center;
    background-size: cover; }
    body .main__container .main__container-titles h1 {
      font-weight: 700;
      font-size: 50px;
      color: #8A1E41; }
    body .main__container .main__container-titles h3 {
      color: #8A1E41; }
    body .main__container .main__container-buttons .main__container-button-perro {
      position: relative; }
      body .main__container .main__container-buttons .main__container-button-perro .btn-perro {
        opacity: 1;
        position: absolute;
        transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        cursor: pointer; }
      body .main__container .main__container-buttons .main__container-button-perro .btn-perro-hover {
        opacity: 0;
        transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        cursor: pointer; }
      body .main__container .main__container-buttons .main__container-button-perro:hover .btn-perro {
        opacity: 0; }
      body .main__container .main__container-buttons .main__container-button-perro:hover .btn-perro-hover {
        opacity: 1; }
    body .main__container .main__container-buttons .main__container-button-gato {
      position: relative; }
      body .main__container .main__container-buttons .main__container-button-gato .btn-gato {
        opacity: 1;
        position: absolute;
        transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out; }
      body .main__container .main__container-buttons .main__container-button-gato .btn-gato-hover {
        opacity: 0;
        transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out; }
      body .main__container .main__container-buttons .main__container-button-gato:hover .btn-gato {
        opacity: 0; }
      body .main__container .main__container-buttons .main__container-button-gato:hover .btn-gato-hover {
        opacity: 1; }
  @media screen and (max-width: 768px) {
    body .main__container {
      min-height: 95vh;
      height: 100%;
      background-image: url(../img/heromobile.jpg);
      background-position: bottom center; }
      body .main__container .main__container-titles h1 {
        font-size: 25px; }
      body .main__container .main__container-titles h3 {
        font-size: 20px; }
      body .main__container .main__container-buttons .main__container-button-perro {
        display: flex;
        justify-content: center; }
      body .main__container .main__container-buttons .main__container-button-gato {
        position: relative;
        display: flex;
        justify-content: center;
        justify-self: flex-end; } }