:root {
  --alink: rgb(0 0 238 / 100%);
  --avisited: rgb(85 26 139 / 100%);

  --offwhite: rgb(246 246 246 / 100%);
  --lightgray: rgb(240 240 240 / 100%);
  --gray: rgb(150 150 150 / 100%);
  --darkgray: rgb(50 50 50 / 100%);
  --byuiblue: rgb(0 110 182 / 100%);
  --navy: rgb(0 0 128 / 100%);
  --red: rgb(182 0 19 / 100%);
  --mustard: rgb(117 107 7 / 100%);
  --callout: rgb(230 243 254 / 100%);
  --error: rgb(255 215 225 / 100%);
  --warning: rgb(255 255 225 / 100%);
  --details: rgb(238 254 238 / 100%);
  --disciples: rgb(158 116 171 / 40%);
  --ai: rgba(77 25 75 / 10%);

  --padd: 0.5rem;
  --bord: 1px solid rgb(0 0 0 / 10%);
}

html {
  scroll-behavior: smooth;
}

body {
  font: 400 16px / 1.5 Montserrat, Helvetica, sans-serif;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 960px;
  margin: 0 auto;
  padding: .5rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

h1 {
  color: rgb(255 255 255 / 100%);
  font-size: 1.1rem;
  margin-left: 1rem;
  font-weight: normal;
}

#coursetitle {
  display: none;
}

h2 {
  font-size: 1.6rem;
  margin: 1.2rem 0.25rem;
}

h3 {
  font-size: 1.4rem;
  margin: 0.75rem 0.5rem;
}

h4 {
  font-size: 1.2rem;
  margin: 0.75rem;
}

h5 {
  font-size: 1rem;
  color: var(--navy);
  margin: 0.75rem 1.2rem;
}

h6 {
  font-size: 0.9rem;
  margin: 0.75rem 1.4rem;
}

a {
  color: var(--navy);

  &:link {
    color: var(--alink);
  }

  &:active {
    color: var(--red);
  }

  &:visited,
  &:focus {
    color: var(--avisited);
  }
}

p {
  margin: 1rem;
}

h4+p {
  margin-left: 1.25rem;
}

h5~p {
  margin-left: 1.5rem;
}

ol ol,
ul ul {
  margin-top: 1rem;
}

li {
  margin-bottom: 0.5rem;

  & ul li:nth-child(1) {
    margin-top: 0.5rem;
  }

  & ul li,
  & ol li {
    margin-bottom: 0.5rem;
  }

  & p {
    margin: 0;
  }
}

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

header {
  background-color: var(--byuiblue);
  padding: 0.5rem;
}

.logo {
  width: 50px;
  height: auto;
  background-color: rgb(0 0 0 / 100%);
  padding: 12px 11px;
  position: absolute;
  top: 0;
  right: 0;
}

main {
  margin: 1.5rem 1rem;
}

nav {
  display: flex;
  width: fit-content;
  flex-wrap: wrap;

  & span {
    font-size: .8rem;
    font-weight: 700;
    background-color: var(--lightgray);
    margin: 0 .25rem .25rem;
    text-align: center;
    border: var(--bord);

    & a {

      &:link,
      &:visited,
      &:active,
      &:focus {
        color: rgb(0 0 0 / 100%);
        text-decoration: none;
        display: block;
        padding: .5rem 1rem;
        order: var(--bord);
      }

      &:hover {
        background-color: var(--byuiblue);
        color: rgb(255 255 255 / 100%);
      }
    }
  }
}

footer {
  border-top: var(--bord);
  font-size: smaller;
  background-color: var(--lightgray);
  padding: 0.5rem;
  text-align: center;

  & p {
    margin: 0 0 0 0.5rem;
  }
}

details {
  margin: 1.5rem;
  border: var(--bord);
  padding: 0.5rem;
  color: rgb(0 0 0 / 100%);
  background-color: var(--details);

  & p {
    margin: 0.5rem 0 0 0.5rem;
  }
}

pre {
  line-height: 1.2;
  margin: 0.35rem 1rem;
  overflow-x: auto;

  & code {
    display: block;
    box-sizing: border-box;
    border: var(--bord);
    padding: 0.6rem 0.75rem !important;
  }
}

code {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;  font-size: .8rem;
  border: none;
  background-color: #000;
  color: #fff;
  padding: 0.1rem .4rem;
  border-radius: .5rem;
}

kbd {
  color: rgb(255 0 0 / 100%);
}

mark {
  padding: 0.5rem;
  font-style: italic;

  &::before {
    content: '⚒️';
  }
}

figure {
  margin: 1rem 0;
  text-align: center;
}

figcaption {
  font-size: smaller;
  margin: 0 0 1rem 0;
}

.video-container {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: calc(var(--aspect-ratio, 0.5625) * 100%);
  margin: 0.5em auto;

  & iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

table {
  border-collapse: collapse;
  margin: 1rem auto;
  width: 80%;
  border: var(--bord);
  background-color: var(--lightgray);

  & caption {
    color: var(--navy);
    font-weight: 700;
  }
}

th {
  background-color: var(--darkgray);
  color: rgb(255 255 255 / 100%);
}

th,
td {
  border: var(--bord);
  padding: 0.5rem;
  text-align: center;
}

td code {
  text-align: left;
  padding: .25rem;
}

.active {
  background-color: rgb(0 0 0 / 100%);
  color: rgb(255 255 255 / 100%);
  text-decoration: none;

  & a {

    &:link,
    &:visited,
    &:active,
    &:focus {
      color: rgb(255 255 255 / 100%);
    }
  }
}

td.detailed-text-cell {
  text-align: left;
  font-size: 90%;

  & ul,
  & ol {
    padding-left: 1rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }

  & li {
    margin-bottom: 0.1rem;
  }
}

input {
  padding: 0.5rem;
}

.smaller {
  font-size: smaller;
}

.underline {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--byuiblue);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-skip-ink: none;
}

.team::after {
  content: " \1F465";
}

.callout {
  margin: 1rem;
  border: var(--bord);
  border-radius: .15rem;
  padding: 0.5rem;
  color: rgb(0 0 0 / 100%);

  & p {
    margin: 0.25rem;
  }
}

.reference {
  background-color: var(--lightgray);
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.info {
  background-color: var(--callout);
}

.disciples {
  position: relative;
  background-color: var(--disciples);
  background-image: url(../images/disciples.png);
  background-repeat: no-repeat;
  background-size: 50px;
  background-position-x: calc(100% - 10px);
  background-position-y: calc(100% - 10px);
}

.ai {
  position: relative;
  background-color: var(--ai);
}

.error {
  background-color: var(--error);
}

.warning {
  background-color: var(--warning);
}

.example {
  background-color: var(--lightgray);
}

.filename {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 700;
  background-color: var(--lightgray);
  color: var(--navy);
}

.footnotes {
  margin-top: 50px;
  border-top: 1px solid rgb(192 192 192 / 100%);
  font-size: 0.8em;

  & ol {
    padding-left: 20px;
  }

  & :target {
    background: rgb(255 255 0 / 100%);
  }
}

/**
 * Inline footnotes references
 * 1. Increment the counter at each new reference
 * 2. Reset link styles to make it appear like regular text
 */
[aria-describedby="footnote-label"] {
  counter-increment: footnotes;
  /* 1 */
  text-decoration: none;
  /* 2 */
  color: inherit;
  /* 2 */
  cursor: default;
  /* 2 */
  outline: none;
  /* 2 */

  /**
   * Actual numbered references
   * 1. Display the current state of the counter (for example, `[1]`)
   * 2. Align text as superscript
   * 3. Make the number smaller (since it's superscript)
   * 4. Slightly offset the number from the text
   * 5. Reset link styles on the number to show it's usable
   */
  &::after {
    content: '[' counter(footnotes) ']';
    /* 1 */
    vertical-align: super;
    /* 2 */
    font-size: 0.75em;
    /* 3 */
    margin-left: 2px;
    /* 4 */
    color: rgb(0 0 255 / 100%);
    /* 5 */
    text-decoration: underline;
    /* 5 */
    cursor: pointer;
    /* 5 */
  }

  /**
   * Resetting the default focused styles on the number
   */
  &:focus::after {
    outline: thin dotted;
    outline-offset: 2px;
  }
}

[aria-label="Back to content"] {
  font-size: 0.8em;
}

/**
 * Visually hidden yet accessible content
 */
.visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  visibility: hidden;
  opacity: 0;
}

.discussion {
  background-color: var(--details);

  & h5 {
    color: var(--black);
  }
}

.question {
  color: var(--navy);
  border-top: var(--bord);
}

blockquote {
  border-left: 3px solid var(--darkgray);
}

.smaller {
  font-size: smaller;
}

.floatright {
  float: right;
  margin: 0 0 0.5rem 0.5rem;
  border: var(--bord);
}

img.floatright {
  border: none;
}

.step-reset {
  counter-reset: step;
}

.step {
  counter-increment: step;

  &::before {
    content: 'Step ' counter(step) ':  ';
    font-size: x-large;
    color: var(--navy);
  }
}

.problem-reset {
  counter-reset: problem;
}

.problem {
  counter-increment: problem;

  &::before {
    content: 'Problem ' counter(problem) ':  ';
    font-size: x-large;
    color: var(--navy);
  }
}

.part-reset {
  counter-reset: part;
}

.part {
  counter-increment: part;
  margin-left: 1rem;

  &::before {
    content: 'Part ' counter(part) ':  ';
    font-size: x-large;
    color: var(--navy);
  }
}



.case-study {
  margin-top: 2rem;
  margin-bottom: 2rem;
  margin-left: 1rem;
  margin-right: 1rem;

  padding: 1rem;
  padding-top: 12rem;
  border: var(--bord);
  color: rgb(0 0 0 / 100%);
  background-color: var(--offwhite);

  font-size: 115%;

  counter-reset: footnotes;
}

.case-study-title {
  padding-bottom: 2rem;
  text-align: center;
  font-size: 150%;
}

.case-study-footer {
  padding-top: 4rem;
  text-align: center;
  font-size: smaller;
}

.case-study-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.text-conversation {
  font-family: monospace;
  font-size: 80%;
  margin-left: 25px;
  border-left: 1px solid var(--darkgray);
}

.the-grid {
  display: grid;
  gap: .25rem;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

#weeks {
  list-style: none;
  padding-left: 1rem;

  & li {
    margin-left: 0;
    margin-right: 1rem;
    border: 1px solid rgb(0 0 0 / 10%);
    padding: .25rem .5rem;

    & a {
      display: block;
      text-decoration: none;
      color: rgb(0 0 0 / 100%);

      &:hover {
        font-weight: 700;
        text-decoration: underline;
        color: rgb(255 255 255 / 100%);
      }
    }

    &:hover {
      background-color: var(--byuiblue);
    }
  }
}

.code-highlight {
  background-color: rgb(255 192 203 / 100%);
}

@media screen and (min-width: 600px) {
  .page {
    position: relative;
  }

  .logo {
    width: 75px;
    padding: 18px 15px;
    top: -.5rem;
    right: 1rem;
  }

  h1 {
    font-size: 1.3rem;
  }

  #coursetitle {
    display: inline;
  }
}

@media screen and (min-width: 800px) {
  .logo {
    width: 100px;
    padding: 22px 20px;
  }

  h1 {
    font-size: 1.75rem;
    margin-left: 0;
  }
}