:root {
    --sykesred: #a31616;
    --sykesbg: #f1f1f1;
    color: black;
    font-family: body-font;
}
@font-face {
    font-family: body-font;
    src: url(fonts/body-font.otf) format("opentype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: header-font;
    src: url(fonts/header-font.otf) format("opentype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: link-font;
    src: url(fonts/link-font.otf) format("opentype");
    font-weight: lighter;
    font-style: normal;
}
body {
    background-color: var(--sykesbg);
    height: 100%;
    margin: 0;
}
img {
    border-radius: 10%;
}
h1, h2 {
    color: var(--sykesred);
    font-family: header-font;
    text-transform: uppercase;
}
a {
    color: var(--sykesred);
    font-family: link-font;
}
a:hover {
    color: #841212;
}
section {
    text-align: center;
    padding-top: .8em;
}
nav a { 
    padding: 10px;
}
.validator {
    margin: auto;
    text-align: left;
}
.heropic {
  width: auto;
  height: 100px;
}
li {
  list-style-type: none;
}
thead {
  text-align: center;
}
.name-alias, .title {
  text-align: center;
}
tr {
  vertical-align: middle;
}
.me {
    border-radius: 50%;
    width: 200px;
    height: 200px;
}
.photo {
    border-radius: 50%;
    width: 200px;
    height: 200px;
}
.page-title {
    text-align: center;
}
iframe {
    max-width: 100%;
}
.bear {
    width: auto;
    height:  10em;

}
.back {
    position: fixed;
    top: 10px;
    left: 10px;
}
.footer-container {
    background-color: #f4f4f4;
}