<style scoped>

@import url('https://fonts.googleapis.com/css?family=Inconsolata&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Raleway&family=Work+Sans:wght@900&display=swap');


* {
    border: 0px black solid;
    background-color: #F7F7F7 !important;

}

body {
  background-color: #F7F7F7;
  min-height: 100vh;
}

#magi {
  width: 100%;
  z-index: -1;
  padding: 20px;
  --color-stop: #fff5f5;
  --color-bot: #333042;
}

.img-fluid {
  fill: url(#magi) #ffcccc;
}

#mag_title {
  font-size: 600%;
  /*color: #ffcccc;*/
  color: #333042;
  font-family: 'Work Sans', sans-serif;
  text-align: center;
  z-index: 1;
  border-top: 3px #ffcccc;
  border-left: 3px #ffcccc;
  border-style: solid dotted;
  /*border-radius: 0px 72px;*/
  padding: 6px;
  /*height: auto;*/
  /*-webkit-text-stroke: 1px #333042;*/
  /*transition: all .1s ease;*/
}

#mag_title:hover {
  /*border-radius: 0px 72px;*/
  box-shadow: 6px 6px #ffcccc;
}

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

.summary {
  border-left: 3px solid #ffcccc;
  border-top: 3px dotted #ffcccc;
  padding: 20px;
}

.icons img {
  width: 60%;
}

.icons p {
  text-align: center;
  font-size: 20px;
  font-family: 'Poppins', sans-serif;
  color: #333042;
  padding-top: 10%;
  text-decoration: 2px underline #ffcccc;
}

.icons {
  padding-bottom: 40px;
}

.col-md-2 {
  border-right: 3px dotted #ffcccc;
  display: table;
}

.container_width {
  max-width: 100%;
}

#toc {
  color: #333042;
  font-family: 'Work Sans', sans-serif;
  text-align: center;
  font-size: 300%;
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 3px solid #ffcccc;
  border-left: 3px dotted #ffcccc;
}

.item {
  height: auto;
  width: auto;
}

@media (max-width: 1217px) {
  #mag_title {
    font-size: 300%;
    padding-top: 10px;
    padding-left: 12px;
    padding-right: 12px;
  }
  #mag_subtitle {
    font-size: 150%;
    padding-top: inherit;
    /*padding-left: 20px;*/
  }
}

@media (max-width: 575px) {
  #mag_title {
    font-size: 60px;
    padding-top: inherit;
    padding-left: 12px;
    padding-right: 12px;
  }

  #mag_subtitle {
    font-size: 24px;
    padding-top: inherit;
  }

  .icons img {
    width: 80%;
  }

  .icons p {
    padding-top: 10%;
  }

  #magi {
  padding: 20px;
  border: 3px double ##ffcccc;
  border-radius: 24px 48px 72px 96px;
  }

  .col-md-2 {
  border: none;
  }
}

a:hover {
  color: #ff4c2b;
  text-decoration: none;

}

a {
  color: #333042;
}

#main_container {
  padding-top: 100px;
  padding-bottom: 120px;
  /*border-bottom: 2px #ffcccc solid;*/

}

#print {
  text-align: center;
  font-family: 'Poppins', sans-serif;
  color: #333042;
  padding: 6px;
  font-size: small;
}

.glow {
  font-family: 'Poppins', sans-serif;
  font-size: 30px;
  color: #fff;
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

.footer_page {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  text-align: center;
  margin-top: 20px;
}

#knife, #porcini, #cauliflower, #phone, #clothes, #lychee, #anise {
  /*margin-top: 20px;*/
  margin: auto;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}
</style>

<template>

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

  <b-row id="main_container">
    <b-col md="6">
      <b-row>
        <b-col md="8" offset-md="3">

      <a href="/about"><p id="mag_title">Magiun</p></a>
    </b-col>

    </b-row>
    <b-row>
      <b-col md="8" offset-md="3">
        <p id="mag_subtitle">#2 On adapting</p>
        <p id="print">For the print version, send an <a href="mailto:hello@magiun.online">email</a>!</p>
        <p class="summary">This second issue of Magiun focuses on...</p>
      </b-col>
    </b-row>
    </b-col>

    <b-col md="6">
      <b-row>
      <b-col md="2">
      </b-col>
        <b-col md="8">
          <a href="/about">
            <b-img class="img-fluid" id="magi" src="media/magiun_outline.svg"></b-img></a>
        </b-col>
      </b-row>
    </b-col>
    </b-row>

<b-row>
<b-col md="4" offset-md="4">
  <p id="toc">Inside</p>
</b-col>
</b-row>

<b-row class="icons">
  <b-col md="2" offset-md="3">
  </b-col>

  <b-col md="2">
    <p class="item"><a href="/knife">Knife</a></p>

  </b-col>
  <b-col md="2" order="0" order-sm="1">

    <a href="/knife"><b-img class="img-fluid" id="knife" center alt="Responsive image" src="media/magiun2/knife_small.png"></b-img></a>
  </b-col>

</b-row>


<b-row class="icons">
  <b-col md="2" offset-md="3">
<a href="/simmered"><b-img class="img-fluid" id="porcini" center alt="Responsive image" src="media/magiun2/porcini_small.png"></b-img></a>
  </b-col>
  <b-col md="2" order="1" order-sm="0">
<p class="item"><a href="/simmered">Simmered Egg</a></p>

  </b-col>


</b-row>
<b-row class="icons">
  <b-col md="2" offset-md="3">
  </b-col>

  <b-col md="2">
    <p class="item"><a href="/soulsoup">Chicken soup for soul</a></p>

  </b-col>
  <b-col md="2" order="2" order-sm="1">

    <a href="/soulsoup"><b-img class="img-fluid" id="cauliflower" center alt="Responsive image" src="media/magiun2/cauliflower_small.png"></b-img></a>
  </b-col>
</b-row>
<b-row class="icons">
  <b-col md="2" offset-md="3">
<a href="/phone"><b-img class="img-fluid" id="phone" center alt="Responsive image" src="media/magiun2/phone_small.png"></b-img></a>
  </b-col>

  <b-col md="2">
    <p class="item"><a href="/phone">Christmas dinner</a></p>

  </b-col>

</b-row>
<b-row class="icons">

  <b-col md="2" offset-md="5">
    <p class="item"><a href="/whatwecan">We do what we can with what we have</a></p>

  </b-col>
  <b-col md="2" order="2" order-sm="1">

    <a href="/whatwecan"><b-img class="img-fluid" id="clothes" center alt="Responsive image" src="media/magiun2/clothes_small.png"></b-img></a>
  </b-col>
</b-row>
<b-row class="icons">
  <b-col md="2" offset-md="3">
<a href="/lychee"><b-img class="img-fluid" id="lychee" center alt="Responsive image" src="media/magiun2/lychee_small.png"></b-img></a>
  </b-col>

  <b-col md="2">
    <p class="item"><a href="/lychee">Have you eaten yet?</a></p>

  </b-col>

</b-row>

<b-row class="icons">


  <b-col md="2" offset-md="5">
    <p class="item"><a href="/anise">Adapting to adaptations</a></p>

  </b-col>
  <b-col md="2" order="2" order-sm="1">
  <a href="/anise"><b-img class="img-fluid" id="anise" center alt="Responsive image" src="media/magiun2/anise_small.png"></b-img></a>
  </b-col>
</b-row>
<b-row>
  <b-col>
<footer>
  <p class="footer_page">This web publication was created by Alice Strete</p>
</footer>
  </b-col>
</b-row>
</b-container>



</div>

</template>

<script>
import MenuBar from './MenuBar'
export default {
    name: 'SplashPage',
    components: {
        MenuBar
    }
}

</script>
