/*Colorscheme was developed with help of SpyColor.com. This .css ensures all text contrasts well with its background. Additionally, several background images are set here. Each image is scaled approriately so as not to lower resolution.*/
body{
    font-family: 'Ubuntu Mono', monospace;
    background-color: #538b8b;
}
a{
    color: #d2e4e4;
}
a:visited{
   color: #e1eded;
}
a:hover {
    color: #d2e4e4;
}
#intro{
    padding-top: 50px;
    color: #416d6d;
    background-image: url("../imgs/oxford.jpg");
    background-position:center top;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 10px;
    height: 500px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#break{
    padding-top: 50px;
    color: #416d6d;
    background-image: url("../imgs/oxford2.jpg");
    background-position:center top;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 10px;
    height: 450px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#projbreak{
    padding-top: 50px;
    color: #416d6d;
    background-image: url("../imgs/protoscreen.png");
    background-position:center top;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 10px;
    height: 450px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#bottom{
    padding-top: 50px;
    color: #416d6d;
    background-image: url("../imgs/avebury.jpg");
    background-position:center top;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 10px;
    height: 600px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#projbottom{
    padding-top: 50px;
    color: #416d6d;
    background-image: url("../imgs/DSC_0787.JPG");
    background-position:center top;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 10px;
    height: 400px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.sep{
    padding-top: 20px;
    padding-bottom: 20px;
}
.do{
    background-color: #538b8b;
    padding-bottom: 20px;
}
.glyph{
    display: block;
    text-align: center;
    color: #d2e4e4;
}
.container {
  position: static;
  width: 100%;
  text-align: center;
  display:block;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #87b7b7;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: #e1eded;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}