/* ---------- Basic page styling ---------- */
@import url('https://fonts.googleapis.com/css2?family=Bitcount+Prop+Single:wght@100..900&family=DotGothic16&family=Geist+Pixel&display=swap');

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}
h1 {
  font-family: "Bitcount Prop Single", system-ui, sans-serif;
  font-size: 32px;
}

p {
  font-family: "DotGothic16", sans-serif;
  font-size: 13px;
}

.about-page,
.about-page * {
  font-family: "Geist Pixel", sans-serif;
  font-size: 16px;
}

body {
  min-height: 100vh;
  margin: 0;

  background-color: #f7d5f7;
  background-image: url("https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExaWN2a3pzbnRqcGd0bXN6Njd2cDd1bHo3dnc2dGVjYWtid283dmU0eCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/jfwq6KHfwgLRe/giphy.gif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  font-family: "DotGothic16", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #263821;
}


/* ---------- General text and links ---------- */

center,
.center {
  text-align: center;
}

a {
  color: #3c5832;
}

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


/* ---------- Sidebar layout ---------- */

/* Container that holds all sidebars */
.sidebar-group {
  position: fixed;
  top: 25px;
  left: 25px;
}

/* Shared window-box styling */
.sidebar,
.mini-sidebar,
.wide-sidebar,
.box {
  background: #ffe6f2;
  border: 1px solid #618a50;
  border-radius: 5px;
  box-shadow: 2px 2px #3c5832;
}

/* Prevent images from overflowing their boxes */
.sidebar img,
.mini-sidebar img,
.wide-sidebar img,
.box img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* ---------- Regular sidebar ---------- */

.sidebar,
.sidebar-box {
  display: inline-block;
  width: 160px;
  vertical-align: top;
}

.sidebar {
  margin-right: 10px;
}

/* Container for stacked mini-sidebars */
.sidebar-box {
  margin-left: 10px;
}

.mini-sidebar {
  width: 160px;
  margin-bottom: 25px;
}


/* ---------- Wide sidebar ---------- */

.wide-sidebar {
  width: 340px;
  min-height: 150px;
  margin-top: 25px;
}


/* ---------- Box content ---------- */

.inner {
  padding: 0 10px 5px;
}


/* ---------- Title bars ---------- */

.title-bar,
.box-title-bar {
  background: #7aa469;
  color: white;
  font-weight: bold;
  padding: 3px 5px;
}

.box-title-bar {
  padding: 5px 7px;
}


/* Symbol in the top-right corner of a title bar */
.right {
  float: right;
  margin-right: 5px;
  font-family: "Bitcount Prop Single", system-ui,
  line-height: 12px;
}


/* ---------- Images ---------- */

.icon {
  border: 2px solid #80aa6f;
  border-radius: 50%;
}


/* ---------- Main content boxes ---------- */

.box {
  width: 500px;
  margin-top: 25px;
  margin-right: 25px;
  margin-bottom: 25px;
  margin-left: 400px;
}


/* ---------- Decorative quote ---------- */

.big-quote {
  position: fixed;
  top: 300px;
  left: 1050px;

  width: 666px;
  margin: 0;

  color: #3c5832;
  font-family: "Bitcount Prop Single", system-ui,;
  font-size: 66px;
  letter-spacing: 6px;
  word-spacing: 2px;
}


/* These work as either classes or custom HTML tags */

.wide,
wide {
  letter-spacing: 16px;
}

.midwide,
midwide {
  letter-spacing: 3px;
}


/* ---------- Mobile and smaller screens ---------- */

@media screen and (max-width: 900px) {
  body {
    padding: 15px;
    background-attachment: scroll;
  }

  .sidebar-group {
    position: static;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  .sidebar,
  .sidebar-box,
  .mini-sidebar,
  .wide-sidebar {
    display: block;
    width: 100%;
    max-width: 455px;
    margin: 0 auto 25px;
    text-align: left;
  }

  .box {
    width: 100%;
    max-width: 455px;
    margin: 0 auto 25px;
  }

  .big-quote {
    position: static;
    width: 100%;
    max-width: 455px;
    margin: 40px auto;
    text-align: center;
  }
}

/* =========================================
   ABOUT PAGE — COMPLETE LAYOUT OVERRIDE
   ========================================= */

body.about-page,
body.about-page * {
  box-sizing: border-box;
  font-family: "DotGothic16", sans-serif;
}

body.about-page {
  min-height: 100vh;
  margin: 0;
  padding: 40px 20px;

  background-color: #ffffff;
  color: #454545;

  font-size: 12px;
}


/* Main 600px layout container */

body.about-page .profile-layout {
  position: relative;

  width: 600px;
  height: 600px;

  margin: 40px auto;
  padding: 0;

  background: transparent;
  border: 0;
}


/* Layout background image */

body.about-page .profile-background {
  position: absolute;
  inset: 0;

  display: block;

  width: 600px;
  height: 600px;

  margin: 0;
  padding: 0;

  object-fit: contain;

  background: transparent;
  border: 0;
}


/* Scrollable About Me text */

body.about-page .profile-body {
  position: absolute;
  z-index: 2;

  top: 125px;
  left: 190px;

  width: 220px;
  height: 350px;

  margin: 0;
  padding: 5px;

  overflow-x: hidden;
  overflow-y: auto;

  background: transparent;
  border: 0;

  color: #454545;

  font-size: 12px;
  line-height: 1.4;
  text-align: justify;
}


/* Heading */

body.about-page .profile-body h1 {
  margin: 0 0 12px;

  color: #FF9999;

  font-family: "DotGothic16", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.2;
  text-align: left;
}


/* Paragraphs */

body.about-page .profile-body p {
  margin: 0 0 12px;

  color: #454545;

  font-family: "DotGothic16", sans-serif;
  font-size: 12px;
  line-height: 1.4;
}




/* Bold, italic, and underlined text */

body.about-page .profile-body b,
body.about-page .profile-body strong {
  color: #FF9999;
  font-weight: bold;
}

body.about-page .profile-body i,
body.about-page .profile-body em {
  color: #FFACC0;
  font-style: italic;
}

body.about-page .profile-body u,
body.about-page .profile-body em {
  color: #ACD7FF;
  text-decoration: underline;
}


/* Invisible navigation links over the image */

body.about-page .profile-links {
  position: static;

  margin: 0;
  padding: 0;
}

body.about-page .profile-links a {
  position: absolute;
  z-index: 3;

  display: block;

  margin: 0;
  padding: 0;

  overflow: hidden;

  color: transparent !important;
  font-size: 0 !important;
  text-decoration: none !important;

  background: transparent;
  border: 0;
}

body.about-page .profile-links a:hover,
body.about-page .profile-links a:focus {
  outline: 1px dashed #e83360;
}


/* Scrollbar */

body.about-page .profile-body {
  scrollbar-width: thin;
  scrollbar-color: #e9a7d1 transparent;
}

body.about-page .profile-body::-webkit-scrollbar {
  width: 8px;
}

body.about-page .profile-body::-webkit-scrollbar-track {
  background: transparent;
}

body.about-page .profile-body::-webkit-scrollbar-thumb {
  background: #e9a7d1;
  border: 2px solid transparent;
  border-radius: 10px;
  background-clip: padding-box;
}


/* Mobile scaling */

@media (max-width: 650px) {
  body.about-page {
    padding: 20px 0;
    overflow-x: hidden;
  }

  body.about-page .profile-layout {
    transform: scale(0.8);
    transform-origin: top center;

    margin-top: 20px;
    margin-bottom: -100px;
  }
}

@media (max-width: 500px) {
  body.about-page .profile-layout {
    transform: scale(0.6);
    margin-bottom: -220px;
  }
}

/* Cute 404 page */

.not-found-page {
  min-height: 100vh;
  margin: 0;
  padding: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.8) 2px, transparent 2px),
    #f7d5f7;

  background-size: 25px 25px;

  color: #6d456d;
  font-family: "DotGothic16", sans-serif;
}

.not-found-titlebar {
  padding: 8px 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: linear-gradient(to right, #d98bd9, #f2b8e8);
  border-bottom: 3px solid #b96cb9;

  color: #ffffff;
  font-family: "DotGothic16", sans-serif;
  font-size: 13px;
  font-weight: bold;
}

.not-found-content h1 {
  margin: 5px 0 15px;

  color: #a64d91;
  font-family: "DotGothic16", sans-serif;
  font-size: 25px;
  font-weight: normal;
}

.error-code {
  margin: 0;

  color: #e278ae;
  font-family: "DotGothic16", sans-serif;
  font-size: 72px;
  font-weight: bold;
  line-height: 1;
}
  
/* ==================================================
   BLOG PAGE — ONE SLIM SIDEBAR COLUMN
   ================================================== */

/* ---------- Blog sidebar: one vertical column ---------- */

.blog-page .sidebar-group {
  width: 190px;
}

.blog-page .sidebar-group .sidebar {
  display: block;
  width: 190px;
  margin: 0 0 18px 0;
}


/* Main blog column */
.blog-page main {
  width: 600px;
  max-width: calc(100vw - 285px);

  margin-left: 250px;
  padding-top: 1px;
}


/* Remove the homepage positioning from blog boxes */
.blog-page .box {
  width: 100%;

  margin-top: 25px;
  margin-right: 0;
  margin-bottom: 25px;
  margin-left: 0;
}


/* Slightly smaller sidebar text */
.blog-page .sidebar-group p {
  font-size: 12px;
  overflow-wrap: anywhere;
}


/* Blog archive links */
.blog-page .sidebar-group a {
  overflow-wrap: anywhere;
}


/* ---------- Mobile blog layout ---------- */

@media screen and (max-width: 900px) {
  .blog-page .sidebar-group {
    position: static;

    width: 100%;
    max-width: 600px;

    margin: 0 auto 25px;
  }

  .blog-page main {
    width: 100%;
    max-width: 600px;

    margin: 0 auto;
  }

  .blog-page .box {
    width: 100%;
    margin: 0 0 25px;
  }
}
  text-shadow: 3px 3px 0 #f5c8e5;
}