:root {
  --head-height: 127px;
  --foot-height: 87px;
  --foot-height-500: 128px;
  --head-height-500: 115px;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

body {
  font-family: "Libre Franklin", sans-serif;
  font-size: 16px;
  background-color: #C1E1C1;
  color: #333333;
  overflow-y: scroll;
}

header {
  background-color: #FFFFCC;
  position: fixed;
  width: 100%;
  z-index: 100;
  border-bottom: 1px solid #333333;
}

main {
  position: relative;
  width: 100%;
  top: var(--head-height);
  min-height: calc(100vh - var(--head-height) - var(--foot-height));
}

main .container {
  flex-direction: column;
  padding: 25px;
}

footer {
  position: relative;
  background-color: #333333;
  color: #FFFFFF;
  font-size: 1.1rem;
  top: var(--head-height);
}

footer section {
  padding: 25px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

footer a {
  color: #FFFFFF;
}

h1 {
  font-size: 2rem;
  line-height: 1.5;
  font-weight: 600;
}

h2 {
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: 550;
}

h3 {
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 600;
}

p {
  font-size: 1.1rem;
  line-height: 1.5;
  margin: 10px 0;
}

ul {
  font-size: 1.1rem;
  line-height: 1.5;
  margin: 0 0 0 20px;
}

a {
  font-size: 1.1rem;
  text-decoration: none;
  color: #000000;
}

strong {
  font-weight: 600;
}

.container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  display: flex;
}

header .container {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#title div {
  display: flex;
  flex-direction: column;
  padding: 25px 20px;
}

#title span:first-child {
  font-size: 2.2rem;
  line-height: 1.5;
  font-weight: 550;
}

#title span:last-child {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
}

#nav-bar ul {
  display: flex;
  list-style-type: none;
}

#nav-bar li {
  margin: 0 10px;
  text-align: right;
}

#nav-bar a {
  font-size: 1.1rem;
}

#nav-bar a:hover { color: #AAAAAA; }
#nav-bar a:active { color: #000000; }
#nav-bar a.current { color: #000000; font-weight: 600; }

/* index.html style */

#welcome {
  display: flex;
  flex-direction: row;
}

#welcome img {
  max-width: 300px;
  border-radius: 10px;
  margin: 0 25px;
}

#schedule {
  min-height: calc(100vh - var(--head-height) - var(--foot-height));
}

#schedule h1 {
  border-top: 1px solid #333333;
  margin: 20px 0 0 0;
  padding: 20px 0 0 0;
}

#schedule article {
  display: flex;
  flex-direction: row;
  border-top: 1px solid #AAAAAA;
  margin: 10px 10px;
  padding: 25px 10px;
  font-size: 1.1rem;
}

#schedule div {
  display: flex;
  flex-direction: column;
  margin: 0 25px;
}

#schedule img {
  border-radius: 10px;
  width: 250px;
  height: 250px;
}

#schedule a {
  color: #000000;
  text-decoration: underline;
}

#schedule span {
  margin: 10px 0 0 0;
}

.icon {
  text-decoration: none;
  font-size: 1.1rem;
  line-height: 2;
}

.icon:before {
  font-family: "Material Icons";
  position: relative;
  margin-right: 10px;
  top: 3px;
}

.email:before { content: "\e0be"; }
.phone:before { content: "\e0cd"; }
.location:before { content: "\e0c8"; }
.document:before { content: "\e873"; }
.shop:before { content: "\e8cc"; }

/* archetypes.html style */

#archetypes h2 {
  margin: 10px 0 0 0;
  padding: 20px 0 0 0;
  border-top: 1px solid #AAAAAA;
}

/* courses.html style */

#courses {
  display: flex;
  flex-direction: column;
}

#courses a {
  color: #000000;
}

#courses div > a {
  max-width: 130px;
}

#courses a {
  max-width: 320px;
}

#courses h2 {
  margin: 50px 0 0 0;
}

#courses article > div {
  display: flex;
  flex-direction: row;
  margin: 10px 0;
}

#courses div > div {
  display: flex;
  flex-direction: column;
  margin: 0 25px;
}

#courses img {
  max-width: 200px;
  max-height: 200px;
  border-radius: 20px;
}

.button {
  background-color: #FFFFCC;
  padding: 10px;
  margin: 10px 0 0 0;
  border-radius: 5px;
  font-weight: bold;
  display: inline-block;
}

/* bones.html style */

#bones div {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 10px 0;
}

#bones img {
  max-width: 400px;
  border-radius: 30px;
}

#bones div p {
  margin: 0 100px 0 50px;
}

/* books.html style */

#books article {
  display: flex;
  align-items: flex-start;
  margin: 60px 0;
}

#books img {
  max-width: 200px;
  border-radius: 10px;
}

#books div {
  margin: 0 50px;
}

/* events page style */

.event article {
  margin-bottom: 15px;
}

.event img {
  margin: 10px;
  border: 3px solid #000000;
}

.event div {
  display: flex;
  flex-direction: column;
}

.event a {
  text-decoration: underline;
}

/* embedded youtube video responsive resizing */

.event .video {
  position: relative;
  padding-bottom: 55%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video iframe, .video object, .video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  src: url('/assets/fonts/libre-franklin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 25% 151%;
  font-display: swap;
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  src: url('/assets/fonts/icons-round.woff2') format('woff2');
  font-display: swap;
}

@media ( max-width: 950px ) {
  
  #nav-bar ul { flex-direction: column; align-items: flex-end; }
  #nav-bar li { margin: 2px 10px; }
  #bones div p { margin: 0 50px; }

}

@media ( max-width: 750px ) {

  #welcome { flex-direction: column; }
  #schedule img { display: none; }
  #bones div { flex-direction: column; align-items: flex-start; }
  #bones div p { margin: 10px 0 25px 0; max-width: 400px;}
  #books article { flex-direction: column; align-items: flex-start; }
  #books div { margin: 20px 0 0 0; }

}

@media ( max-width: 500px ) {

  main { min-height: calc(100vh - var(--head-height-500) - var(--foot-height-500)); }
  #schedule { min-height: calc(100vh - var(--head-height-500) - var(--foot-height-500)); }
  #nav-bar a { font-size: 0.9rem; }
  #title div { padding: 10px; }
  #title span:first-child { font-size: 1.5rem; }
  #title span:last-child { font-size: 0.9rem;}
  footer section { flex-direction: column; align-items: flex-start; }
  footer span { margin: 5px 0; }
  #bones img { max-width: 300px; max-height: 200px; }
  #courses article > div { flex-direction: column; }
  #courses div > div { margin: 0; }
  #courses h2 { margin: 30px 0 0 0; }
  #courses p { margin: 10px 0; }

}

@media ( max-width: 400px ) {

  #title span:first-child { font-size: 1.3rem; }
  #title span:last-child { font-size: 0.8rem;}

}