<template>
<div>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
  <footer class="container-fluid Azul-puma footer py-3 ">
    <!-- <div class="container">
      <div row>
        <router-link to="/comite">
          <button type="button" class="col-md-6 col-sm-12 btn boton-footer uno">
            Comité Editorial
          </button>
        </router-link>
        <router-link to="/lineamientos">
          <button type="button" class="col-md-6 col-sm-12 btn boton-footer dos">
            Política Editorial y Lineamentos
          </button></router-link
        >
        <router-link to="/proceso">
          <button
            type="button"
            class="col-md-6 col-sm-12 btn boton-footer tres"
          >
            Proceso Editorial y Organismos
          </button>
        </router-link>
        <router-link to="/puntos">
          <button
            type="button"
            class="col-md-6 col-sm-12 btn boton-footer cuatro"
          >
            Puntos de Venta
          </button>
        </router-link>
      </div>
    </div> -->
    <div row>
      <p class="mb-0 ">Hecho en México, todos los derechos reservados 2020.</p>
      <p class="my-0 ">
        Esta página puede ser reproducida con fines no lucrativos, siempre y
        cuando no se mutile, se cite la fuente
      </p>
      <p>
        completa y su dirección electrónica. De otra forma, requiere permiso
        previo por escrito de la institución.
      </p>
    </div>
  </footer>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
.boton-footer {
  background-color: rgb(187, 136, 0);
  color: white;
  width: 14rem;
  font-size: 0.8rem;
}
.uno,
.dos,
.tres {
  margin-right: 1rem;
}
.btn {
  margin-bottom: 1rem;
}

.Azul-puma {
  background-color: #1e3c70;
}

.footer {
  text-align: center;
  color: white;
}

@media (max-width: 768px) {
  .uno,
  .tres {
    margin-right: 4rem;
  }
  .dos {
    margin-right: 0rem;
  }
  .footer {
    font-size: 0.7rem;
  }
}

@media (max-width: 970px) {
  .uno,
  .dos,
  .tres {
    margin-right: 0.5rem;
  }

  .footer {
    font-size: 0.7rem;
  }
}
</style>
