/*
 * Format.css
 * -- Simple clean css lib
 * by github.com/withtobi
 */

/*
 * Roboto Mono by Christian Robertson licenced under Apache License, Version 2.0
 * from Google Fonts
 */
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');

/* Body */
body {
  margin: 0px;
  padding: 0px;
  left: 0px;
  top: 0px;
  font-family: 'Roboto Mono', monospace;
  font-size: 1em;
  background: #efefef;
  color: black;
}

body .dark {
  margin: 0px;
  padding: 0px;
  left: 0px;
  top: 0px;
  font-family: 'Roboto Mono', monospace;
  font-size: 1em;
  background: #212121;
  color: white;
}

/* Main */
.main {
  max-width: 960px;
  margin: 0px auto;
}

/* Grid */
.grid {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

/* 1/12 */
.grid .one {
  width: 25%;
}

@media only screen and (min-width: 1024px) {
  .grid .one {
    width: 8.33%;
  }
}

/* 2/12 */
.grid .two {
  width: 50%;
}

@media only screen and (min-width: 1024px) {
  .grid .two {
    width: 16.66%;
  }
}

/* 3/12 */
.grid .three {
  width: 75%;
}

@media only screen and (min-width: 1024px) {
  .grid .three {
    width: 25%;
  }
}

/* 4/12 */
.grid .four {
  width: 100%;
}

@media only screen and (min-width: 1024px) {
  .grid .four {
    width: 33.33%!important;
  }
}

/* 6/12 */
.grid .six {
  width: 100%;
}

@media only screen and (min-width: 1024px) {
  .grid .six {
    width: 50%;
  }
}

/* 9/12 */
.grid .full, .grid .twelve {
  width: 100%;
}

@media only screen and (min-width: 1024px) {
  .grid .four, .grid .twelve {
    width: 100%;
  }
}


/* Text */
/* Paragraph */
p {
  font-size: 1.2em;
}

/* Headings */
h1 {
  font-size: 1.6em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.4em;
}

h4 {
  font-size: 1.3em;
}

h5 {
  font-size: 1.2em;
}

h6 {
  font-size: 1.1em;
}

/* Links */
a {
  text-decoration: none;
  background: #ffff00;
  color: black;
  padding: 0px 5px;

  transition: all .4s;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  -ms-transition: all .4s;
  -o-transition: all .4s;
}

a:hover, a:active {
  background: #e91e63;
}

/* Highlight */
.highlight {
  background: #ffff00;
  color: black;
}

/* Hr */
hr {
  position: relative;
  height: 20px;
  overflow: hidden;
  border: 0;
  margin: 20px 0;
}

hr:after {
  content: "----------------------------------------------------------------------------------------------------";
  position: absolute;
  top: 0;
  left: 0;
  line-height: 20px;
  width: 100%;
  word-wrap: break-word;
}

/* Buttons */
.button, button {
  text-decoration: none;
  color: black;
  border: solid black 3px;
  padding: 10px 30px;
  background: transparent;
  color: black;
}

.button:hover, .button:active, button:hover, button:active, button:focus {
  border: solid black 3px;
  background: #e91e63;
}