/* Reset browser defaults */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

* {
  box-sizing: border-box;
}

body {
  font-family: verdana, arial, sans-serif;
  width: 100%;
  color: #474747;
  background-color: gainsboro;
  padding: 1.5vw;
}

section {
  margin: 0.5vw;
}

/* Header */
header#page_hdr {
  display: block;
  float: top;
  width: 100%;
  padding: 0.75vw;
  border-radius: 0.75vw;
  background-color: #C80023;
}

header#page_hdr h1 {
  font-family: georgia, serif;
  font-size: 3.5vw;
  font-weight: bold;
  text-align: center;
  text-shadow: 0.2vw 0.2vw darkgray;
  color: cornsilk;
}

h2 {
  font-family: verdana, arial, sans-serif;
  font-size: 2.25vw;
  font-weight: bold;
  margin: 1vw 0vw 2.0vw 0vw;
}

h3 {
  font-family: verdana, arial, sans-serif;
  font-size: 2.0vw;
  margin: 2.0vw 0vw 1.0vw 0vw;
}

article#biog {
  text-align: justify;
  margin: 2.0vw 2.5vw 2.5vw 1.5vw;
}

article#qualifications {
  text-align: justify;
  margin: 2.0vw 2.5vw 2.5vw 1.5vw;
}

article#services {
  text-align: justify;
  margin: 2.0vw 2.5vw 2.5vw 1.5vw;
}

article#examples {
  text-align: justify;
  margin: 0vw 2.5vw 2.5vw 1.5vw;
}

article#examples a {
  color: indigo;
}

article#examples a:hover {
  color: red;
  cursor: pointer;
}

p {
  font-family: verdana, arial, sans-serif;
  font-size: 1.75vw;
}

li {
  font-size: 1.75vw;
  margin-left: 3vw;
}

img#portrait {
  float: right;
  height: 27.5vw;
  width: auto;
  display: block;
  margin-left: 5vw;
  border: 0.5vw solid white;
}

/* Footer */
footer#page_ftr {
  display: inline-block;
  float: bottom;
  width: 100%;
  clear: both;
  background-color: #C80023;
  color: cornsilk;
  font-size: 1.5vw;
  font-weight: normal;
  text-align: left;
  text-decoration: none;
  padding: 0.75vw;
  border-radius: 0.75vw;
}

footer#page_ftr a {
  color: cornsilk;
}

footer#page_ftr a:hover {
  color: yellow;
  cursor: pointer;
}

div#webdev {
  display: block;
  float: right;
  margin: 1.0vw 2.0vw;
}

span#devemail::after {
  content: "info@sdwebstar.co.uk";
}

/* Larger fonts for small screen widths */
@media screen and (max-width: 700px) {
  header#page_hdr h1 {
    font-size: 3.75vw;
  }

  h2 {
    font-size: 3.0vw;
  }

  h3 {
    font-size: 2.75vw;
  }

  p {
    font-size: 2.5vw;
  }

  li {
    font-size: 2.25vw;
  }

  footer#page_ftr {
    font-size: 3.25vw;
  }
}

@media screen and (max-width: 450px) {
  header#page_hdr h1 {
    font-size: 4.0vw;
  }

  h2 {
    font-size: 3.25vw;
  }

  h3 {
    font-size: 3.25vw;
  }

  p {
    font-size: 3.0vw;
  }

  li {
    font-size: 2.75vw;
  }

  footer#page_ftr {
    font-size: 3.75vw;
  }
}