/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
@font-face {
  font-family: 'Comic Sans MS Web';
  src: url('/fonts/Comic-Sans-MS.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Comic Sans MS Web';
  src: url('/fonts/Comic-Sans-MS-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

body {
  background-color: white;
  color: black;
  font-family: 'Comic Sans MS Web', 'Comic Sans MS', 'Chalkboard', 'ChalkboardSE-Regular', cursive;
  margin: 0;
}

/* Global styles */
img {
  max-width: 100%;
}

@media screen and (max-width: 768px) {
  h1 {
    font-size: 24px;
  }
}

/* Layout */
.layout {
  display: flex;
  min-height: 100vh;
}

#left-col {
  width: 220px;
  box-sizing: border-box;
  flex-shrink: 0;
  padding: 20px;
  background: #980000;
  color: white;
  transition: transform 0.2s ease;
}

#left-col a {
  color: white;
}

#left-col ul {
  padding-left: 15px;
}

#right-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 900px;
  box-sizing: border-box;
  padding: 20px;
  transition: transform 0.2s ease;
}

#right-col main {
  flex: 1;
}

@media screen and (max-width: 768px) {
  #left-col {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 999;
    transform: translateX(-100%); /* hidden off-screen */
    overflow-y: auto;
  }

  #left-col.open {
    transform: translateX(0);
  }

  #right-col.shifted {
    transform: translateX(220px); /* Offset from left by the same width of sidebar */
  }
}

aside img#yours-truly {
  padding: 10px 10px 20px 10px;
  background: white;
  border: 1px solid gray;
  box-shadow: 2px 2px 4px 0 #0000008c;
  transform: rotate(-1deg);
  box-sizing: border-box;
  transition: .25s transform ease-out;
}

aside img#yours-truly:hover {
  transform: rotate(10deg) scale(1.2);
}

/* Banner with main logo */
header .logo-container {
  display: flex;
  align-items: baseline;
  margin-top: -30px;
  margin-left: -20px;
}

header button#drawer-toggle {
  display: none;
  position: absolute;
  left: 20px;
  top: 20px;
}

header .logo-container h1, header .logo-container .site-title {
  font-size: 50px;
  color: black;
  margin: 10px 0;
  font-weight: bold;
  transform: translateY(-5px);
}

header .logo-container h1 span, header .logo-container .site-title span {
  color: #C81713;
}

@media screen and (max-width: 768px) {
  header .logo-container h1, header .logo-container .site-title {
    font-size: 30px;
  }
}

header .logo-container img {
  margin-right: 10px;
  transform: rotateY(180deg);
}  

header .tagline {
  font-size: 16px;
  margin-top: 10px;
}

/* The clickable button wrapper */
header .cabinet-btn {
  background: #c0c0c0;
  /* Classic Win95 grey */
  border: 3px outset #ffffff;
  padding: 6px 8px 4px 8px;
  cursor: pointer;
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  font-family: "MS Sans Serif", "Chicago", sans-serif;
  font-size: 10px;
  font-weight: bold;
  color: #000;
  box-shadow: 1px 1px 0 #808080;
}

header .cabinet-btn:active {
  border-style: inset;
  padding: 7px 7px 3px 9px;
  /* slight shift to sell the press */
}

header .cabinet-icon {
  display: block;
  width: 32px;
  height: 32px;
  background-image: url('/images/cabinet-sprite.png');
  background-repeat: no-repeat;
  background-size: 64px 32px;
  /* Full sprite sheet dimensions */
  background-position: 0 0;
  /* Default: left half (open state) */
  image-rendering: pixelated;
  /* Keeps it crispy on modern screens */
}

/* Closed state — shows the right half of the sprite */
header .cabinet-icon.closed {
  background-position: -32px 0;
}

header .drawer-label {
  margin-top: 2px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@media screen and (max-width: 768px) {
  header .logo-container {
    flex-direction: column;
    align-items: center;
  }

  header .logo-container h1 {
    text-align: center;
  }

  header button#drawer-toggle {
    display: flex;
    margin: 0 auto;
  }
}

/* Featured section */
section.featured-content {
  display: flex;
  height: 200px;
}

section.featured-content .featured-primary {
  width: 70%;
  background: gray;
}

section.featured-content .featured-secondary {
  flex: 1;
  display: flex;
  flex-direction: column;
}

section.featured-content .featured-secondary div {
  background: lightgray;
  flex: 1;
}

/* Featured section */
section.whats-hot .two-column-container {
  display: flex;
}

section.whats-hot .two-column-container .left-column {
  padding-right: 20px;
  margin-right: 20px;
  border-right: 1px solid black;
}

section.whats-hot .two-column-container > div {
  flex: 1;
}

/* Recent posts section */
section.recent-posts {
  margin-top: 50px;
}

section.recent-posts article h3 {
  margin-bottom: 10px;
}

section.recent-posts article h3 + p {
  margin-top: 0;
  font-style: italic;
  font-size: 14px;
}

/* Main content area */
.heading-tab {
  display: inline-block;
  font-size: 16px;
  text-transform: uppercase;
  background: #f2d046;
  padding: 5px 10px;
  margin-top: 0;
  margin-bottom: -1px;
  border-radius: 5px 5px 0 0;
}

.heading-tab + hr {
  border-top: 2px solid #f2d046;
  margin-top: 0;
}

/* Single post */
article.single-post .post-title {
  margin-bottom: 10px;
}

article.single-post .post-date {
  margin-top: 0;
  font-style: italic;
  margin-bottom: 40px;
}

/* Inline code */
code {
  background: #2b28bf;
  color: #c9d1d9;
  font-family: "Courier New", Courier, monospace;
  padding: 2px 6px;
  /* border: 1px solid #30363d; */
  border-radius: 2px;
}

pre {
  background: #2b28bf;
  color: #c9d1d9;
  font-family: "Courier New", Courier, monospace;
  padding: 20px;
  border: 2px ridge #30363d;
  overflow-x: auto;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5);
}

pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
}

/* Guestbook */
#guestbook-form {
  max-width: 300px;
}

#guestbook-form input, #guestbook-form textarea {
  width: 100%;
  margin-bottom: 10px;
}

/* Hidden field for humans */
#guestbook-form .phone-field {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}

/* Footer */
footer {
  margin-top: 100px;
  border-top: 1px solid black;
}

footer p {
  font-size: 13px;
}

#neocities-badge {
  display: block;
  margin-top: 20px;
  max-width: 140px;
}