@font-face {
  font-family: "Libre Baskerville";
  src: url("/assets/fonts/LibreBaskerville-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("/assets/fonts/LibreBaskerville-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("/assets/fonts/LibreBaskerville-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("/assets/fonts/HKGrotesk-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("/assets/fonts/HKGrotesk-Bold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("/assets/fonts/HKGrotesk-Italic.otf") format("opentype");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "HK Grotesk";
  src: url("/assets/fonts/HKGrotesk-BoldItalic.otf") format("opentype");
  font-weight: bold;
  font-style: italic;
}
.square {
  width: 50%;
  position: absolute;
  display: flex;
  height: 50vh;
  z-index: -1;
}

.top-left {
  background-color: #68BF72;
  top: 0;
  left: 0;
}

.top-right {
  background-color: #5EC6C7;
  top: 0;
  right: 0;
}

.bottom-left {
  background-color: #CF3B3F;
  bottom: 0;
  left: 0;
}

.bottom-right {
  background-color: #EEC22E;
  bottom: 0;
  right: 0;
}

.HomeContainer a:hover .square {
  background-color: #FFFFFF;
  transition-duration: 0.3s;
}

.HomeContainer p {
  font-family: "HK Grotesk", "Arial", sans-serif;
}

.HomeContainer a:hover .top-left p {
  color: #68BF72;
}

.HomeContainer a:hover .top-right p {
  color: #5EC6C7;
}

.HomeContainer a:hover .bottom-left p {
  color: #CF3B3F;
}

.HomeContainer a:hover .bottom-right p {
  color: #EEC22E;
}

.HomeContainer a:active .top-left {
  background-color: #68BF72;
}

.HomeContainer a:active .top-right {
  background-color: #5EC6C7;
}

.HomeContainer a:active .bottom-left {
  background-color: #CF3B3F;
}

.HomeContainer a:active .bottom-right {
  background-color: #EEC22E;
}

.HomeContainer p {
  color: #FFFFFF;
  text-align: center;
  margin: auto;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
  font-size: 50px;
}

.central-overlay {
  position: absolute;
  left: calc(50% - 50px); /* half the screen minus half the image width*/
  top: calc(50% - 25px); /* see above*/
  width: 100px;
}

/*Navigation Menu*/
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 500px) {
  .headerLEFT {
    display: none;
  }
  .headerRIGHT {
    display: none;
  }
  .headerMIDDLE {
    margin: 0 auto;
  }
}
/*Navigation left - Logo*/
.headerLEFT img {
  width: 60px;
}

.navIcon img {
  transition: all 0.3s ease;
}

.navIconabout:hover img {
  transform: rotate(-315deg);
}

.navIconvideo:hover img {
  transform: rotate(315deg);
}

.navIconwriting:hover img {
  transform: rotate(225deg);
}

.navIconproject:hover img {
  transform: rotate(-225deg);
}

.navIcon:active img {
  transform: rotate(180deg);
}

/*Navigation Middle - Menu*/
.headerMIDDLE ul {
  margin: 0;
  padding: 0;
}

.headerMIDDLE ul li {
  list-style: none;
}

.headerMIDDLE ul li a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  font-family: "HK Grotesk", "Arial", sans-serif;
  border-top: 1px solid;
  border-bottom: 1px solid;
  text-align: center;
}

.headerMIDDLE ul li a:hover {
  transition-duration: 0.3s;
  border-top-color: #222222;
  border-bottom-color: #222222;
  color: #222222;
}

@media screen and (min-width: 353px) {
  .headerMIDDLE ul li {
    float: left;
  }
  .headerMiddle ul li a {
    border-bottom: 1px solid;
  }
}
.hmproject ul li a {
  color: #CF3B3F;
}

.hmwriting ul li a {
  color: #EEC22E;
}

.hmvideo ul li a {
  color: #5EC6C7;
}

.hmabout ul li a {
  color: #68BF72;
}

.hmother ul li a {
  color: #222222;
}

.hmproject .current-menu-item a {
  color: #990000;
}

.hmwriting .current-menu-item a {
  color: #886600;
}

.hmvideo .current-menu-item a {
  color: #0094E0;
}

.hmabout .current-menu-item a {
  color: #007700;
}

.hmother .current-menu-item a {
  color: #000000;
}

/*Navigation Right - Search*/
.headerRIGHT img {
  width: 50px;
}

.headerRIGHT img:hover {
  opacity: 0.6;
  transition-duration: 0.2s;
}

.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.8); /* Black with a little bit see-through */
}

/* The content */
.overlay-content {
  position: relative;
  top: 46%;
  width: 80%;
  text-align: center;
  margin-top: 30px;
  margin: auto;
}

/* Close button */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  cursor: url("../cursor1.cur"), auto;
  color: white;
  font-family: HK Grotesk, sans-serif;
}

.overlay .closebtn:hover {
  color: #ccc;
  transition-duration: 0.2s;
}

/* Style the search field */
.overlay input[type=text] {
  padding: 15px;
  font-size: 17px;
  border: none;
  float: left;
  width: 70%;
  background: white;
}

.overlay input[type=text]:hover {
  background: #f1f1f1;
}

/* Style the submit button */
.overlay button {
  float: left;
  width: 20%;
  padding: 15px;
  background: #ddd;
  font-size: 17px;
  border: none;
}

.overlay button:hover {
  background: #bbb;
}

/* Footer */
footer a {
  color: #FFFFFF;
  font-family: "HK Grotesk", "Arial", sans-serif;
  text-decoration: none;
}

footer p {
  color: #FFFFFF;
  font-family: "HK Grotesk", "Arial", sans-serif;
}

footer h2 {
  color: #FFFFFF;
  font-family: "HK Grotesk", "Arial", sans-serif;
}

.svgabout svg .st0 {
  fill: #178043;
}

.svgwriting svg .st0 {
  fill: #a3883b;
}

.svgproject svg .st0 {
  fill: #753121;
}

.svgvideo svg .st0 {
  fill: #256094;
}

.svggrey svg .st0 {
  fill: #000000;
}

.tfabout {
  background-color: #27ae60;
}

.tfwriting {
  background-color: #e1b12c;
}

.tfproject {
  background-color: #c23616;
}

.tfvideo {
  background-color: #40739e;
}

.tfgrey {
  background-color: #212121;
}

.bfabout {
  background-color: #075528;
}

.bfwriting {
  background-color: #9a750e;
}

.bfproject {
  background-color: #7a1903;
}

.bfvideo {
  background-color: #163e61;
}

.bfgrey {
  background-color: #000000;
}

.site-footer {
  padding: 20px 50px;
  margin: 0;
  border: none;
}

.site-footer li {
  list-style: none;
}

.topfooter {
  max-width: 700px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

.footer-left {
  flex-basis: 20%;
  border-right: 1px solid #FFFFFF;
}

.footer-middle {
  padding-left: 25px;
  flex-basis: 35%;
  text-align: center;
}

.footer-right {
  flex-basis: 43%;
  text-align: center;
}

.footer-left a {
  text-decoration: none;
  line-height: 30px;
}

.footer-left a:hover {
  color: #222222;
  transition-duration: 0.2s;
}

.footer-left ul {
  padding: 0;
}

.footer-middle h2 {
  text-align: center;
}

.footer-middle p {
  text-align: center;
}

.footer-right h2 {
  text-align: center;
}

.footer-right p {
  text-align: center;
  width: 300px;
}

.footericons ul {
  margin: 0;
  padding: 0;
}

.footericons li {
  float: left;
  padding-right: 15px;
}

.lowerfooter {
  text-align: center;
  margin: 0;
  padding: 5px 0;
}

.footericons svg {
  width: 64px;
  height: 64px;
}

svg:hover .twitfill {
  fill: #a0d8fa;
  transition-duration: 0.3s;
}

svg:hover .youtfill {
  fill: #ff8c8c;
  transition-duration: 0.3s;
}

svg:hover .reddfill {
  fill: #ffaf91;
  transition-duration: 0.3s;
}

@media screen and (min-width: 715px) {
  .topfooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
@media screen and (max-width: 715px) and (min-width: 363px) {
  .footer-left {
    border: none;
    text-align: center;
  }
  #menu-footer-menu-links {
    padding-left: 0;
  }
  .footer-right {
    width: 100%;
    display: flex;
    margin: 0 auto;
    padding: 15px 5px;
  }
  .footer-right ul {
    text-align: center;
    margin: 0 auto;
    padding: 0px;
    display: table;
    overflow: hidden;
  }
}
@media screen and (max-width: 363px) {
  .footer-left {
    border: none;
    text-align: center;
  }
  #menu-footer-menu-links {
    padding-left: 0;
  }
  .footer-middle {
    display: none;
  }
  .footer-right {
    width: 100%;
    display: flex;
    padding: 15px 5px;
  }
  .footer-right li {
    margin: 0 auto;
    padding: 0;
  }
  .footer-right ul {
    padding: 0;
    margin: 0 auto;
  }
}
.pagetitlecontainer {
  text-align: center;
}

.pagetitlecontainer hr {
  margin: 4px 0;
}

.pagetitle {
  font-family: "HK Grotesk", "Arial", sans-serif;
  padding: 0;
  margin: 21px 0 0 0;
}

.pagesubtitle {
  font-family: "HK Grotesk", "Arial", sans-serif;
  font-style: italic;
  padding: 0;
  margin: 0 0 16px 0;
}

.pageTitleabout {
  color: #075528;
}

.pageTitlevideo {
  color: #163e61;
}

.pageTitlewriting {
  color: #9a750e;
}

.pageTitleproject {
  color: #7a1903;
}

.pageTitleGrey {
  color: #222222;
}

.pageSubtitleabout {
  color: #1B974F;
}

.pageSubtitlevideo {
  color: #40739E;
}

.pageSubtitlewriting {
  color: #CFA327;
}

.pageSubtitleproject {
  color: #C03A1B;
}

.pageSubtitleGrey {
  color: #222222;
}

.catDividerabout {
  color: #075528;
}

.catDividervideo {
  color: #163e61;
}

.catDividerwriting {
  color: #9a750e;
}

.catDividerproject {
  color: #7a1903;
}

.catDividerGrey {
  color: #222222;
}

.postContainer {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap to next line */
  gap: 6px; /* Allow items to wrap to next line */
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}

.postContainer a {
  text-decoration: none;
}

.postSquare {
  width: 200px; /* Set fixed width for each grid item */
  height: 200px; /* Set fixed height for each grid item */
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center;
  font-family: "HK Grotesk", "Arial", sans-serif;
}

.postSquare:hover {
  display: block;
  text-align: center;
}

.squareabout {
  background-color: #A7C6AB;
  color: #00CD17;
}

.squareproject {
  background-color: #FF9FA2;
  color: #CF0005;
}

.squarewriting {
  background-color: #FFEEB5;
  color: #DFAB00;
}

.squarevideo {
  background-color: #C5E3E3;
  color: #09C4C6;
}

.squareGrey {
  background-color: #969696;
  color: #000000;
}

.squareabout:hover {
  background-color: #68BF72;
  color: #FFFFFF;
  transition-duration: 0.2s;
}

.squareproject:hover {
  background-color: #CF3B3F;
  color: #FFFFFF;
  transition-duration: 0.2s;
}

.squarewriting:hover {
  background-color: #EEC22E;
  color: #FFFFFF;
  transition-duration: 0.2s;
}

.squarevideo:hover {
  background-color: #5EC6C7;
  color: #FFFFFF;
  transition-duration: 0.2s;
}

.squareGrey:hover {
  background-color: #212121;
  color: #FFFFFF;
  transition-duration: 0.2s;
}

.postExcerpt {
  margin-top: 0;
  font-size: 15px;
  padding: 20px 12px 0;
  margin-bottom: 12px;
  display: none;
  font-family: "HK Grotesk", "Arial", sans-serif;
}

.postHeader {
  margin: auto 0;
  text-align: center;
}

.postSquare:hover .postExcerpt {
  display: inline-block;
}

.postSquare:hover .postHeader {
  font-size: 18px;
  transition-duration: 0.2s;
}

@media screen and (max-width: 630px) {
  .postSquare {
    margin: 6px auto 0;
  }
}
@media screen and (min-width: 631px) {
  .postContainer {
    justify-content: center;
  }
  .postsquare {
    margin: 3px;
  }
}
.pagination {
  display: flex;
  justify-content: center; /* Center all links horizontally */
  align-items: center; /* Center all links vertically */
  margin: auto;
  text-align: center;
  margin: 0 0 20px 0;
  font-family: "HK Grotesk", "Arial", sans-serif;
}

.pagination a {
  text-decoration: none; /* Remove underline from links */
  padding: 5px 10px; /* Add padding to links for spacing */
  color: #222222;
  font-size: 15px;
  border-radius: 5px;
  margin: 0 1.5px;
}

.pagination .active {
  background-color: #BBBBBB;
  border-radius: 100%;
  padding: 5px;
  width: 15px;
  height: 15px;
  display: flex;
  justify-content: center; /* Center items horizontally */
  align-items: center;
}

.pagination a.active {
  font-weight: bold; /* Style active page link */
}

.pagination a:hover {
  background-color: #DDDDDD; /* Highlight link on hover */
  transition-duration: 0.2s;
}

.pagination a:after {
  transition-duration: 0.2s;
}

.AboutImageContainer {
  text-align: center;
  margin: 30px 0;
  user-select: none;
}

#aboutimage {
  max-height: 200px;
}

@media screen and (min-width: 701px) {
  #aboutimage {
    max-width: 700px;
  }
}
@media screen and (max-width: 700px) {
  #aboutimage {
    max-width: 100vw;
  }
}
#aboutimagetext {
  font-family: "HK Grotesk", "Arial", sans-serif;
  font-size: 23px;
}

.categoryName {
  color: #075528;
  text-decoration: underline;
  font-style: italic;
}

.centreDescription {
  text-align: center;
  font-style: italic;
  color: #444444;
}

.postTitle {
  text-align: center;
  padding-bottom: 0px;
  margin-bottom: 0;
}

.postContentContainer {
  line-height: 1.6;
  text-align: left;
}

.postContentContainer p {
  font-family: "Libre Baskerville", serif;
  font-size: 15px;
  padding: 0;
  margin: 12px 0;
}

.postContentContainer a {
  color: #000000;
  text-decoration: none;
  border-bottom: solid 0.5px #222222;
}

.postContentContainer a {
  color: #000000;
  text-decoration: none;
}

.postContentContainer a:hover {
  transition-duration: 0.2s;
  color: #FFFFFF;
  border-bottom: none;
}

.postContentContainerabout a {
  border-bottom: solid 0.5px #68BF72;
}

.postContentContainerproject a {
  border-bottom: solid 0.5px #CF3B3F;
}

.postContentContainervideo a {
  border-bottom: solid 0.5px #5EC6C7;
}

.postContentContainerwriting a {
  border-bottom: solid 0.5px #EEC22E;
}

.postContentContainerGrey a {
  border-bottom: solid 0.5px #222222;
}

.postContentContainerabout a:hover {
  background-color: #68BF72;
}

.postContentContainerproject a:hover {
  background-color: #CF3B3F;
}

.postContentContainervideo a:hover {
  background-color: #5EC6C7;
}

.postContentContainerwriting a:hover {
  background-color: #EEC22E;
}

.postContentContainerGrey a:hover {
  background-color: #222222;
}

.postContentContainer blockquote {
  margin: 0px 10px;
  padding: 10px 10px;
}

.postContentContainer .downloadButton {
  text-align: center;
  margin: 10px 0;
}

.postContentContainer .downloadButton a {
  font-size: 25px;
  padding: 10px;
  border-bottom: none;
  border-radius: 5px;
}

.postContentContainerabout .downloadButton a {
  background-color: #68BF72;
  color: #FFFFFF;
}

.postContentContainerproject .downloadButton a {
  background-color: #CF3B3F;
  color: #FFFFFF;
}

.postContentContainervideo .downloadButton a {
  background-color: #5EC6C7;
  color: #FFFFFF;
}

.postContentContainerwriting .downloadButton a {
  background-color: #EEC22E;
  color: #FFFFFF;
}

.postContentContainerGrey .downloadButton a {
  background-color: #222222;
  color: #FFFFFF;
}

.postContentContainerabout .downloadButton a:hover {
  background-color: #007700;
}

.postContentContainerproject .downloadButton a:hover {
  background-color: #990000;
}

.postContentContainervideo .downloadButton a:hover {
  background-color: #0094E0;
}

.postContentContainerwriting .downloadButton a:hover {
  background-color: #886600;
}

.postContentContainerGrey .downloadButton a {
  background-color: #000000;
}

.postContentContainer .downloadButton a:active {
  background-color: #FFFFFF;
}

.postContentContainerabout blockquote {
  background: #cafcd0;
  border-left: 10px solid #68BF72;
}

.postContentContainervideo blockquote {
  background: #ccfeff;
  border-left: 10px solid #5EC6C7;
}

.postContentContainerproject blockquote {
  background: #f5c9cb;
  border-left: 10px solid #CF3B3F;
}

.postContentContainerwriting blockquote {
  background: #fff3cc;
  border-left: 10px solid #EEC22E;
}

.postContentContainerGrey blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
}

.postContentContainer blockquote p {
  font-style: italic;
  padding: 10px;
  margin: 0;
}

.postContentContainer img {
  display: block;
  max-width: 600px;
  margin: 0 auto;
}

@media screen and (max-width: 600px) {
  .postContentContainer img {
    max-width: 80vw;
  }
}
.postContentContainer code {
  display: block; /* Ensures each <code> block is on its own line */
  padding: 10px;
  background-color: #282c34;
  border-radius: 5px;
  font-family: "Courier New", Courier, monospace; /* Use a monospaced font */
  font-weight: bold;
  font-size: 16px;
  color: #149414; /* Dark text color */
  overflow-x: auto; /* Allow horizontal scrolling if needed */
  white-space: pre-wrap; /* Preserve white spaces and wrap long lines */
  line-height: 1.5; /* Adjust line spacing for readability */
}

.postContentContainerabout code {
  color: #68BF72;
}

.postContentContainerproject code {
  color: #CF3B3F;
}

.postContentContainervideo code {
  color: #5EC6C7;
}

.postContentContainerwriting code {
  color: #EEC22E;
}

.postContentContainerGrey code {
  color: #1e1e1e; /* Light gray background */
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 20px;
}

table, th, td {
  border: 1px solid #ddd; /* Add borders to table, th, and td elements */
}

th, td {
  padding: 8px;
}

/* Alternate row colors for better readability */
tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* Media query for responsive layout */
@media (max-width: 768px) {
  table {
    max-width: 80vw;
    border: 0; /* Remove borders on small screens */
  }
  th,
  td {
    display: block; /* Display table cells as block elements */
    width: 100%; /* Full width for each cell */
  }
  th {
    text-align: center; /* Center-align table headers */
  }
}
.iFrameContainer {
  text-align: center;
  padding: 5px 0;
  margin: 0;
  border-top: solid 1px #000000;
  border-bottom: solid 1px #000000;
}

.iFrameContainer iframe {
  max-height: 337.5px;
  max-width: 600px;
}

@media (max-width: 601px) {
  .iFrameContainer iframe {
    max-width: 80vw;
    max-height: 45vw;
  }
}
.postSubtitle {
  font-size: 12px;
  color: #555555;
}

.interPostNavigation {
  margin-bottom: 50px;
}

.interPostNavigation a {
  font-family: "HK Grotesk", "Arial", sans-serif;
  padding: 3px 6px;
  border: 1px solid rgb(33, 33, 33);
  border-radius: 7.5px;
  text-decoration: none;
  color: #222222;
}

.interPostNavigation a:hover {
  color: #FFFFFF;
  background-color: #222222;
  transition-duration: 0.2s;
  border-color: rgba(33, 33, 33, 0);
}

.postNavNext {
  float: left;
}

.postNavPrev {
  float: right;
}

.munLost {
  max-width: 600px;
}

@media (max-width: 600px) {
  .munLost {
    max-width: 80vw;
  }
}
.munLostText {
  font-size: 25px;
  font-family: "Libre Baskerville", serif;
  text-align: center;
}

.ErrorStuff {
  text-align: center;
  margin-bottom: 60px;
}

.ErrorStuff p {
  font-family: "HK Grotesk", "Arial", sans-serif;
  font-size: 16px;
}

.errorStuffLink {
  text-decoration: none;
  color: #000000;
}

.ErrorStuff img {
  display: block;
  max-width: 600px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .ErrorStuff img {
    max-width: 80vw;
  }
}
p {
  font-family: "Libre Baskerville", serif;
}

a {
  cursor: url("../cursor1.cur"), auto;
}

.container {
  max-width: 700px;
  margin: 0 auto;
  padding-top: 10px;
}

body {
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 353px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/*# sourceMappingURL=main.css.map */