a {
  color: #0000A7;	
}

@font-face {
  font-family: PTSerif;
  src: url(../fonts/PTSerif-Regular.ttf);
}
@font-face {
  font-family: Neucha;
  src: url(../fonts/Neucha-Regular.ttf);
}
@font-face {
  font-family: Caveat;
  src: url(../fonts/Caveat-VariableFont_wght.ttf);
}
@font-face {
  font-family: Angeme;
  src: url(../fonts/Angeme.ttf);
}
@font-face {
  font-family: Czizh;
  src: url(../fonts/Czizh.ttf);
}
@font-face {
  font-family: Equilibrist;
  src: url(../fonts/Equilibrist.ttf);
}
@font-face {
  font-family: Gnocchi;
  src: url(../fonts/Gnocchi.ttf);
}
@font-face {
  font-family: Oprah;
  src: url(../fonts/Oprah.ttf);
}

html {
  font-family: PTSerif;
}

.page-title {
  font-family:verdana
}
.page-title-inline {
  display: inline;
  margin-top: 0;
}

:root {
  --sidebar: clamp(180px, 22vw, 260px);
  --gap: 32px;
}

.wrapper {
  display: flex;
  align-items: flex-start;
  margin-left: calc(var(--sidebar) + var(--gap));
}
@media (max-width: 860px) {
  .wrapper {
    margin-left: 1em;
  }
}

.bar {
  align-self: start;
  text-align: center;
  padding: 2rem 1rem;
  color: rgba(255,255,255,.5);
  background-color: rgb(240, 245, 255);
  text-align: left;
}
@media (min-width: 48em) {
  .lside {
    position: fixed;
    width: var(--sidebar);
    top: 0;
    left: 0;
    bottom: 0;  
  }
}
@media (min-width: 48em) {
  .rside {
    width: var(--sidebar);
    flex-shrink: 0;
  }
}

.content {
  flex: 1;
  max-width: 900px;
  margin-right: var(--gap);
}

.container {
  max-width: 28rem;
}
@media (min-width: 38em) {
  .container {
    max-width: 30rem;
  }
}
@media (min-width: 56em) {
  .container {
    max-width: 36rem;
  }
}

.container-masthead {
  background-color: rgb(240, 245, 255);
}
.masthead {
  padding-top: 0.5em;
  padding-bottom: 0rem;
  margin-bottom: 0rem;
  border-bottom: 1px solid #eee;
  background-color: rgb(240, 245, 255);
}
.masthead-title,
.masthead-title a {
  font-family: Oprah;
  font-size: 1.4em;
  margin-top: 0;
  margin-bottom: 0;
  color: #00008B;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  white-space: nowrap;
}
@media (max-width: 1016px) {
  .masthead-title {
	font-size: 1em;
  }
  .masthead-subtitle {
	font-size: 0.8em;
  }
}
.masthead-subtitle,
.masthead-subtitle a {
  font-family: Oprah;
  margin-top: 0;
  margin-bottom: 0;
  color: #505050;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

.bottom {
  padding-top: 0.5rem;
  padding-bottom: 1rem;
  margin-top: 0.5rem;
  border-top: 1px solid #eee;
  background-color: rgb(237, 237, 237);
}

.over {
  font-family: Neucha;
  position: absolute;
  bottom: 0.2em;
  left: 0.4em;
  color: white;
  font-size: 2em;
  text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
}
.over-r {
  font-family: Neucha;
  color: black;
  font-size: 2em;
  text-align: center;
  margin-bottom: 0.2em;
  margin-right: 3em;
}
.start {
  font-family: Neucha;
  color: black;
  font-size: 2em;
}
.small {
  font-size: 1em;
}

.mobile {
  display: none;
}
.desktop {
  display: block;
}
@media (max-width: 860px) {
  .desktop {
    display: none;
  }
  .mobile {
    display: block;
  }
}

.underline {
  text-decoration: underline;
}

ul {
  list-style-type: disc;
  margin: 1;
  padding: 1;
}

.list li {
  list-style-type: none;
}

.sublist li {
  list-style-type: none;
}
.sublist li:before {
  content: "> ";
}

.contents {
  background-color: rgb(237, 237, 237);
  padding: 1% 3% 1% 3%;
  border: 0.05em solid rgb(227, 227, 227);
}

.link {
  font-weight: normal; 
  color: rgb(100, 100, 180);
  background-color: rgb(237, 237, 250);
  padding: 1% 3% 1% 3%;
  border: 0.05em solid rgb(227, 227, 227);
}

.navigation, 
.navigation a {
  text-align: center;
  font-size:18px;
  color: #505050;
}

/* Body text */
p {
  text-align: justify;
}

/* Quotes */
blockquote {
  color: rgb(110, 110, 110);
}
@media (min-width: 30em) {
  blockquote {
    padding-right: .5rem;
  }
}

img {
  margin: 2%;
}