body {
    background-color: lavender;
    color:midnightblue
}

main {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.5);
    padding: 10px;
}

html, body{
    margin: 0;
    padding: 0
}

header {
text-align: center;
background-color: lightgreen;
padding: 10px;
image-rendering: pixelated;
font-family: cursive;
color: #fff;
text-shadow: 1px 1px 2px midnightblue;
}

header .pfp {
    border: 10px solid hotpink;
    border-radius: 50%;
    width: 300px;
    height: 300px;
    background-image: url(./../img/kristy.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    margin: 0 auto;
}

header .pfp.mary-anne {
    border: 10px solid lightcoral;
    border-radius: 50%;
    width: 300px;
    height: 300px;
    background-image: url(./../img/mary-anne.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    margin: 0 auto;
}

h2 {
    font-size: 20px;
    font-family: cursive;
    background-color: hotpink;
    padding: 5px;
    color: #fff;
    text-shadow: 1px 1px 2px midnightblue;
}

img {
  display: block;
  margin: auto;
  width: 50%;
    border: 10px inset peru;
}

.caption {
    font-style: italic;
    text-align: center;
}

a {
    color:lightsalmon;
    font-weight: bold;
}

a:hover{
background-color:lightgreen;
color: #fff;
text-transform: uppercase;
}

footer{
    max-width: 800px;
    margin: 0 auto;
    background-color: lightgreen;
    padding: 10px;
    text-align: center;
    line-height: 0%;
}

footer a:hover{
background-color: lightsalmon;
text-transform: uppercase;
}

@media (max-width: 700px) {
    body {
font-size: 16px;
}
header {
    max-width: 600px;
    background-color: lightgreen;
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
}

footer{
    line-height:normal;
}

h2 {
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
}
}