@import "fonts";
@import "colors";
@import "forms";

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

html, html body, .root {
  height: 100%;
}

body {
  font-family: "SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;
  font-weight: normal;
}

header, .root {
  margin: 0 auto;
  color: $black;
  width: 75%;
  max-width: 1024px;
}

header {
  background: $black;
  color: #FFF;
  text-align: center;
  margin-bottom: 25px;
  h1 {
    margin: 0;
    padding: 5px;
    line-height: 1;
    font-weight: bold;
    font-size: large;
    a, a:active, a:hover, a:focus, a:link {
      color: #FFF;
      text-decoration: none;
    }
  }
}

.root {
  .react-mount-point, #reactapp {
    height: 100%;
  }
  form {
    margin: 0 auto;
    height: 100%;
    width: 80%;

    .textarea {
      margin: 0 0 10px 0;
      height: 50%;
      textarea { height: 100%; }
    }
  }
  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
}