* {
  box-sizing: border-box;
}

@font-face {
  font-family: 'Kidzone';
  src: url("/KIDZONE_1.TTF") format('truetype');
}

:root {
  --title-font: "Kidzone", "Kidzone", sans-serif;
  --pagecolor: cornsilk;
  --sidebarcolor: #F7EBC5;
  --accent: #FE7238;
  --red: #d0391e;
  --green: #01C759;
  --blue: #018DC7;
  --purple: #5941E2;
  --violet: #8B40B4;
  --brown: #9E7156;
  --darkbrown: #6b4432;
  --homegrad: linear-gradient(to bottom, #FDC288 5%, #FD9751 50%, #FE7238 50%, #C54F26 100%);
  --projgrad: linear-gradient(to bottom, #7fe991 10%, #4FDF6F 50%, #01C759 50%, #008E3D 100%);
}

body {
  margin: 0;
  padding: 15px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #73B5F3;
  background-image: url(/graphix/tatobg2.png);
  animation: z 9993s linear infinite;
  background-attachment: fixed;
  color: white;
  font-family: "Proxima Nova", system-ui;
  font-size: 1.1em;
}

a {
  color: var(--blue);
}

hr {
  height: 1px;
  border: none;
  background-color: var(--darkbrown);
}

/* MAIN PART */
main {
  grid-area: main;
  padding: 10px 15px 10px 10px;
}

.main-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 0px;
  width: 100%;
  margin: 0 auto;
}

.container {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-areas: "sidebar main";
  width: 100%;
  max-width: 1250px;
  background-color: var(--pagecolor);
  border: 4px solid var(--darkbrown);
  border-radius: 10px;
  color: black;
  margin: 0;
  gap: 4px;
  padding: 4px;
  line-height: 1.3;
  box-shadow: 4px 4px 0 0 var(--darkbrown);
}

.title {
  font-size: 2.2em;
  color: var(--accent);
  margin: 0px auto 4px auto;
  font-family: var(--title-font);
}

.subtitle {
  font-size: 1.7em;
  color: var(--accent);
  margin: 30px auto 4px auto;
  clear: both;
}

.subsubtitle {
  font-size: 1.3em;
  color: var(--accent);
  margin: 26px auto 4px auto;
}

.scrollbox {
  overflow-y: auto;
  max-height: 180px;
  padding: 8px;
}

.inlinetext {
  display: inline;
}

.dottedline {
  display: inline;
  text-decoration: underline dotted;
  text-decoration-color: burlywood;
}

.left,
.right {
  margin-bottom: 6px;
}

.left {
  float: left;
  margin-right: 12px;
}

.right {
  float: right;
  margin-left: 12px;
}

/* SIDEBAR */
aside {
  grid-area: sidebar;
  width: 100%;
  padding: 5px 5px;
  margin-top: 0;
  background-color: var(--sidebarcolor);
  border-radius: 4px 0 0 4px;
}

sidebar-component {
  display: block;
}

.sidebar {
  padding: 16px;
  width: 260px;
  flex: 0 0 260px;
  order: 1;

}

.sidebar-wrapper {
  padding: 10px 16px 10px 10px;
}

.sidebar-wrapper a img {
  outline: none !important;
  border: none !important;
}

.sidebar-wrapper img {
  cursor: pointer;
}

.sidebar-wrapper img.hover-shrink:hover {
  transform: scale(0.97) !important;
}

.updateBox {
  overflow-y: auto;
  max-height: 200px;
  padding: 8px;
}

.date {
  font-size: 1.2em;
  color: var(--accent);
  font-style: italic;
  margin: 10px auto auto auto;
}

textarea.buttoncode {
  height: 30px;
  min-height: 30px;
  max-height: 160px;
  width: 224px;
  min-width: 160px;
  max-width: 224px;
  margin: 4px auto 4px auto;
}

.button-grid {
    text-align: center;
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
    line-height: 0;
}

.button-grid a {
    display: inline-block;
    margin: 4px;
    outline: none !important;
    text-decoration: none;
}

.button-grid img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
}

.sideHeaderFirst {
  font-size: 1.2em;
  color: var(--accent);
  margin: 10px 0;
}

.sideHeader {
  font-size: 1.2em;
  color: var(--accent);
  margin: 15px 0 5px 0;
}

.sideHeaderSmall {
  font-size: 1em;
  color: var(--accent);
  margin: 10px 0 5px 0;
}

.sideHeader,
.sideHeaderSmall,
.sideHeaderFirst {
  color: var(--pagecolor);
  background-color: var(--accent);
  padding: 6px 10px;
  margin: 12px 0 8px 0;
  display: block;
  font-size: 1.1em;
  font-family: var(--title-font);
  border-radius: 4px;
}

.sideHeaderFirst {
  background-color: var(--accent);
  padding: 6px 10px;
  margin: 2px 0 8px 0;
  display: block;
  font-size: 1.1em;
  font-family: var(--title-font);
}

.sideHeaderSmall {
  font-size: 0.95em;
  background-color: var(--accent);
  font-family: var(--title-font);
}

/* HEADER */
._heading {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow-x: hidden;
  padding: 6px 4px;
}

._heading img {
  flex: 0 0 auto;
  width: auto;
  height: 48px;
}

/* NAVIGATION BUTTONS */
nav-component {
  display: block;
}

.nav-col {
  flex-shrink: 0;
  margin: 24px 0 0 0px;
}

.nav>div {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
  min-width: 80px;
}

.nav a {
  text-decoration: none;
  color: white;
  display: flex;
  width: 100%;
  justify-content: center;
  font-family: var(--title-font);
}

.navbtn {
  display: flex;
  justify-content: center;
  align-items: center;
  float: right;
  height: 64px;
  font-weight: bold;
  margin: 0 0 10px 0;
  user-select: none;
  text-align: center;
  width: auto;
  padding: 0 12px;
  border-radius: 0 24px 24px 0;
}

.nav img {
  height: 56px;
}

.nav a:hover .navbtn {
  transform: translate(-3px, 0px);
  cursor: pointer;
}

.nav a:hover .navbtn.home img {
  content: url('/icon_proto2.ico');
}

.home {
  background: var(--homegrad);
}

.projects {
  background: var(--projgrad);
}

.gallery {
  background-image: linear-gradient(to bottom, #63C9F2 10%, #0EA5E2 50%, #018DC7 50%, #016D98 100%);
}

.comms {
  background-image: linear-gradient(to bottom, #998CE2 10%, #7764E1 50%, #5941E2 50%, #3A26C5 100%);
}

.gbook {
  background-image: linear-gradient(to bottom, #B98BD3 10%, #9D5DC0 50%, #8B40B4 50%, #6A328A 100%);
}

.explorebtn {
  background-image: var(--projgrad);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 16px;
  margin: 20px auto 10px auto;
  padding: 0 20px;
  height: 48px;
  color: white;
  text-decoration: none;
  box-sizing: border-box;
  width: 100%;
  font-size: 1.4em;
  font-family: var(--title-font);
}

.explorebtn:hover {
  transform: translate(-2px, 3px);
  cursor: pointer;
}

/* FOOTER */
.footer-thing {
  text-align: center;
  padding: 0px 8px;
}

.footery {
  text-align: center;
  padding: 0px 8px;
}

/* INDEX: BIO SHEET */
.main-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
}

.profile-info {
  flex: 0 0 40%;
}

.bio-text {
  flex: 1;
}

.multi-image-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.multi-image-section p {
  margin: 0;
  flex-shrink: 0;
}

.image-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.image-stack img {
  display: block;
}

.guestbook iframe {
  border: none;
  margin: 24px auto 4px auto;
}

img {
  max-width: 100%;
  height: auto;
}

/* ADVISORY IMAGE */
.floaty {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.floaty img {
  max-width: 120px;
  height: auto;
  display: block;
}

@media (max-width: 750px) {
  .main-wrapper {
    flex-direction: column !important;
    align-items: center;
    padding: 0;
    width: 100%;
  }

  nav-component {
    position: relative !important;
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0px;
    padding: 10px 0 0 0 !important;
    order: -1 !important;
    z-index: 10;
  }

  .nav-col {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .nav {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    margin: 0 !important;
    max-width: 100% !important;
    padding: 6px 0 0 0 !important;
    gap: 8px !important;
  }

  .nav > div {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  .navbtn {
    width: 100% !important;
    height: 44px;
    padding: 0 8px !important;
    border-radius: 16px 16px 0 0;
    line-height: normal;
    margin: 0 !important;
    font-size: 0;
    float: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .nav a:hover .navbtn {
    transform: translate(0px, 3px);
    cursor: pointer;
  }

  .nav img {
    height: 36px;
    width: auto;
  }

  .container {
    position: relative !important;
    z-index: 1 !important;
    grid-template-columns: 1fr;
    grid-template-areas: "main" "sidebar";
    max-width: 100%;
    width: 100% !important;
    margin: 0 auto !important;
    flex: none !important;
    padding: 6px;
    border-radius: 10px;
    min-height: auto;
    box-sizing: border-box;
  }

  ._heading img {
    height: 26px;
  }

  aside {
    grid-area: sidebar;
    width: 100%;
    padding: 6px;
    border-radius: 4px;
  }

  .profile-info,
  .bio-text {
    flex: 0 0 100%;
  }
}