<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');
@font-face {
  font-family: 'Happy Times';
  src: url('../../fonts/happy-times-NG_regular_master.otf');
}

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

}

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

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

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

#mag_title {
  font-size: 450%;
  /*color: #ffcccc;*/
  color: #1B75BC;
  font-family: 'Work Sans', sans-serif;
  text-align: center;
  z-index: 1;
  padding: 6px;

}


#mag_subtitle {
  font-size: 200%;
  font-family: 'Work Sans', sans-serif;
  color: #1B75BC;
  text-align: center;
  height: auto;
  padding: 6px;
}

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

.icons img {
  width: 60%;
}


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

.container_width {
  max-width: 100%;
}

#toc {
  color: #1B75BC;
  font-family: 'Happy Times';
  text-align: center;
  font-size: 100%;
  text-align: center;
  border: 8px dotted #1B75BC;
  padding: 5px;
}

a {
  color: #1B75BC;
}

.author {
  color: #1B75BC;
}

#edition {
  color: #1B75BC;
  font-family: 'Happy Times';
  margin-top: 55px;


}

@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: 50px;
    padding-top: inherit;

  }

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

  .icons img {
    width: 80%;
  }

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

  #magi {
  width: 50%;
  border: 3px double ##ffcccc;
  border-radius: 24px 48px 72px 96px;
  }

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


#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="7" offset-md="2">

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

    </b-col>
<b-col md="3" id="edition">
  Summer 2021
</b-col>
    </b-row>
    <b-row>
      <b-col md="8" offset-md="4">
        <a href="/about">
          <b-img class="img-fluid" id="magi" src="media/magiun2/unnamed.png"></b-img></a>
      </b-col>
    </b-row>
    <b-row>
      <b-col md="8" offset-md="2">
        <p id="mag_subtitle">#2 On adapting</p>

      </b-col>
    </b-row>
    </b-col>

    <b-col md="6">
      <b-row>
<b-col md="8" offset-md="2" id="toc">
  <p class="item"><a href="/knife">PAPER THIN</a><br>Yoana Buzova</p>
  <br>
  <p class="item"><a href="/simmered">SIMMERED EGG</a> <br>Dorothy Cheung</p>
  <br>
  <p class="item"><a href="/soulsoup">CHICKEN SOUP FOR SOUL</a><br>Patricia Cirtog</p>
<br>
  <p class="item"><a href="/phone">CHRISTMAS DINNER</a><br>Valentina Vella</p>
  <br>
  <p class="item"><a href="/whatwecan">WE DO WHAT WE CAN WITH WHAT WE HAVE</a><br>Raluca Chereji</p>
  <br>
  <p class="item"><a href="/lychee">HAVE YOU EATEN YET?</a><br>Witold van Ratingen</p>
  <br>
  <p class="item"><a href="/anise">ADAPTING TO ADAPTATIONS</a><br>Inge Hoonte</p>









</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>
