@font-face {
  font-family: "spectral";
  src: url("/assets/fonts/Spectral/Spectral-Regular.ttf");
  font-weight: normal;
  font-style: normal;
}
:root {
  overscroll-behavior: none;
}
body {
  margin: 0px;
  margin-top: 68px;
  padding: 0px;
  background: #eaeaea;
  color: rgb(68, 68, 68);
  font-family: "spectral", "Times New Roman", Times, serif;
  background-size: cover;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.landingImgBox {
  opacity: 0;
  animation: fadeIn 2s ease-in-out forwards;
}

p,
h1,
h2,
h3,
h4 {
  margin: 0px;
  padding: 0px;
  line-height: 1.6;
}

h1,
h2,
h3,
h4 {
  font-weight: normal;
}

h2 {
  font-size: 16pt;
}

/* BLOCKS */

/* IMAGE BLOCK */
.image-block {
  max-width: 100%;      /* slider % can never overflow the column */
  margin: 10px 0;
  padding: 0;
}
.image-block:last-child { margin-bottom: 0; }
.image-block:first-child { margin-top: 0; }

.image-block img {
  display: block;
  width: 100%;          /* img always fills its figure */
  height: auto;         /* height follows aspect ratio */
}

/* Alignment — margins on the figure now (it's the sized element) */
.image-block--align-center { margin-inline: auto; }
.image-block--align-right   { margin-left: auto; }
.image-block--align-left    { margin-right: auto; }

/* Floats — figure already has its width from the inline style */
.image-block--float-left  { float: left;  margin: 0px 20px 15px 0; }
.image-block--float-right { float: right; margin: 0px 0 15px 20px; }

/* Square + border */
.image-block--square img { aspect-ratio: 1 / 1; object-fit: cover; }
.image-block--bordered img { border: 0.5px solid #364819; }

/* Mobile */
@media screen and (max-width: 700px) {
  .image-block { width: 100% !important; }
  .image-block--float-left,
  .image-block--float-right { float: none; margin: 10px 0; }
}

/* Clearfix on the container that holds the blocks (so floats don't leak out) */
.textBox::after {
  content: "";
  display: table;
  clear: both;
}

/* Clearfix for the container holding floated figures */
.textBox::after {
  content: "";
  display: table;
  clear: both;
}

.image-block--square img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Border */
.image-block--bordered img {
  border: 0.5px solid #364819;
}

.img-caption {
  text-align: center;
  margin-top: 10px;
  color: #364819;
  line-height: 1.6;
  font-size: 10pt;
}

/* VIDEO */

.video-block {
  max-width: 100%;
  margin: 10px 0;
  padding: 0;
}
.video-block:last-child { margin-bottom: 0; }
.video-block:first-child { margin-top: 0; }

.video-block video {
  display: block;
  width: 100%;
  height: auto;
}

.video-block--align-center { margin-inline: auto; }
.video-block--align-right   { margin-left: auto; }
.video-block--align-left    { margin-right: auto; }

.video-block--float-left  { float: left;  margin: 0px 20px 15px 0; }
.video-block--float-right { float: right; margin: 0px 0 15px 20px; }

.video-block--bordered video { border: 0.5px solid #364819; }

.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media screen and (max-width: 700px) {
  .video-block { width: 100% !important; }
  .video-block--float-left,
  .video-block--float-right { float: none; margin: 10px 0; }
}

/* NAV LINKS */

.italicNavLink {
  font-style: italic;
}

.intro {
  margin-top: 5px;
}

details {
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 0px;
}
details:last-child {
  margin-bottom: 0px;
}
details:first-child {
  margin-top: 0px;
}

summary {
  font-style: italic;
  font-size: 14pt;
}

summary:hover {
  cursor: pointer;
}

blockquote {
  border-left: 1px solid #364819;
  margin: 0px;
  padding-left: 10px;
  font-style: normal;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 15pt;
}

blockquote footer {
  font-style: italic;
  font-size: 11pt;
}

hr {
  border: none;
  border-bottom: 0.5px solid #364819;
}

.insideDetails {
  margin-top: 10px;
}
.insideDetails p {
  margin-bottom: 10px;
}


.nav {
  display: grid;
  grid-template-columns: 20% 1fr;
  width: 100%;
  background: #dce7cb;
  text-transform: lowercase;

  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 1000;
}

.nav div {
  padding: 15px;
  font-size: 11pt;
}

.nav .title {
  text-align: left;
  font-style: italic;
}

.nav .links {
  text-align: right;
}

.nav .links a {
  margin-left: 5px;
}

a {
  text-decoration: none;
  color: rgb(0, 127, 27);
  color: rgb(45, 45, 45);
  color: #0072b1;
  color: #364819;
  transition: 0.4s;
}

a:hover {
  color: rgb(0, 95, 21);
  color: #364819;
  text-decoration: underline;
}

.landingA {
  color: rgb(45, 45, 45);
  color: #364819;
}

main {
  margin: 15px;
}

.k-block-type-spacer {
  margin-top: 50px;
}

.aButtonBlock {
  box-sizing: border-box;
  font-size: 15pt;
  padding: 5px;
}

.buttonBlock {
  width: 100%;
}


.formBasic {
  width: 100%;
  font-size: 11pt;
  max-width: 500px;
  margin: 0px; 
  margin-top: 10px;
  margin-bottom: 10px;
}

.formBasic:last-child {
  margin-bottom: 0px;
}
.formBasic:first-child {
  margin-top: 0px;
}

.formBasic input,
.formBasic textarea {
  font-family: "spectral", "Times New Roman", Times, serif;
  box-sizing: border-box;
  width: 100%;
}

.formBasic .formDiv {
  margin-top: 10px;
}

.formBasic .formSubmit {
  margin-top: 10px;
}

.formBasic button, .aButtonBlock {
  font-family: "spectral", "Times New Roman", Times, serif;
  border: 0.5px solid #364819;
  background-color: #dce7cb;
  text-align: center;
  width: 100%;
  padding: 3px;
  padding-left: 5px;
  padding-right: 5px;
  color: #364819;
  font-size: 11pt;
}

.formBasic button:hover, .aButtonBlock:hover {
  background-color: #eaeaea;
  text-decoration: none;
  cursor: pointer;
}

.buttonBlock:hover {
  text-decoration: none;
}

.formBasic input:focus,
.formBasic textarea:focus {
  border: 0.5px solid #364819;
  outline: none;
}

.formBasic fieldset,
.formBasic input,
.formBasic textarea {
  border: 0.5px solid #dce7cb;
}

.formBasic legend,
.formBasic label {
  color: #364819;
}

.formBasic legend {
  font-style: italic;
}


.contentGrid {
  display: grid;
  grid-template-columns: 1fr 30vw;
  gap: 10px;
  width: 100%;
  font-size: 11pt;
  line-height: 1.6;
}

.contentBox {
  max-height: 100%;
  overflow: auto;
}

.header {
  position: sticky;
  top: 0;

  background: #dce7cb;
  padding: 15px;
  z-index: 10;
  border-bottom: 0.5px solid #364819;
}

.textBox {
  background: rgb(250, 250, 250);
  padding: 15px;
  max-height: 65vh;
  height: 100%;
  overflow: auto;
}

.mediaBox,
.profilePicBox {
  background: #dce7cb;
  padding: 5px;
  position: relative;
}

.landingImg {
}

.landingImgBox {
  background: #dce7cb;
  width: 30vw;
}

.landingImgSrc {
  width: 100%;
  height: 100%;
  display: block;
}

.overlay:hover,
.postPic:hover,
.mediaBox:hover,
.mediaBox:hover img {
  cursor: pointer;
}

.demo-bg {
  opacity: 0.3;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  z-index: -100;
}

@media screen and (max-width: 600px) {
  .contentGrid {
    grid-template-columns: 1fr;
  }
  .nav {
    grid-template-columns: 30% 1fr;
  }
  .contentBox {
    max-height: 100%;
    overflow: auto;
  }
  .landingImgBox {
    background: #dce7cb;
    width: 100%;
  }
  .landingImg {
    order: 2;
  }
  .textBox { 
    max-height: 100%;
    height: 100%;
  }
}