/*
CSS for the front page, to match sty.css
By Jadrian Miles
*/

@import url('https://fonts.googleapis.com/css?family=Lora|Marcellus');

body {
  background-color: #FDFEFF;
  color: #23363D;
  line-height: 135%;
  font-family: 'Lora', serif;
  font-size: 91%;
}
@media screen, projection, tv {
  body {
    margin: 10%;
  }
}
@media print {
  body {
    font-size: 65%;
    margin: 0px;
    padding: 0px;
    background-color: #FFFFFF;
    color: #000000;
  }
}

h1 {
  font-family: marcellus, serif;
  font-weight: normal;
  margin: 0px;
  padding: 0px;
  text-align: left;
  font-size: 2.3em;
  line-height: 1em;
}
abbr {
  text-decoration: none;
  border-bottom: 1px dotted #23363D;
  display: inline-block;
  line-height: 80%;
}
p {
  margin: 1.75ex 0ex 0ex 0ex;
}
p.continue {
  margin-top: 0.5ex;
}
ul {
  margin: 0ex;
  padding-left: 1.5em;
}

a, a:visited {
  color: #0B86B5;
  text-decoration: underline;
  cursor: pointer;
}
a:hover {
  background-color: #FAFAD0;
  color: #A0363D;
  text-decoration: none;
  outline: 2px solid #F0E0A0;
  cursor: pointer;
}
a#photo-link, a#photo-link:visited, a#photo-link:hover {
  background-color: transparent;
  outline: none;
}
a#email {
  font-family: monospace;
}

#photo-wrapper {
  width: 48%;
  float: right;
  margin: -4.1ex 0ex 3ex 6%;
}
#photo {
  width: 100%;
  height: 570px;
  background-image: url('../img/me.jpg');
  background-size: cover;
  background-position: center top;
}
footer {
  /* The footer is empty, but its existence forces the body box to grow to
     fit the entire photo, so that the bottom margin is correct. */
  clear: both;
}

@media screen and (min-width: 1000px) {
  body {
    width: 800px;
    margin: 100px auto;
  }
  h1 {
    font-size: 2.7em;
  }
  #photo-wrapper {
    margin-top: -4.8ex;
  }
}
@media screen and (min-width: 650px) and (max-width: 850px) {
  body {
    margin: 6%;
  }
  h1 {
    font-size: 2em;
  }
  #photo-wrapper {
    margin-top: -3.7ex;
  }
}
@media screen and (max-width: 650px) {
  body {
    margin: 2%;
  }
  #photo-wrapper {
    width: 100%;
    float: none;
    clear: both;
    margin: 2.25ex 0ex 0ex 0ex;
  }
  #photo {
    height: 265px;
    background-position: center 15%;
  }
}