<!-- Pen content -->
<div class="wrap">
  <a class="trigger offset" id="js-trigger" href="#">Trigger</a>
  
  <dialog id="js-dialog" class="offset">
    <p>Bored at a conference</p>
    <a id="js-close" href="#">&Cross;</a>
  </dialog>
</div> <!-- /content -->

<!-- Footer -->
<div id="footer">
  <div class="wrapper">
    <a href="https://andreasvirkus.github.io">
      <div class="logo">
        <div class="element logo-text pre-test" id="sdew_1" ><p>a</p></div> 
        <div class="element logo-text pre-test selected" id="sdew_2" ><p>J</p></div> 
        <div class="element logo-text pre-test" id="sdew_3" ><p>v</p></div>
      </div>
    </a>
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Josefin+Slab:100,200,400);
@import url(https://fonts.googleapis.com/css?family=Lato:100,200,300,400);

$orange: tomato;
$dark-gray: #222;
$light-gray: #555;

*, body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #4776E6; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #4776E6 , #8E54E9); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #4776E6 , #8E54E9);
  color: #fff;
  font-family: 'Lato';
}

.wrap {
  text-align: center;
}

.trigger {
  display: inline-block;
  background: none;
  border: none;
  font-size: 2em;
  padding: .3em .8em;
  color: #fff;
  margin: 40vh auto;
  border: 2px solid #fff;
  text-decoration: none;
}

dialog {
  padding: 3em 6em;
  background: none;
  color: #fff;
  border: 2px solid #fff;
  font-size: 2em;
  font-family: 'Lato';
  margin: -200px auto 0;
  transition: all 200ms ease-out;
  
  a {
    position: absolute;
    right: 15px;
    top: 5px;
    text-decoration: none;
    color: #fff;
    font-size: 2em;
    border: none;
    line-height: 20px;
    
    &:focus {
      outline: none;
    }
  }
}

.hide {
  visibility: hidden;
  pointer-events: none;
}

.offset {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    display: block;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
  }
}
/* 
=================
  FOOTER STYLES
=================
*/
#footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.65);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#footer:hover #sdew_2 p {
  color: #e16036;
}

#footer-tag {
  color: #fff;
}

#footer-tag a {
  color: #fff;
}

#footer-tag a:hover {
  color: #e16036;
}

.logo {
  width: 150px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  transform: translate(-15px, 0);
  color: #000;
  font-family: Josefin Slab, serif;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  font-size: 64px;
}

.logo p {
  font-family: Josefin Slab, serif;
}

.logo:hover #sdew_2 p {
  color: #e16036;
}

.element {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.element p {
  line-height: 1;
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
}

#sdew_1 {
  font-size: 64px;
  color: #fff;
  top: 1px;
  left: 50px;
}

#sdew_2 {
  font-size: 64px;
  color: #fff;
  top: 30px;
  left: 77px;
}

#sdew_2 p {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#sdew_3 {
  font-size: 64px;
  color: #fff;
  top: 40px;
  left: 92px;
}

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

ready(function () {
  var trigger = document.getElementById('js-trigger'),
    overlay = document.getElementById('js-dialog'),
    close = document.getElementById('js-close');
  
  
  trigger.onclick = function(e) {
    e.preventDefault();

    displayModal(true, trigger, overlay);
  };
  close.onclick = function(e) {
    e.preventDefault();

    displayModal(false, trigger, overlay);
  }
});

function displayModal(state, trigger, overlay) {
  if (state) {
    overlay.showModal();
    trigger.classList.add('hide');
  } else {
    overlay.close();
    trigger.classList.remove('hide');
  }
}