:root {
  --primary: #e82e21;
  --secondary: #1a1a1a;
  --tertiary: #ffffff;
}
.accordion-image {
  max-width: 100% !important;
}
details {
  max-width: 854px;
  margin: 0.5em auto;
}
details div {
  padding: 0.5em;
  border: 2px solid var(--secondary);
  border-top: none;
  margin: 0;
  overflow: hidden;
}
summary {
  font-weight: 700;
  background: var(--primary);
  color: var(--tertiary);
  cursor: pointer;
  border: 2px solid var(--secondary);
  padding: 0.5em;
}
summary:focus {
  outline: 0;
}
.user_content aside {
  width: 40%;
  padding-left: 0.5rem;
  margin-left: 0.5rem;
  float: right;
  font-style: italic;
  color: var(--primary);
}
.banner-img {
  clip-path: polygon(23% 0, 100% 0, 100% 100%, 0 100%);
}
blockquote {
  padding: 15px;
  background: #eee;
}
code {
  background-color: #eee;
  font-family: courier, monospace;
  padding: 0 3px;
  font-size: 1rem;
}
.em-read,
.em-watch {
  display: flex;
  gap: 10px;
}
.em-read::before,
.em-watch::before {
  content: "";
  display: block;
  width: 100px;
  min-width: 100px;
  height: 100px;
  align-self: center;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.em-read::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 522.4 663.98'%3E%3Cdefs%3E%3Cstyle%3E .cls-1%7Bfill:%23fff; stroke:%23e82e21;stroke-width:23px;%7D.cls-2%7Bfill:%23000%7D %3C/style%3E%3C/defs%3E%3Crect class='cls-1' x='122.63' y='11' width='390' height='538' rx='2' /%3E%3Crect class='cls-1' x='66.63' y='63' width='390' height='538' rx='2' /%3E%3Crect class='cls-1' x='10.63' y='115' width='390' height='538' rx='2' /%3E%3Cpath class='cls-2' d='M85.95 223.67h119.52c5.86 0 11.48-5.15 11.21-11.21-.27-6.07-4.92-11.21-11.21-11.21H85.95c-5.86 0-11.48 5.15-11.21 11.21.27 6.07 4.92 11.21 11.21 11.21ZM324.99 290.9H115.26c-9.63 0-19.28-.17-28.91 0h-.41c-5.86 0-11.48 5.15-11.21 11.21.27 6.07 4.92 11.21 11.21 11.21h209.73c9.63 0 19.28.17 28.91 0h.41c5.86 0 11.48-5.15 11.21-11.21-.27-6.07-4.92-11.21-11.21-11.21ZM324.99 380.54H115.26c-9.63 0-19.28-.17-28.91 0h-.41c-5.86 0-11.48 5.15-11.21 11.21.27 6.07 4.92 11.21 11.21 11.21h209.73c9.63 0 19.28.17 28.91 0h.41c5.86 0 11.48-5.15 11.21-11.21-.27-6.07-4.92-11.21-11.21-11.21ZM324.99 470.18H115.26c-9.63 0-19.28-.17-28.91 0h-.41c-5.86 0-11.48 5.15-11.21 11.21.27 6.07 4.92 11.21 11.21 11.21h209.73c9.63 0 19.28.17 28.91 0h.41c5.86 0 11.48-5.15 11.21-11.21-.27-6.07-4.92-11.21-11.21-11.21ZM324.99 559.83H115.26c-9.63 0-19.28-.17-28.91 0h-.41c-5.86 0-11.48 5.15-11.21 11.21.27 6.07 4.92 11.21 11.21 11.21h209.73c9.63 0 19.28.17 28.91 0h.41c5.86 0 11.48-5.15 11.21-11.21-.27-6.07-4.92-11.21-11.21-11.21Z' /%3E%3C/svg%3E%0A");
}
.em-watch::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 778.76 711.25'%3E%3Cdefs%3E%3Cstyle%3E .cls-1%7Bfill:%23fff%7D.cls-2%7Bfill:%23e82e21%7D.cls-3%7Bfill:%23fff%7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-2' d='M36.65 401.44v228.13c0 35.89 29.03 58.82 65.25 65.28 122.57 21.86 254.41 21.86 376.98 0 36.23-6.46 65.28-29.39 65.28-65.28V401.44c0-35.91-29.05-58.82-65.28-65.28-122.57-21.85-254.41-21.85-376.98 0-36.23 6.46-65.25 29.37-65.25 65.28Z'/%3E%3Cpath class='cls-3' d='M220.82 515.51v-69.08c0-5.9 4.76-10.69 10.66-10.69 2.3 0 4.42.74 6.18 1.98l118.77 68.57c3.4 1.96 5.33 5.53 5.33 9.21s-1.93 7.23-5.33 9.21l-118.77 68.57c-1.76 1.25-3.88 1.98-6.18 1.98-5.9 0-10.66-4.79-10.66-10.69v-69.08Z'/%3E%3Cpath class='cls-2' d='m561.88 467.86.06 95.24c0 9.98 5.55 19.56 15.11 24.29l160.75 92.38c4.05 2.38 8.76 3.74 13.8 3.74 14.99 0 27.16-12.16 27.16-27.16l-.06-281.76c0-4.05-.91-8.13-2.81-11.99-6.63-13.44-22.88-18.94-36.28-12.3L578.8 442.68c-9.92 4.05-16.92 13.8-16.92 25.17ZM441.92 304.33c42.01 0 80.08-17.04 107.6-44.56 27.52-27.55 44.56-65.59 44.56-107.6s-17.04-80.05-44.56-107.6C522 17.04 483.93 0 441.92 0s-80.05 17.04-107.57 44.56c-27.55 27.55-44.59 65.59-44.59 107.6s17.04 80.05 44.59 107.6c27.52 27.52 65.56 44.56 107.57 44.56Z'/%3E%3Cpath class='cls-1' d='M505.67 215.89c-16.33 16.33-38.86 26.42-63.75 26.42s-47.42-10.09-63.72-26.42c-16.3-16.3-26.39-38.83-26.39-63.72s10.09-47.42 26.39-63.75c16.3-16.3 38.83-26.39 63.72-26.39s47.42 10.09 63.75 26.39c16.3 16.33 26.39 38.86 26.39 63.75s-10.09 47.42-26.39 63.72Z'/%3E%3Cpath class='cls-2' d='M216.71 267.14c22.99-22.96 37.19-54.71 37.19-89.77s-14.2-66.81-37.19-89.77C193.75 64.64 162 50.41 126.94 50.41S60.16 64.64 37.17 87.6C14.2 110.55 0 142.3 0 177.36s14.2 66.81 37.16 89.77c22.99 22.96 54.74 37.19 89.77 37.19s66.81-14.23 89.77-37.19Z'/%3E%3Cpath class='cls-1' d='M191.88 177.36c0 17.94-7.26 34.16-19.02 45.92-11.74 11.74-27.98 19.02-45.92 19.02s-34.16-7.29-45.89-19.02c-11.76-11.76-19.02-27.98-19.02-45.92s7.26-34.16 19.02-45.92c11.74-11.74 27.98-19.02 45.89-19.02s34.19 7.29 45.92 19.02c11.76 11.76 19.02 27.98 19.02 45.92Z'/%3E%3C/svg%3E%0A");
}
.link-card {
  overflow: hidden;
  clear: both;
  margin-top: 1em;
}
.link-card img {
  float: left;
  margin: 5px;
  width: 30%;
  height: auto;
}
.link-text {
  display: table;
  padding: 5px;
}
#kup-hover-table {
  display: flex;
  justify-content: space-evenly;
}
.kup-hover-table-category {
  border: 4px solid var(--secondary);
  border-radius: 1.5em;
  overflow: hidden;
  margin: 0 auto;
  padding-bottom: 10px;
}
.kup-hover-table-category:hover {
  box-shadow: 3px 3px 5px var(--primary);
  transform: translate(-2px, -2px);
}
.kup-hover-table-cat-title {
  text-align: center;
  background: var(--primary);
  color: #fff;
  border-bottom: 2px solid #000;
  padding: 10px;
  margin: 0;
}
.kup-hover-table-content {
  padding: 1em;
}
kbd {
  background-color: #eee;
  border: 1px solid #b4b4b4;
  color: #333;
  display: inline-block;
  font-size: 0.85em;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
}
.journal,
.opt-challenge {
  overflow: visible;
}
.journal h3,
.opt-challenge h3 {
  background-color: var(--primary);
  padding: 0.5em;
  margin: 0;
  padding-left: 3.1em;
  color: var(--tertiary);
  border-radius: 0 1em 0 0;
}
.journal h3 {
  background: url(https://cdn.precollegeprograms.org/brand-level-images/reflection-journal.png)
      0.2em 50% / auto 2.13em no-repeat,
    var(--primary);
}
.opt-challenge h3 {
  background: url(https://cdn.precollegeprograms.org/brand-level-images/opt-challenge.png)
      0.2em 50% / auto 2.4em no-repeat,
    var(--primary);
}
.journal > div,
.opt-challenge > div {
  padding: 8px;
  border: 2px solid var(--primary);
  border-top: none;
  border-radius: 0 0 1em 1em;
}
.sidebar {
  overflow: visible;
  float: right;
  width: 40%;
  margin-left: 0.5em;
  margin-bottom: 1em;
}
.sidebar > div {
  background: var(--secondary);
  color: var(--tertiary);
  padding: 8px;
  border: 2px solid var(--primary);
  border-top: none;
  border-radius: 0 0 1em 1em;
}
.sidebar > div * {
  margin-top: 0;
}
.sidebar h3 {
  background: var(--primary);
  padding: 0.5em;
  margin: 0;
  color: #fff;
  border-radius: 1em 1em 0 0;
}
hr {
  border: 2px solid var(--primary);
  background: var(--primary);
}
.reveal-box-wrapper {
  max-width: 854px;
  margin: 0 auto;
}
.reveal-box-container {
  margin: auto 0;
  border: 3px solid #666;
  border-radius: 5px;
  min-height: max-content;
  padding: 1em 0;
  box-shadow: 0 4px 8px 0 var(--primary), 0 6px 20px 0 var(--primary);
}
.reveal-box-text {
  margin: auto 1em;
  font-size: 14pt;
}
.reveal-box-button-wrapper {
  text-align: center;
}
.reveal-box-button {
  min-width: 6.5em;
  text-align: center;
  margin: 0 auto;
}
.reveal-box-answer {
  display: none;
}
.reveal-box-image-wrapper {
  max-width: 400px;
  margin: 0 auto;
}
.reveal-box-image {
  height: 100%;
  width: auto;
  margin: 1em auto;
  max-width: 100% !important;
}
.fade-in {
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.5s;
}
@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.venn-container,
.venn-container * {
  box-sizing: border-box;
}
.venn-container {
  display: flex;
  width: 95%;
  max-width: 854px;
  margin: 0 auto;
  font-size: large;
  margin-bottom: 0.5em;
  border: 2px solid #000;
  border-radius: 2em;
}
.midvenn {
  text-align: center;
  font-weight: 700;
  border: 2px solid #000;
  border-radius: 2em;
  width: 20%;
  padding: 1em 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primary);
  color: #fff;
}
.lrvenn {
  padding: 1em;
  width: 40%;
}
.kup-home-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  align-items: stretch;
  padding: 0 2%;
}
.kup-home-nav a {
  width: calc(45% - 5px);
  min-width: 250px;
  max-width: 100%;
  flex-grow: 1;
  display: flex;
  align-items: center;
  text-align: left;
}
.kup-flash {
  font-size: 1.2rem;
  max-width: 854px;
  height: 405px;
  margin: 0 auto;
  position: relative;
  transform-style: preserve-3d;
  perspective: 5000px;
}
.kup-flash,
.kup-flash * {
  box-sizing: border-box;
}
.kup-flash img {
  min-height: 0;
  align-self: center;
}
.kup-flash h3 {
  text-align: center;
}
.flash-front,
.flash-back {
  backface-visibility: hidden;
  border: 1px solid black;
  border-radius: 16px;
  display: none;
  align-items: stretch;
  flex-flow: column;
  justify-content: flex-start;
  height: 100%;
  overflow: auto;
  padding: 1em;
  padding-bottom: 2em;
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  transition: transform 0.5s;
  width: 100%;
}
.flash-front {
  --rotation: 180deg;
}
.flash-back {
  --rotation: -180deg;
}
.flash-back h3 {
  border-bottom: 1px solid black;
}
.kup-flash [aria-hidden="true"] {
  transform: rotateX(var(--rotation));
}
.flash-flip-btn {
  border: none;
  background: none;
  cursor: pointer;
  line-height: 1rem;
  padding: 0;
  position: absolute;
  bottom: 0.5em;
  right: 0.5em;
  width: 50px;
  transform-origin: bottom right;
  transition: transform 0.2s;
}
.flash-flip-btn:active path {
  stroke: black;
  stroke-width: 10px;
}
.flash-flip-btn:is(:hover, :focus-visible) {
  transform: scale(1.2);
}
.flash-flip-btn svg {
  width: 100%;
  height: auto;
}
[aria-hidden="true"] .flash-flip-btn {
  display: none;
}
.flash-current,
.flash-current + .flash-back {
  display: flex;
}
.flash-control-bar {
  font-size: 1rem;
  font-weight: bold;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  align-items: center;
  max-width: 854px;
  margin: 0 auto;
  margin-top: 0.5rem;
}
.flash-controls {
  display: flex;
  width: min-content;
  gap: 0.5em;
}
.flash-controls button {
  width: 3rem;
  height: 3rem;
  padding: 0.5rem;
  color: white;
  font-weight: normal;
  font-size: 40px;
  background: var(--primary);
  border-radius: 10em;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 2px outset var(--primary);
  transition: transform 0.2s;
}
.flash-controls button:is(:focus-visible, :hover) {
  opacity: 0.8;
}
.flash-controls button:active {
  border-style: inset;
  transform: translate(1px, 1px);
}
a.btn.btn-primary {
  color: white;
}
/* Banner styling */
.kup-banner {
  height: auto;
  width: 100%;
  background: white;
  position: relative;
  border-style: solid;
  border-width: 3px 0px;
}
.kup-banner-image {
  position: absolute;
  right: 0;
  height: 100%;
  max-height: 100%;
  width: auto;
}
.kup-banner-title {
  display: block;
  max-width: 425px;
  height: auto;
  width: 50%;
}