@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Merriweather);
@import "global.css";

/* *, 
*:before, 
*:after {
   @include box-sizing(border-box); 
} */

/* html, body {
  background: #f1f1f1;
  font-family: 'Merriweather', sans-serif;
  padding: 1em;
} */

form {
  max-width: 600px;
  text-align: center;
  margin: 20px auto;

  input,
  textarea {
    border: 0;
    outline: 0;
    padding: 1em;
    border-radius: 8px;
    display: block;
    width: 100%;
    margin-top: 1em;
    font-family: "Merriweather", sans-serif;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    box-shadow: rgba(black, 0.1) 0 1px 1px;
    resize: none;
  }

  #input-submit {
    color: white;
    background: var(--clr-accent-400);
    cursor: pointer;

    &:hover {
      @include box-shadow(0 1px 1px 1px rgba(#aaa, 0.6));
    }
  }

  textarea {
    height: 126px;
  }
}

.half {
  float: left;
  width: 48%;
  margin-bottom: 1em;
}

.right {
  width: 50%;
}

.left {
  margin-right: 2%;
}

@media (max-width: 480px) {
  .half {
    width: auto;
    float: none;
    margin-bottom: 0;
    margin-right: 4%;
    margin-left: 4%;
  }
  #input-submit{
   width: 92%;
   margin-right: 4%;
    margin-left: 4%;
  }
}

/* Clearfix */
.cf:before,
.cf:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.cf:after {
  clear: both;
}