@import url('lib/reset.less');
@import url('../bower_components/lesshat/build/lesshat.less');

*,*:before,*:after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@bodybgcolor: #383838;
@jimdocolor: #0099ee;
@contentbgcolor: #f7f7f9;

.relacon{
  position: relative;
}
body {
  background: @bodybgcolor;
  font-family: "Open Sans";
  color: white
}
.mw{
  margin: 0 auto;
  max-width: 30em;
  padding-left: 1em;
  padding-right: 1em;
}
.wrap{
  width: 100vw;
  height: 100vh;

}
header{
    padding: 3em 0;
    text-align: center;
  h1{
    text-transform: uppercase;
    color: @jimdocolor;

  }
  h2{
    font-weight: 300;
  }
  h1,h2{
    padding: 0;
    margin: 0;
  }
}
.topbar{
  width: 100%;
}

.contentwrap {
  padding: 2em 0;
  background: @contentbgcolor;
}


.fontchange{
  width: 100%;
}
.selection-example{
  .display(inline-flex);
  .align-items(center);
  .justify-content(center);
  margin: 0;
  text-align: center;
  width: 100%;
  font-size: 1.8em;
  background: #676767;
  color: white;
  padding: 2em 0;
}
h1{
  display: inline-block;
  .flex(1 1);
  margin: 1em;
}

.jdfs-main{
  margin: 1em;
  display: inline-block;
}
.footerwrap{
  background: #393939;
}
.links{
  width: 100%;
  text-align: center;
  padding: 5em 0;
  a{
    display: inline-block;
    margin: 0 .5em;
    text-decoration: none;
    color: @contentbgcolor;
    &:hover{
      color: @jimdocolor;
    }
  }
}