@import '~normalize.css';
@import 'controls.scss';
@import "layout";

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

html {
  box-sizing: border-box;
}

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

body {
  font-family: 'Trebuchet MS', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  line-height: 1.5;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header {
  width: 100%;
}

.container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 1em;
}

a, a:visited, a:active {
  color: black;
  color: #0000EE;
}

a:hover {
  color: black;
  color: red;
}


.text-center {
  text-align: center;
}

h1 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

input[type=text] {
  padding: 0.5rem 1rem;
  color: #16191f;
  border-radius: 0.2rem;
  border: 1px solid #aab7b8;
}

.slash {
  padding: 0 8px;
}

#login_container {
  background-color: #f8f8f8;
}

#login_box {

  max-width: 40em;
  margin: 2em auto;
  border: 1px solid darkgrey;
  padding: 5em;

  border-radius: 8px;
  box-shadow: 0 12px 18px 2px rgba(34, 0, 51, .04), 0 6px 22px 4px rgba(7, 48, 114, .12), 0 6px 10px -4px rgba(14, 13, 26, .12);
}


#phrase {
  width: 100%;
  font-size: 1.6em;
  padding: 0.8em 1em;

  // text-transform: uppercase;
  ///font-weight: 400;
  text-align: center;

  color: #0d4163 !important;

  font-family: monospace, courier;

  border-radius: 8px;
  box-shadow: 0 12px 18px 2px rgba(34, 0, 51, .04), 0 6px 22px 4px rgba(7, 48, 114, .12), 0 6px 10px -4px rgba(14, 13, 26, .12);

  &::placeholder {
    color: currentColor;
    opacity: 0.2;
  }

}

#notepad_features {

  & > li {
    margin-bottom: 0.5em;
  }

}

a.brand {
  font-family: "Arial Rounded MT Bold", serif;
  color: #f42f42;
  text-decoration: underline;

  &:hover {
    text-decoration: none;
  }
}

.bold {
  font-weight: bold;
}

.red {
  border: 2px solid red;
}

.text-red {
  color: red;
}

.green {
  border: 2px solid green;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.w-50 {
  width: 50%;
}

.text-muted {
  color: #a3a1a1;
}