.header {
  padding: 10px;
  text-align: center;
  background: #000000;
  color: #FFFFFF;
  font-size: 70px;
}
body {background-color: #000000;
}
/* 3 smoke images for bottom of home page */
/* Container holding the image and the text */
.container {
  position: relative;
  text-align: center;
  color: white;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* Three image containers (use 25% for four, and 50% for two, etc) */
#links {
   margin: 0;
   padding: 0;
   list-style: none;
}
#links li {
   float: left;
   width: 33.3%;
   margin: 0;
   padding: 0;
   text-align: center;
}
#links li img {
   border: none;
}
/* About Me page css */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.column {
  float: left;
  width: 33.3%;
  margin-bottom: 16px;
  padding: 0 8px;
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  margin: 8px;
}
.about-section {
  padding: 50px;
  text-align: center;
  background-color: #474e5d;
  color: white;
}
.container {
  padding: 0 16px;
}
.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}
.title {
  color: grey;
}
.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
}
.button:hover {
  background-color: #555;
}
@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}
/* End About Me page css */
/* Contact page css */
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Merriweather);
$red: #e74c3c;
*, 
*:before, 
*:after {
   @include box-sizing(border-box); 
}
html, body {
  background: #f1f1f1;
  font-family: 'Merriweather', sans-serif;
  padding: 1em;
}
h1 {
   text-align: center;
   color: #a8a8a8;
   @include text-shadow(1px 1px 0 rgba(white, 1));
}
form {
   max-width: 600px;
   text-align: center;
   margin: 20px auto;  
input, textarea {
     border:0; outline:0;
     padding: 1em;
     @include border-radius(8px);
     display: block;
     width: 100%;
     margin-top: 1em;
     font-family: 'Heiti TC', sans-serif;
     @include box-shadow(0 1px 1px rgba(black, 0.1));
     resize: none;   
&:focus {
       @include box-shadow(0 0px 2px rgba($red, 1)!important);
    }
  } 
#input-submit {
     color: white; 
     background: $red;
     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: 100%; 
     float: none;
     margin-bottom: 0; 
  }
}
/* Clearfix */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}
.cf:after {
    clear: both;
}
/* End Contact page css */
/* Photography gallery setup */
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}
div.gallery:hover {
  border: 1px solid #777;
}
div.gallery img {
  width: 100%;
  height: auto;
}
div.desc {
  padding: 15px;
  text-align: center;
}
/* END Photography page setup */