/* FONT IMPORT */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

@font-face {
  font-family: "mssansserif";
  src: url("fonts/SpecialElite.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
  
/* -------------------------------------------------------- */
/* VARIABLES */
/* -------------------------------------------------------- */

/* Variables are used like this: var(--text-color) */
:root {
  /* Background Colors: */
  --background-color: #000000;
  --content-background-color: #ffffff;
  --sidebar-background-color: #ffffff;

  /* Text Colors: */
  --text-color: #000000;
  --sidebar-text-color: #000000;
  --link-color: #e80000;
  --link-color-hover: #ff8a8a;
  --header-color-hover: #ff8a8a;

  /* Text: */
  --font: "mssansserif", sans-serif;
  --heading-font: "mssansserif", sans-serif;
  --font-size: 16px;

  /* Other Settings: */
  --margin: 10px;
  --padding: 10px;
  --border: 0px solid #000000;
  --round-borders: 0px;
  --sidebar-width: 200px;
  


}

/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  font-size: var(--font-size);
  margin: 0;
  padding: var(--margin);
  color: var(--text-color);
  font-family: var(--font);
  line-height: 1.2;
  background: var(--background-color);
  background-image: url("");
  
}

::selection {
  /* (Text highlighted by the user) */
  background: rgba(0, 0, 0, 0.2);
}

mark {
  /* Text highlighted by using the <mark> element */
  text-shadow: 1px 1px 4px var(--link-color);
  background-color: inherit;
  color: var(--text-color);
}

/* Links: */
a {
  text-decoration: underline;
}

a,
a:visited {
  color: var(--link-color);
}

a:hover,
a:focus {
  color: var(--link-color-hover);
  text-decoration: none;
}

/* -------------------------------------------------------- */
/* LAYOUT */
/* -------------------------------------------------------- */

.layout {
  width: 1000px;
  display: grid;
  grid-gap: var(--margin);
  grid-template: 
  "header header" auto 
  "leftSidebar main" auto 
  "footer footer" auto 
  / var(--sidebar-width) auto;
  /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}


/* Hard drop shadow for main boxes */
header,
main,
aside,
footer {
  box-shadow: var(--box-shadow);
}

main {
  grid-area: main;
  overflow-y: auto;
  padding: var(--padding);
  background: var(--content-background-color);
  border: var(--border);
  border-radius: var(--round-borders);
}



/* -------------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------------- */



header {
  grid-area: header;
  font-size: 1.2em;
  border: var(--border);
  border-radius: var(--round-borders);
  background: var(--content-background-color);
  
   display: flex;
  align-items: center;
  gap: 20px;
  padding: var(--padding);
}

.nav-logo {
  display: block;
  width: 300px;
  height: 50px;
  object-fit: contain;
  flex-shrink: 0;
  transform: translateY(10px);
  transform: translateX(0px);
}

.header-content {
  padding: var(--padding);
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.5em;
  font-weight: normal;
}
  
.header-title {
  font-family: var(--heading-font);
  font-size: 1.5em;
  font-weight: normal;
}

.header-image img {
  width: 100%;
  height: 100%;
}



/* -------------------------------------------------------- */
/* SIDEBARS */
/* -------------------------------------------------------- */

aside {
  grid-area: aside;
  border: var(--border);
  border-radius: var(--round-borders);
  overflow: hidden;
  background: var(--sidebar-background-color);
  padding: var(--padding);
  color: var(--sidebar-text-color);
}

.left-sidebar {
  grid-area: leftSidebar;
}

.right-sidebar {
  grid-area: rightSidebar;
}

.sidebar-title {
  font-weight: bold;
  font-size: 1.2em;
  font-family: var(--heading-font);
}

.sidebar-section:not(:last-child) {
  margin-bottom: 3em;
}

.sidebar-section ul,
.sidebar-section ol {
  padding-left: 1.5em;
}

.sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) {
  margin-top: 10px;
}

/* Sidebar Blockquote: */

.sidebar-section blockquote {
  background: rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin: 1em 0;
  border-radius: 10px;
  overflow: hidden;
}

.sidebar-section blockquote > *:first-child {
  margin-top: 0;
}

.sidebar-section blockquote > *:last-child {
  margin-bottom: 0;
}

/* Site Button: */

.site-button {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-button textarea {
  font-family: monospace;
  font-size: 0.7em;
}

/* -------------------------------------------------------- */
/* FOOTER */
/* -------------------------------------------------------- */

footer {
  grid-area: footer;
  border: var(--border);
  border-radius: var(--round-borders);
  overflow: hidden;
  font-size: 0.75em;
  padding: 15px;
  background: var(--content-background-color);
  display: flex;
  justify-content: center;
}

footer a,
footer a:visited {
  color: var(--link-color);
}

footer a:hover,
footer a:focus {
  color: var(--link-color-hover);
}

/* -------------------------------------------------------- */
/* NAVIGATION */
/* -------------------------------------------------------- */

nav {
  margin-bottom: 3em;
}

nav .sidebar-title {
  margin-bottom: 0.5em;
}

nav ul {
  margin: 0 -5px;
  padding: 0;
  list-style: none;
  user-select: none;
}

nav ul li {
  margin-bottom: 0;
}

nav > ul li > a,
nav > ul li > strong {
  display: inline-block;
}

nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
  padding: 5px 10px;
}

nav > ul li > a.active,
nav > ul li > details.active summary {
  font-weight: bold;
}

nav ul summary {
  cursor: pointer;
}

nav ul ul li > a {
  padding-left: 30px;
}

/* NAVIGATION IN HEADER */

header nav {
  margin-bottom: 0;
}

header nav ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

header nav ul li {
  position: relative;
}

header nav ul li:first-child > a {
  padding-left: 0;
}

header nav ul li:last-child > a {
  padding-right: 0;
}



/* Subnavigation (Drop-Down): */

header nav ul ul {
  background: var(--content-background-color);
  display: none;
  position: absolute;
  top: 100%;
  left: 10px;
  padding: 0.5em;
  z-index: 1;
  border: var(--border);
  min-width: 100%;
  box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
}

header nav ul li:hover ul,
header nav ul li:focus-within ul {
  display: block;
}

header nav ul li strong {
  color: var(--link-color);
  text-decoration: underline;
  font-weight: normal;
}

header nav ul ul li a {
  display: block;
  padding-left: 0;
  padding-right: 0;
}

/* -------------------------------------------------------- */
/* CONTENT */
/* -------------------------------------------------------- */

main {
  line-height: 1.5;
}

main a,
main a:visited {
  color: var(--link-color);
}

main a:hover,
main a:focus {
  color: var(--link-color-hover);
  text-decoration-style: wavy;
}

main p,
main .image,
main .full-width-image,
main .two-columns {
  margin: 0.75em 0;
}

main ol,
main ul {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

main ol li,
main ul li {
  margin-bottom: 0.2em;
  line-height: 1.3;
}

main ol {
  padding-left: 2em;
}

main blockquote {
  background: rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin: 1em 0;
  border-radius: 10px;
}

main pre {
  margin: 1em 0 1.5em;
}

main code {
  text-transform: none;
}

main center {
  margin: 1em 0;
  padding: 0 1em;
}

main hr {
  border: 0;
  border-top: var(--border);
  margin: 1.5em 0;
}

/* HEADINGS: */

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  font-family: var(--heading-font);
  margin-bottom: 0;
  line-height: 1.5;
}

main h1:first-child,
main h2:first-child,
main h3:first-child,
main h4:first-child,
main h5:first-child,
main h6:first-child {
  margin-top: 0;
}

main h1 {
  font-size: 2em;
}

main h2 {
  font-size: 1.4em;
}

main h3 {
  font-size: 1.3em;
}

main h4 {
  font-size: 1.2em;
}

main h5 {
  font-size: 1.1em;
}

main h6 {
  font-size: 1em;
}



/* COLUMNS: */

.two-columns {
  display: flex;
}

.two-columns > * {
  flex: 1 1 0;
  margin: 0;
}

.two-columns > *:first-child {
  padding-right: 0.75em;
}

.two-columns > *:last-child {
  padding-left: 0.75em;
}

/* -------------------------------------------------------- */
/* CONTENT IMAGES */
/* -------------------------------------------------------- */

.image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

.full-width-image {
  display: block;
  width: 100%;
  height: auto;
}

.images {
  display: flex;
  width: calc(100% + 5px + 5px);
  margin-left: -5px;
  margin-right: -5px;
}

.images img {
  width: 100%;
  height: auto;
  padding: 5px;
  margin: 0;
  overflow: hidden;
}

/* -------------------------------------------------------- */
/* ACCESSIBILITY */
/* -------------------------------------------------------- */

/* please do not remove this. */

#skip-to-content-link {
  position: fixed;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 0.375rem 0.75rem;
  line-height: 1;
  font-size: 1.25rem;
  background-color: var(--content-background-color);
  color: var(--text-color);
  transform: translateY(-3rem);
  transition: transform 0.1s ease-in;
  z-index: 99999999999;
}

#skip-to-content-link:focus,
#skip-to-content-link:focus-within {
  transform: translateY(0);
}

/* -------------------------------------------------------- */
/* MOBILE RESPONSIVE */
/* -------------------------------------------------------- */

/* CSS Code for devices < 800px */
@media (max-width: 800px) {
  body {
    font-size: 14px;
  }

  .layout {
    width: 100%;
    grid-template: "header" auto  "leftSidebar" auto "main" auto "footer" auto / 1fr;
    /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
  }

  
  .right-sidebar { 
    display: none;
  }

  aside {
    border-bottom: 1px solid;
    padding: 9px;
    font-size: 0.9em;
  }

  
  nav {
    padding: 0;
  }

  nav > ul {
    padding-top: 0.5em;
  }

  nav > ul li > a,
  nav > ul li > details summary,
  nav > ul li > strong {
    padding: 0.5em;
  }

  main {
    max-height: none;
    padding: 15px;
  }

  .images {
    flex-wrap: wrap;
  }

  .images img {
    width: 100%;
  }

  #skip-to-content-link {
    font-size: 1rem;
  }
}

@keyframes nav-bounce {
  0% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-4px);
  }

  60% {
    transform: translateY(2px);
  }

  100% {
    transform: translateY(0);
  }
}

nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
  display: inline-block;
}

nav > ul li > a:hover,
nav > ul li > a:focus,
nav > ul li > details summary:hover,
nav > ul li > details summary:focus {
  animation: nav-bounce 0.35s ease;
}

.atabook-box {
  width: 100%;
  height: 800px; /* adjust if you want it taller or shorter */
}

.atabook-embed {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

/* -------------------------------------------------------- */
/* BORDER IMAGE */
/* -------------------------------------------------------- */

header,
main,
aside,
footer,
header nav ul ul {
  border: 18px solid transparent;
  border-image-slice: 60 60 60 60;
  border-image-width: 18px 19px 18px 18px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: repeat repeat;
  border-image-source: url("data:image/png;base64,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");
}

/* -------------------------------------------------------- */
/* CHARACTER OVERLAY */
/* -------------------------------------------------------- */

.layout {
  overflow: visible;
}

header,
aside,
footer {
  position: relative;
  z-index: 1;
}

main#content {
  position: relative;
  overflow: visible;
  z-index: 2;
}

.character-overlay {
  position: absolute;
  top: -190px;
  left: -95px;
  width: 500;
  height: auto;
  z-index: 50;
  pointer-events: none;
}

/* One-question-at-a-time CSS wizard */

.step-control {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#question-list .application-question {
  display: none;
}

/* Show one generated question at a time */
#step-1:checked ~ #question-list .application-question:nth-child(1),
#step-2:checked ~ #question-list .application-question:nth-child(2),
#step-3:checked ~ #question-list .application-question:nth-child(3),
#step-4:checked ~ #question-list .application-question:nth-child(4),
#step-5:checked ~ #question-list .application-question:nth-child(5),
#step-6:checked ~ #question-list .application-question:nth-child(6),
#step-7:checked ~ #question-list .application-question:nth-child(7),
#step-8:checked ~ #question-list .application-question:nth-child(8),
#step-9:checked ~ #question-list .application-question:nth-child(9),
#step-10:checked ~ #question-list .application-question:nth-child(10),
#step-11:checked ~ #question-list .application-question:nth-child(11),
#step-12:checked ~ #question-list .application-question:nth-child(12),
#step-13:checked ~ #question-list .application-question:nth-child(13),
#step-14:checked ~ #question-list .application-question:nth-child(14),
#step-15:checked ~ #question-list .application-question:nth-child(15),
#step-16:checked ~ #question-list .application-question:nth-child(16),
#step-17:checked ~ #question-list .application-question:nth-child(17),
#step-18:checked ~ #question-list .application-question:nth-child(18),
#step-19:checked ~ #question-list .application-question:nth-child(19),
#step-20:checked ~ #question-list .application-question:nth-child(20),
#step-21:checked ~ #question-list .application-question:nth-child(21),
#step-22:checked ~ #question-list .application-question:nth-child(22),
#step-23:checked ~ #question-list .application-question:nth-child(23),
#step-24:checked ~ #question-list .application-question:nth-child(24) {
  display: block;
}

/* Navigation */
.question-navigation {
  margin-top: 1.25rem;
}

.nav-state {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

#step-1:checked ~ .question-navigation .nav-1,
#step-2:checked ~ .question-navigation .nav-2,
#step-3:checked ~ .question-navigation .nav-3,
#step-4:checked ~ .question-navigation .nav-4,
#step-5:checked ~ .question-navigation .nav-5,
#step-6:checked ~ .question-navigation .nav-6,
#step-7:checked ~ .question-navigation .nav-7,
#step-8:checked ~ .question-navigation .nav-8,
#step-9:checked ~ .question-navigation .nav-9,
#step-10:checked ~ .question-navigation .nav-10,
#step-11:checked ~ .question-navigation .nav-11,
#step-12:checked ~ .question-navigation .nav-12,
#step-13:checked ~ .question-navigation .nav-13,
#step-14:checked ~ .question-navigation .nav-14,
#step-15:checked ~ .question-navigation .nav-15,
#step-16:checked ~ .question-navigation .nav-16,
#step-17:checked ~ .question-navigation .nav-17,
#step-18:checked ~ .question-navigation .nav-18,
#step-19:checked ~ .question-navigation .nav-19,
#step-20:checked ~ .question-navigation .nav-20,
#step-21:checked ~ .question-navigation .nav-21,
#step-22:checked ~ .question-navigation .nav-22,
#step-23:checked ~ .question-navigation .nav-23,
#step-24:checked ~ .question-navigation .nav-24 {
  display: flex;
}

.question-navigation label {
  display: inline-block;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: #2563eb;
  color: white;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  min-width: 80px;
}

.question-navigation label:hover {
  background: #1d4ed8;
}

.question-navigation .back-button {
  background: #e5e7eb;
  color: #111827;
}

.question-navigation .back-button:hover {
  background: #d1d5db;
}

.question-progress {
  flex: 1;
  text-align: center;
  color: #555;
  font-size: 0.95rem;
}

.nav-spacer {
  min-width: 80px;
}

/* Hide final submit button until last question */
#application-submit {
  display: none;
}

#step-24:checked ~ #application-submit {
  display: block;
}