@font-face {
  font-family: handwritten;
  src: url('/static/simplicity.ttf');
}

html {
  font-size: .9em;
  color: #333;
}

body:before {
  opacity: 0.5;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f9eede;
  background-image: url("/static/matcil.png");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  padding: 1em;
}

@media only screen and (max-width: 767px) {
  body {
    background-image: url('/static/matcil.mobile.png');
  }
}

input {
  height: 1.5em;
  border: 1px solid #ccc;
  padding: .5em;
  background-color: white;
}

textarea {
  min-height: 2em;
  border: 1px solid #ccc;
  padding: .5em;
  resize: none;
  background-color: white;
}

#content {
  min-height: 100vh;
}

.row {
  margin: 0;
  overflow: visible;
}

.btn {
  color: #333;
  border: 3px solid rgba(255, 255, 255, 0.25);
  background-color: rgba(255, 255, 255, 0.5);
}

.btn:hover {
  color: #eee;
}

#board .card:nth-child(even) {
  transform: rotate(4deg);
  position: relative;
  top: 5px;
}

#board .card:nth-child(3n) {
  transform: rotate(-3deg);
  position: relative;
  top: -5px;
}

#board .card:nth-child(5n) {
  transform: rotate(1deg);
  position: relative;
  top: -15px;
}

#card--creator {
  float: right;
}

.card {
  float: left;
  max-width: 25em;
  padding: 1em;
  margin: .5em;
  border: 1px solid #ddd;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, .25);
}

.card:hover {
  box-shadow: 1px 1px 16px rgba(0, 0, 0, .25);
  z-index: 99;
}

.card--section {
  padding: .35em;
}

.card--section > span {
  font-weight: 700;
  background-color: rgba(255, 255, 255, 0.25);  
  padding: .25em;
}

.card--section > p {
  display: inline;
  line-height: 1.7em;
  padding: .35em;
}

.card--section > p > textarea {
  font-family: Arial, Helvetica, sans-serif;
  min-height: 5em;
  width: 95%;
  display: block;
  margin-top: .35em;
}

.card--content {
  line-height: 1.7em;
}

.card--creation {
  font-weight: 700;
  text-align: right;
}

.card-red {
  background-color: #F6C2D9;
}

.card-purple {
  background-color: #E4DAE2;
}

.card-blue {
  background-color: #A1C8E9;
}

.card-green {
  background-color: #BCDFC9;
}

.card-amber {
  background-color: #FFF69B;
}

.card-gray {
  background-color: #EEEEEE;
}

.card--color-pick {
  float: left;
  margin: .75em .5em;
}

.card--submit {
  float: right;
}

.color-pick {
  color: #888;
  border: 1px solid #888;
  font-size: 1.25em;
  margin-right: .5em;
}

#card--creator-info {
  float:left;
  margin: .5em 0;
  color: rgb(255, 52, 52);
}