:root {
  /* TARDIS - Doctor Who Color Palette */
  --near-black:#00060b;
  --dark-blue:#00203c;
  --tardis-blue:#003b6f;
  --grey-blue:#6f8ea9;
  --lt-blue:	#a6b8c7;
  --near-white: #e7eef4;
}

body {
  background-color: var(--near-white);
  color: var(--near-black);
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

h1 {
  font-size: 48px;
  color: var(--tardis-blue);
  text-align: center;
  margin-top: 10px;
}

p {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 1.25em;
}

/*
 * Formatting for main quiz page...
 */
 
.mobile-banner {
  display: none;  /* hidden on desktop */
}

.mobile-banner img {
  width: 100%;
  height: auto;
  display: block;
}

.page-layout {
  display: grid;
  grid-template-columns: 320px 1fr 320px;
  max-width: 1450px;
  width: 100%;
  align-items: start;
}

.side-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/*left border panel: all docs on the left side of page*/
.side-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}

/*right border panel: all docs on the right side of page*/
.side-panel.right img {
  object-position: right center;
}

/*Adds padding between quiz and the left and right border panels*/
#quiz-border {
  padding: 20px 40px;
  margin: 0 auto;
  max-width: 900px;
}

/* bigger inputs */
select, input[type="text"] {
  font-size: 18px;
  padding: 6px 10px;
}

/* breathing room between questions */
fieldset {
  margin-bottom: 20px;
}

/* bigger submit button */
input[type="submit"] {
  font-size: 18px;
  padding: 10px 30px;
  cursor: pointer;
}

/*
 * Formatting for RESULTS to quiz below...
 */
 
.page-wrapper {
  margin: 5px 210px;
}

.result-img {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  margin: 10px auto 30px auto;
  border: 2px solid var(--tardis-blue);
  border-radius: 5px;
}

#doctor-text {
  max-width: 850px;
  margin: 0 auto;
  text-align: justify;
}

/*
 * Cell phone/tablet formatting
 */

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

  .page-layout {
    grid-template-columns: 1fr;
  }
  
  .side-panel {
    display: none;
  }
  
  .mobile-banner {
    display: block;  /* shows up on mobile */
    grid-column: 1 / -1;  /* spans full width of the grid */
  }
  
  .page-wrapper {
    margin: 5px 25px;
  }

}