/*
 = *==========  COLORS  ===========
 */
 
:root {
  --color-accent-primary: #7cb9d3;
  --color-accent-secondary: #fff;
  --color-accent-tertiary: #446473;
  --color-bar-primary: #1e1e1e;
  --color-bar-primary-hover: #272727;
  --color-bar-primary-active: #303030;
  --color-bar-secondary: #E9E9E9;
  --color-text-std: #242424;
}

/*
 *==========  ALL  ===========
 */

@font-face {
  src: url("/assets/fonts/SourceCodePro-Black.ttf") format("truetype");
  font-family: "SourceCodeProBlack";
  font-style: monospace;
}

* {
  margin: 0;
}

body>* {
  margin-left: 1em;
  margin-right: 1em;
}

body {
  max-width: 100ch;
  line-height: 1.6;
  font-size: 1em;
  padding: 0;
  margin: 0 auto;
  margin-bottom: 4em;
  
  background-color: #f5f5f5;
  font-family: sans-serif;
  color: var(--color-text-std);
}

@media only screen and (min-width: 48em) {
  body {
    font-size: 1.2em;
  }
}

body.kyloren {
  max-width: 128ch;
}

p {
  margin-top: 0.5em;
}

code, pre.codeblock, pre.code {
  background-color: #DBDBDB;
  border-radius: 2px;
  padding: 0.1em 0.3em;
  border: 1px solid #BFBFBF;
}

pre.codeblock, pre.code {
  padding: 0.5em 0.8em;
  border-radius: 4px;
}

/*
 ===========  NAV BAR  ===========
*/

.navbar {
  background-color: var(--color-bar-primary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  font-family: "SourceCodeProBlack";
  font-weight: bold;
  border-radius: 4px;
  margin: 0.3em;
}

.navbar .logo {
  display: block;
  color: var(--color-accent-primary);
  padding: 0 3%;
  margin: 0;
  font-size: 1.5em;
  font-weight: 1000;
  letter-spacing: 0;
}

.navbar a {
  color: var(--color-accent-primary);
  padding: 0.1em 1%;
  margin: 0.1em 0.5%;
  display: block;
  text-decoration: none;
  border-radius: 8px;
  letter-spacing: 0.04rem;
}

.navbar *:nth-child(4) {
  margin-right: 40%;
}

.navbar *:nth-child(5) {
  margin-left: -39%;
}

.navbar a:hover,
.navbar a:focus {
  background-color: var(--color-bar-primary-hover);
}

.navbar .active {
  background-color: var(--color-bar-primary-active);
}

/*
 ===========  HEADINGS  ===========
*/

h1, h2 {
  text-align: center;
  font-family: "SourceCodeProBlack";
  letter-spacing: -0.1rem;
}

h2 {
  margin-top: 1.5em;
  margin-bottom: 0.75em;
}

h3 {
  margin-top: 1em;
  margin-bottom: 0.5em;
}

/*
 ===========  REG ANCHOR  ===========
*/

a {
  text-decoration: none;
  color: var(--color-accent-tertiary);
}

a:hover,
a:focus {
  text-decoration: underline;
}

/*
 ===========  FANCY ANCHOR  ===========
*/

a.fancy {
  border: var(--color-accent-tertiary) solid 1px;
  border-radius: 4px;
  padding: 0.1em;
}

a:hover.fancy,
a:focus.fancy {
  text-decoration: none;
  background-color: var(--color-accent-tertiary);
  color: var(--color-text-std);
}

/*
 ===========  IMAGES  ===========
*/

.photo {
  overflow: hidden;
  border-radius: 4px;
  border: black solid 1px;
}

.banner {
  object-fit: cover;
  height: 16em;
}

.tallboi {
  width: auto;
  margin: 1em auto auto auto;
  display: block;
}

img {
  margin-top: 1em;
  width: 100%;
  max-height: 35em;
  object-fit: cover;
}

.vimeo-box {
  border-radius: 4px;
  border: black solid 1px;
  overflow: hidden;
  margin-top: 1rem;
}

.img-explainer {
  display: flex;
  flex-wrap: wrap;
}
@media only screen and (min-width: 48em) {
  .img-explainer {
    flex-wrap: nowrap;
  }
}

.img-explainer>img {
  border: 1px solid #888;
  border-radius: 4px;
  margin: 1em;
  object-fit: contain;
}

/*
 ===========  NAV LIST  ===========
*/

.navlist li ul {
  list-style-type: '-  ';
}

.navlist>div>h2 {
  margin-bottom: 0.5em;
}

.navlist {
  padding: 0;
}

/*
 ==========  RING NAV  ===========
*/

.ring-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 1em;
  border: 1px solid #c6c6c6;
  border-radius: 4px;
  padding: 0 0.5em;
}

.ring-nav * {
  margin: 0;
}

/*
 ===========  COLUMNS  ===========
*/

.cols {
  column-width: 20em;
  column-gap: 1em;
}

.cols>div {
  break-inside: avoid-column;
  display: inline-block;
  width: 100%;
}

.twocols {
  column-width: 24em;
}

.threecols {
  column-width: 16em;
}


/*
 ============== NOTES ============
*/

.warning {
  border-radius: 4px;
  border: 1px solid #9b9915;
  background: #e0dd4c;
}

.note {
  border-radius: 6px;
  text-align: center;
}

.note.weak::before {
  content: " [ i ] ";
  margin: 0;
  margin-right: 2em;
  width: 2em;
}

.note.weak {
  background-color: var(--color-bar-secondary);
  border: 1px solid #DDDDDD;
}

.note.strong::before {
  content: " [ ! ] ";
  margin: 0;
  margin-right: 2em;
}

.note.strong {
  background-color: #303030;
  border: 1px solid #AF0000;
  color: #FFFFFF;
}




span.buttbox {
  float: right;
}

span.buttbox>a {
  background-color: #9db3bd;
  padding: 0.1em 0.3em;
  border: 1px solid #8a9195;
  border-radius: 4px;
  color: #000000;
}

  
#map {
  height: 30em;
}

fieldset {
margin-top: 2em;
}


.movie-quote {
  font-style: italic;
}

.title-list .title {
  font-weight: bold;
  text-decoration: underline;
}

details {
  margin: 0.05em 0;
  border: 1px solid gray;
  padding: 0 0.5em;
  border-radius: 4px;
  background-color: #EEE;
}

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

sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

.threedee-wrapper, #threedee-wrapper {
  height: 80vh;
  background-color: black;
}

hr {
  margin-top: 1em;
  margin-bottom: 1em;
}

.right-link {
  float: right;
  font-size: 0.8em;
  font-family: "SourceCodeProBlack";
  background-color: #9db3bd;
  padding: 0.1em 0.3em;
  border: 1px solid #8a9195;
  border-radius: 4px;
  color: #000000;
}