style.css

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700);
@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css);

/* VARS */
$height: 40px;


*, *:before, *:after {
  box-sizing: border-box;
}
input[type=text], select, textarea, input[type=url], input[type=color]{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

html { font-size: 62.5%; }
body {
  font-family: 'Source Sans Pro', sans-serif;
  background-color: white;
}

.container {
  margin: 16rem auto;
  max-width: 700px;
}

form {
  margin: 2rem 0;
  
  &:after {
    content: '';
    display: table;
    clear: both;
  }
  
  .field {
    display: block;
    border: 1px solid #BDBDBD;
    float: left;
    width: 100%;
    
    &.tnb {
      border-top: 0;
    }
    
    &.half {
      width: 50%;
    }
    
    &.last {
      border-left: 0;
    }
    
    label {
      display: block;
      font-size: 1.2rem;
      padding: 1.5rem 2rem 0;
      text-transform: uppercase;
      color: #999;
      font-weight: 700;
      letter-spacing: 1px;
      
      
    +position(absolute, 50% null null 0px)
    +transform(translateY(-50%))
    font:
      family: $georgia
      style: italic
      size: 18px
    color: #999
    pointer-events: none
    +transition
    }
    
    input,
    textarea {
      display: block;
      width: 100%;
      padding: .5rem 2rem 1.5rem;
      font-size: 1.8rem;
      border: 0;
      color: #212121;
      outline: 0;
    }
    
    textarea {
      min-height: 150px;
      resize:vertical; 
    }
  }
}