<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Poppins&family=Raleway&family=Work+Sans:wght@900&display=swap');

* {
    border: 0px black solid;
    background-color: white;

}

.about-text {
  padding-right: 50px;
  padding-top: 40px;
  font-family: 'Poppins', sans-serif;;
  font-size: 15px;
  padding-left: 20px;
  padding-bottom: 40px;
}

#scan {
  width: 60%;
}
a:hover {
  color: #333042;

  text-decoration: none;

}

a {
  color: #333042;
  text-decoration: underline;
}

.container_width {
  max-width: 100%;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 70px;

}

.title_story {
  font-size: 300%;
  font-family: 'Work Sans', sans-serif;
  padding-top: 70px;
  text-align: center;
  border-right: 3px #ffcccc;
  border-bottom: 3px #ffcccc;
  /*border-radius: 120px 0px;*/
  border-style: solid dotted;
  height: auto;
}

#footer {
  margin-left: 36px;
  font-family: 'Poppins', sans-serif;
}

@media (max-width: 575px) {
  .title_story {
    font-size: 300%;
    line-height: 52px;
    padding-bottom: 16px;
  }
}

</style>

<template>

  <b-container fluid class="p-0">
    <MenuBar/>

    <b-row>
      <b-col md="8">
        <p class="title_story">Issues out so far</p>

      </b-col>
    </b-row>
    <b-row class="about-text">
        <b-col md="6">
          <p id="footer">
            <a href="/firstissue">Issue #1: On eating in isolation</a>
              <br>
            <a href="/">Issue #2: On adapting</a></p>
        </b-col>
      </b-row>
    </b-container>

</template>

<script>

import MenuBar from './MenuBar'
export default {
    name: 'Issues',
    components: {
        MenuBar
    }
}

</script>
