/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700&display=swap");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0; }

body {
  background-color: #554596; }

svg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%; }

#intro {
  position: relative;
  opacity: 0; }

#back {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 0;
  margin: 0; }
  #back .yellowBlock {
    position: absolute;
    width: 50vw;
    height: 200vh;
    background: #f8d900;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
    transform-origin: 50% 50%; }
    #back .yellowBlock.one {
      transform: translate(0vw, -50vh) rotate(0); }
    #back .yellowBlock.two {
      transform: translate(50vw, -50vh) rotate(0); }

main {
  display: none;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 40vw;
  height: auto;
  z-index: 20;
  margin: 0 auto; }

#links {
  padding: 10vh 0 20vh 0; }

#links li {
  list-style-type: none;
  margin-bottom: 1em; }

#links li > a {
  font-family: 'IBM Plex Mono', monospace;
  display: block;
  width: 60%;
  height: auto;
  margin: 0 auto;
  border-radius: 5px;
  background: #fff;
  padding: 2rem 5%;
  color: #554596;
  font-size: 2em;
  font-weight: 700;
  text-decoration: none;
  transition: all 300ms ease-in-out, background-position 500ms cubic-bezier(0.735, 0.305, 0.105, 1.235); }
  #links li > a span {
    display: block;
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.6rem;
    font-weight: 400;
    max-width: 70%; }
  @media screen and (min-width: 641px) {
    #links li > a {
      background-image: url("../svg/eye.svg");
      background-repeat: no-repeat;
      background-position: 120% 20%;
      background-size: 50px 50px; }
      #links li > a:hover {
        background-color: #f8d900;
        background-position: 92% 20%;
        transform: translateX(-0.025em) scale(1.05) !important; } }

#links li p {
  font: .8rem/1.6rem 'IBM Plex Mono', monospace;
  display: block;
  width: 70%;
  margin: 0 auto;
  color: #aba0d4;
  border-top: 1px dashed #aba0d4;
  border-bottom: 1px dashed #aba0d4;
  margin-top: 8rem;
  padding: 2.5rem 0 2.7rem 0; }
  #links li p a {
    display: inline;
    color: #f9d900; }

#mp svg .cls-3 {
  fill: #f9d900;
  stroke: none;
  pointer-events: all;
  transition: all 200ms ease-in-out; }

#mp svg .cls-3:hover {
  fill: #fff;
  transform: translateY(-5px); }

@media screen and (max-width: 640px) {
  #back {
    display: none; }

  main {
    width: 100%; }
    main #links {
      padding: 8% 0 20vh 0; }
      main #links li {
        width: 80%;
        margin: 1rem auto;
        overflow: hidden; }
        main #links li a {
          background: url("../svg/wav.svg") no-repeat 105% center #fff;
          background-size: contain;
          font-size: 1.5rem;
          width: 90%;
          min-height: 6rem; }
          main #links li a span {
            font-size: .85rem;
            line-height: 1.4rem;
            max-width: 80%; }
        main #links li p, main #links li p a {
          font-size: .85rem;
          border: none;
          margin: 0 auto; }
    main #links li.text p {
      width: 92%; }
    main #links li.text a {
      background: none; } }

/*# sourceMappingURL=style.css.map */