@font-face {
  font-family: "Bridgnorth";
  src: url("/assets/fonts/bridgnorth/BRIDGE.woff") format("woff");
}
@font-face {
  font-family: "Minster";
  src: url("/assets/fonts/minster/minster1.woff") format("woff");
}
body {
  font-family: "Courier New", Courier, monospace;
  margin: 0px;
}

.center {
  text-align: center;
}

.stack-container {
  display: grid;
}
.stack-container > * {
  grid-area: 1/1;
}

.non-draggable {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.column-layout-column {
  width: 100%;
  height: fit-content;
}

.index-background-container {
  height: 0%;
  width: 0%;
  z-index: -10; /* sends the div behind all other content */
}
.index-background-container #index-background-bw {
  position: fixed; /* position relative to the viewport, stays in place when scrolling */
  width: 100dvw;
  height: 100dvh;
  width: 100vw;
  height: 100vh;
  background-image: url("/assets/img/other/index_backgrounds/black_white/bw_3.gif");
  z-index: -10; /* sends the div behind all other content */
  background-size: contain;
}

#index-columns {
  color: white;
  text-align: center;
}
#index-columns .window-header {
  top: 50%;
  padding: 0;
  border: 0;
  margin: 0;
  font-size: 2rem;
}
#index-columns #laptop-tp {
  background: transparent;
}
#index-columns #blue-window-right {
  right: 7%;
  background-image: url("/assets/img/other/index_backgrounds/colorful/color_1.gif");
  top: 10%;
  width: 20%;
  height: 50%;
}
#index-columns #blue-window-right .window-content-img {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  z-index: 2;
}
#index-columns #blue-window-left {
  left: 7%;
  background-image: url("/assets/img/other/index_backgrounds/colorful/color_1.gif");
  top: 10%;
  width: 20%;
  height: 50%;
}
#index-columns #blue-window-left .window-content-img {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  z-index: 2;
}

.index-center-column-content {
  display: flex;
  justify-content: center;
}
.index-center-column-content #blue-window-middle {
  top: 5%;
  width: 30%;
  padding: 0;
  border: 0;
  margin: 0;
  background-image: url("/assets/img/other/index_backgrounds/colorful/color_1.gif");
}

#starblog-index-columns {
  color: white;
}

.main-layout {
  margin: 0px;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.blog-layout {
  padding: 0;
  border: 0;
  margin: 0;
  color: white;
}

.blog-layout-content {
  display: flex;
  justify-content: center;
  padding: 2.5%;
  margin-top: 1rem;
  border-radius: clamp(2.5vh, 15%, 5vh) clamp(2.5vh, 15%, 5vh) clamp(2.5vh, 15%, 5vh) clamp(2.5vh, 15%, 5vh) / clamp(1.5vh, 35%, 5vh) clamp(1.5vh, 35%, 5vh) clamp(1.5vh, 35%, 5vh) clamp(1.5vh, 35%, 5vh);
}
.blog-layout-content a:link {
  color: #ff78dd;
}
.blog-layout-content a:visited {
  color: #eb58f8;
}
.blog-layout-content.blog-layout-content-background {
  background-color: rgba(0, 0, 0, 0.568);
}

.blog-sidebar {
  margin-top: 1rem;
}

.window {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.window .window-resizer {
  position: absolute;
  z-index: 1;
  width: 22px;
  height: 22px;
}
.window .window-resizer.corner {
  z-index: 2;
}
.window .window-resizer.corner.tl {
  cursor: nw-resize;
  top: -5px;
  left: -5px;
}
.window .window-resizer.corner.tr {
  cursor: ne-resize;
  top: -5px;
  right: -5px;
}
.window .window-resizer.corner.bl {
  cursor: sw-resize;
  bottom: -5px;
  left: -5px;
}
.window .window-resizer.corner.br {
  cursor: se-resize;
  bottom: -5px;
  right: -5px;
}
.window .window-resizer.t, .window .window-resizer.b {
  width: 100%;
  height: 14px;
}
.window .window-resizer.l, .window .window-resizer.r {
  width: 14px;
  height: 100%;
}
.window .window-resizer.t {
  cursor: n-resize;
  top: -5px;
}
.window .window-resizer.b {
  cursor: s-resize;
  bottom: -5px;
}
.window .window-resizer.l {
  cursor: w-resize;
  left: -5px;
}
.window .window-resizer.r {
  cursor: e-resize;
  right: -5px;
}
.window .window-body {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.window .window-body .window-topbar {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  width: 100%;
  height: 30px;
  align-items: center;
}
.window .window-body .window-content {
  width: 100%;
  height: 100%;
  flex: 1;
}
.window.style-apple-white {
  border-radius: 15px;
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}
.window.style-apple-white .window-body {
  border-radius: 15px;
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}
.window.style-apple-white .window-body .window-topbar {
  background-color: rgba(255, 255, 255, 0.6);
}
.window.style-apple-white .window-body .window-topbar .window-button {
  height: 14px;
  width: 14px;
  margin-right: 7px;
  border-radius: 3px 3px 3px 3px / 3px 3px 3px 3px;
  background: rgba(255, 20, 10, 0.6);
  text-align: center;
}
.window.style-apple-blue {
  border-radius: 15px;
  outline: 2px solid rgba(1, 34, 104, 0.555);
  outline-offset: 2px;
}
.window.style-apple-blue .window-body {
  border-radius: 15px;
  outline: 2px solid rgba(1, 34, 104, 0.555);
  outline-offset: 2px;
}
.window.style-apple-blue .window-body .window-topbar {
  background-color: rgba(1, 34, 104, 0.555);
}
.window.style-apple-blue .window-body .window-topbar .window-button {
  height: 14px;
  width: 14px;
  margin-right: 7px;
  border-radius: 3px 3px 3px 3px / 3px 3px 3px 3px;
  background: rgba(37, 116, 206, 0.7);
  text-align: center;
}
.window.style-apple-blue .window-body .window-topbar .window-button:hover {
  background: rgba(84, 178, 255, 0.7);
}
.window.style-apple-blue .window-body .window-topbar .window-button:active {
  background: rgba(112, 222, 255, 0.7);
}
.window.style-apple-blue .window-body .window-topbar:not(:has(.window-button:hover)):hover {
  background-color: rgba(0, 44, 138, 0.555);
}
.window.style-apple-blue .window-body .window-topbar:not(:has(.window-button:hover)):active {
  background-color: rgba(0, 55, 173, 0.555);
}
.window.style-blocky {
  background-color: rgb(122, 162, 248);
  border-radius: 8px;
  outline: 2px solid rgb(26, 48, 95);
}
.window.style-blocky .window-body {
  background-color: rgb(122, 162, 248);
  border-radius: 8px;
  outline: 2px solid rgb(26, 48, 95);
}
.window.style-blocky .window-body .window-topbar {
  background-color: rgb(26, 48, 95);
}
.window.style-blocky .window-body .window-topbar .window-button {
  height: 18px;
  width: 18px;
  margin-right: 7px;
  border-radius: 3px 3px 3px 3px / 3px 3px 3px 3px;
  background: rgb(26, 48, 95);
  text-align: center;
}
.window.style-frame {
  border-radius: 15px;
  outline: 2px solid rgba(255, 255, 255, 0.6);
}
.window.style-frame .window-body {
  border-radius: 15px;
  outline: 2px solid rgba(255, 255, 255, 0.6);
}
.window.style-frame .window-body .window-topbar {
  background-color: rgba(255, 255, 255, 0.6);
  height: 5px;
}
.window.style-none {
  border-radius: 15px;
}
.window.style-none .window-body {
  border-radius: 15px;
}
.window.style-none .window-body .window-topbar {
  height: 5px;
}
.window.style-blur {
  backdrop-filter: blur(15px);
}

.row-layout {
  display: grid;
  grid-auto-rows: max-content;
}
.row-layout .row-layout-row {
  width: 100%;
  height: auto;
}

.wordle-guess {
  display: flex;
  flex-direction: row;
  transition: opacity 0.5s ease-out;
}
.wordle-guess.fade-out {
  opacity: 0;
}
.wordle-guess .wordle-cell {
  height: 2.25rem;
  width: 2.25rem;
  font-size: 2rem;
  text-align: center;
  border: 1.5px solid rgba(0, 0, 0, 0);
}
.wordle-guess .wordle-cell.revealed {
  border: 1.5px solid black;
}
.wordle-guess .wordle-cell.uninitialized {
  background-color: white;
}
.wordle-guess .wordle-cell.correct {
  background-color: #6aaa64;
}
.wordle-guess .wordle-cell.present {
  background-color: #c9b458;
}
.wordle-guess .wordle-cell.incorrect {
  background-color: #787c7e;
}

.wordle-previous-guesses {
  display: flex;
  flex-direction: column-reverse;
}

.pre {
  white-space: pre;
}

.museum-row {
  display: grid;
  grid-template-rows: 1fr;
}
.museum-row .museum-piece-text {
  width: 1fr;
}
.museum-row .museum-piece {
  width: 2fr;
}

.eyeball-container {
  position: relative;
  width: 200px;
  height: 200px;
}

.eyeball {
  width: 200px;
  height: 200px;
  background: white;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  transform: scaleY(0);
  transform-origin: center;
  opacity: 0;
}
.eyeball.open {
  transform: scaleY(1);
  opacity: 1;
}

.iris {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pupil {
  width: 30px;
  height: 30px;
  background: black;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.heading {
  padding: 0;
  border: 0;
  margin: 0;
  margin-top: 2rem;
}

#header-component {
  background-color: rgb(68, 120, 233);
  display: grid;
  grid-template-columns: auto auto auto;
  position: sticky;
  top: 0;
  z-index: 100;
}

.footer {
  background-color: rgb(228, 144, 66);
  text-align: center;
}
.footer p {
  margin: 0;
  padding: 0;
}

.blog-text {
  font-size: 1.5rem;
  color: white;
  line-height: 2em;
  text-shadow: 0px 0px 3px black;
}

.blog-sticky-footer {
  width: 100%;
  height: 4vh;
  position: absolute;
  bottom: 0;
  left: 0;
}

.blog-img-container {
  max-width: 80%;
  min-width: 10em;
  margin-left: 1em;
  margin-right: 1em;
  border-radius: clamp(2vh, 25%, 5vh) clamp(2vh, 25%, 5vh) clamp(2vh, 25%, 5vh) clamp(2vh, 25%, 5vh) / clamp(2vh, 25%, 5vh) clamp(2vh, 25%, 5vh) clamp(2vh, 25%, 5vh) clamp(2vh, 25%, 5vh);
  border: 4px solid rgba(23, 0, 105, 0.61);
  display: grid;
  align-items: center;
  justify-items: center;
}

.blog-img-container-centered {
  max-width: 80%;
  min-width: 10em;
  margin-left: 1em;
  margin-right: 1em;
  border-radius: clamp(2vh, 25%, 5vh) clamp(2vh, 25%, 5vh) clamp(2vh, 25%, 5vh) clamp(2vh, 25%, 5vh) / clamp(2vh, 25%, 5vh) clamp(2vh, 25%, 5vh) clamp(2vh, 25%, 5vh) clamp(2vh, 25%, 5vh);
  border: 4px solid rgba(23, 0, 105, 0.61);
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  margin: 0;
  margin-top: 4%;
  margin-bottom: 4%;
  display: flex;
  justify-content: center;
}

.blog-img {
  border-radius: inherit;
  width: 100%;
  height: 100%;
}

.blog-header {
  justify-items: center;
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  height: auto;
  margin-top: 2.5vh;
  margin-bottom: 2.5vh;
  width: 100%;
  min-height: 10vh;
}
.blog-header .blog-header-center {
  background: rgba(8, 9, 63, 0.63) url("/assets/img/space/gumball_stars.gif");
  border: 4px solid rgba(23, 0, 105, 0.61);
  border-radius: clamp(2.5vh, 15%, 5vh) clamp(2.5vh, 15%, 5vh) clamp(2.5vh, 15%, 5vh) clamp(2.5vh, 15%, 5vh) / clamp(1.5vh, 35%, 5vh) clamp(1.5vh, 35%, 5vh) clamp(1.5vh, 35%, 5vh) clamp(1.5vh, 35%, 5vh);
  padding-bottom: 1vh;
  width: fit-content;
  height: 100%;
  grid-area: 2/2;
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  height: auto;
}
.blog-header .blog-header-center > p {
  font-size: 1.25rem;
  padding: 0;
  border: 0;
  margin: 0;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}
.blog-header .blog-header-center .blog-title {
  font-size: 2.5rem;
  min-height: 5vh;
  font-size: 10;
  grid-area: 1/2;
}
.blog-header .blog-header-center .blog-publish-date {
  min-height: 2.5vh;
  grid-area: 2/2;
}
.blog-header .blog-header-center .blog-update-date {
  min-height: 2.5vh;
  grid-area: 3/2;
}

@keyframes starblog-background-stars {
  from {
    background-position-y: 0px;
  }
  to {
    background-position-y: 468px;
  }
}
@keyframes starblog-background-clouds {
  from {
    background-position-y: 0px;
  }
  to {
    background-position-y: 900px;
  }
}
#blog-background-stars {
  position: fixed; /* position relative to the viewport, stays in place when scrolling */
  width: 100dvw;
  height: 100dvh;
  width: 100vw;
  height: 100vh;
  background-image: url("/assets/img/space/twinkling_stars_background.gif");
  z-index: -10; /* sends the div behind all other content */
  animation: starblog-background-stars 20s linear infinite;
  background-repeat: repeat;
  will-change: transform, filter;
  mix-blend-mode: screen;
}

#blog-background-clouds {
  position: fixed; /* position relative to the viewport, stays in place when scrolling */
  width: 100dvw;
  height: 100dvh;
  width: 100vw;
  height: 100vh;
  background-image: url("/assets/img/space/star_clouds.png");
  z-index: -10; /* sends the div behind all other content */
  animation: starblog-background-clouds 24s linear infinite;
  background-repeat: repeat;
  will-change: transform, filter;
  mix-blend-mode: screen;
}

.blog-sidebar-entry {
  padding: 0.25rem 0;
  width: 100%;
}
.blog-sidebar-entry:not(:last-child) {
  margin-bottom: 1rem;
}
.blog-sidebar-entry .blog-sidebar-entry-link {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  min-height: 6em;
  border-radius: 0.375rem;
  text-decoration: none;
  color: #ffffff;
  transition: background-color 0.175s ease-in-out;
}
.blog-sidebar-entry .blog-sidebar-entry-link:hover .blog-left-sidebar-entry-text-wrapper {
  transform: translateX(0);
  opacity: 1;
}
.blog-sidebar-entry .blog-sidebar-entry-link .blog-left-sidebar-entry-text-wrapper {
  flex: 1;
  padding: 0.5em 0.75em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateX(50%);
  transition: transform 0.25s cubic-bezier(0.7, 0.5, 0.05, 0.9), opacity 0.15s cubic-bezier(0.7, 0.5, 0.05, 0.9);
  text-align: left;
  overflow: hidden;
}
.blog-sidebar-entry .blog-sidebar-entry-link .blog-right-sidebar-entry-text-wrapper {
  flex: 1;
  padding: 0.5em 0.75em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.blog-sidebar-entry .blog-sidebar-entry-link .blog-center-sidebar-entry-text-wrapper {
  flex: 1;
  padding: 0.5em 0.75em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.blog-sidebar-entry .blog-sidebar-entry-link .blog-left-sidebar-entry-icon {
  width: 6em;
  height: 6em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  right: 0;
}
.blog-sidebar-entry .blog-sidebar-entry-link .blog-left-sidebar-entry-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.blog-sidebar-entry .blog-sidebar-entry-link .blog-right-sidebar-entry-icon {
  width: 6em;
  height: 6em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  left: 0;
}
.blog-sidebar-entry .blog-sidebar-entry-link .blog-right-sidebar-entry-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.blog-sidebar-entry .blog-sidebar-entry-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 0.0625em 0;
  overflow-wrap: break-word;
}
.blog-sidebar-entry .blog-sidebar-description {
  font-size: 1rem;
  color: #ffffff;
  margin: 0;
  overflow-wrap: break-word;
}
.blog-sidebar-entry .blog-sidebar-entry-date {
  font-size: 1rem;
  margin: 0.625rem;
  overflow-wrap: break-word;
}
.blog-sidebar-entry .blog-sidebar-entry-date.date-color-red {
  color: #fd5858;
}
.blog-sidebar-entry .blog-sidebar-entry-date.date-color-orange {
  color: #ffa256;
}
.blog-sidebar-entry .blog-sidebar-entry-date.date-color-yellow {
  color: #f0ff67;
}
.blog-sidebar-entry .blog-sidebar-entry-date.date-color-green {
  color: #7cff83;
}
.blog-sidebar-entry .blog-sidebar-entry-date.date-color-blue {
  color: #56b3ff;
}
.blog-sidebar-entry .blog-sidebar-entry-date.date-color-purple {
  color: #9f56ff;
}

.blog-sidebar {
  width: 90%;
  max-width: 100%;
  margin-left: 5%;
  margin-right: 5%;
  height: auto;
  min-height: min-content;
  border-radius: 0.5rem;
  padding: 0.25rem 0;
  background: rgba(8, 9, 63, 0.63) url("/assets/img/space/gumball_stars.gif");
  border: 4px solid rgba(23, 0, 105, 0.61);
  border-radius: clamp(2.5vh, 15%, 5vh) clamp(2.5vh, 15%, 5vh) clamp(2.5vh, 15%, 5vh) clamp(2.5vh, 15%, 5vh) / clamp(1.5vh, 35%, 5vh) clamp(1.5vh, 35%, 5vh) clamp(1.5vh, 35%, 5vh) clamp(1.5vh, 35%, 5vh);
}
.blog-sidebar .blog-sidebar-title {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.blog-sidebar .blog-sidebar-list {
  padding: 0;
  padding-left: 5%;
  padding-right: 5%;
  margin: 0;
  list-style: none;
}