:root {
  --section-fade-in-length: 1.75s;
  --footer-fade-in-delay: 0.5s;
  --alt-background-color: #f0f0f0;
  --background-color: #fffaf0;
}

html {
  background-color: var(--background-color, white);
  font-size: 100%;
  font-family: sans-serif;
}

/* Monospace font for p tags, sans-serif for everything else */
p {
  font-family: monospace;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
}

body {
  margin: 0;
}

#application {
  display: flex;
  flex-direction: column;
  padding: 0 18%;
  font-family: sans-serif;
  font-size: 14px;
  height: 100vh;
}

@media screen and (max-width: 1000px) {
  h1 {
    padding: 0 16px;
  }
  /* For small screens, let's roll back the padding a bit. */
  #application {
    padding: 0;
  }

  .sandbox {
    padding: 0 16px;
  }
}

p,
a,
code,
pre,
input,
textarea,
select {
  font-family: monospace;
  font-size: 14px;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;

  li {
    padding-bottom: 4px;
  }
}

a {
  color: #477e91;
  text-decoration: none;
  display: inline-block;
  padding-left: 0;
  transition: padding 0.1s;
}

li > a:hover {
  padding-left: 4px;
  transition: 0.25s;
}

.section {
  opacity: 0;
  overflow: auto;
  flex: 0 1 auto;
}

.section:nth-child(1) {
  animation: fadeIn var(--section-fade-in-length, 1.75s) forwards;
}
.section:nth-child(2) {
  animation: fadeIn var(--section-fade-in-length, 1.75s) forwards;
  animation-delay: 0.25s;
}
.section:nth-child(3) {
  animation: fadeIn var(--section-fade-in-length, 1.75s) forwards;
  animation-delay: 0.5s;
}

.footer {
  opacity: 0;
  animation: fadeIn var(--section-fade-in-length, 1.75s) forwards;
  animation-delay: var(--footer-fade-in-delay, 0.75s);
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

@media screen and (max-width: 600px) {
  .footer {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .footer p {
    margin: 4px;
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.feather {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.sandbox {
  flex-wrap: wrap;
  overflow: hidden;
  height: 100%;

  .sandbox-container {
    margin-top: 1em;
    flex: 1 1 400px;
    min-width: 0;
    position: relative;

    &:has(.sandbox-container-inner.flex-column) {
      .dir-icon {
        transform: rotate(90deg);
        transition: 0.25s;
      }
    }
    &:has(.sandbox-container-inner.flex-row) {
      .dir-icon {
        transform: rotate(0deg);
        transition: 0.25s;
      }
    }
    &:has(.sandbox-container-inner.flex-row-reverse) {
      .dir-icon {
        transform: rotate(180deg);
        transition: 0.25s;
      }
    }
    &:has(.sandbox-container-inner.flex-column-reverse) {
      .dir-icon {
        transform: rotate(-90deg);
        transition: 0.25s;
      }
    }

    .dir-icon {
      width: 20px;
      height: 20px;
      position: absolute;
      background-color: var(--background-color);
      border-radius: 4px;
      border: 1px black solid;
      top: -10px;
      right: -10px;
      z-index: 1;
    }
  }

  .sandbox-container-inner {
    overflow: auto;
    position: relative;
    height: 300px;
    padding: 0.25em;
    background-color: var(--background-color);
    border: 2px black solid;
    border-radius: 3px;

    .sandbox-item {
      display: flex;
      flex-direction: column;
      gap: 4px;

      .sandbox-edit {
        flex: 1 1 auto;
        padding: 4px;
        min-width: 40px;
        :focus {
          outline: none;
        }
      }

      &:nth-child(odd) {
        background-color: var(--alt-background-color, #f0f0f0);
      }
      min-width: 20px;
      flex-basis: 50px;
      padding: 0.5em;
      box-sizing: border-box;
      border: 1px solid black;
      border-radius: 3px;

      .sandbox-item-name {
        display: inline-block;
        font-weight: bold;
        font-size: 1em;
      }
    }
  }
  .sandbox-editor {
    display: flex;
    flex-direction: column;
    gap: 1em;
    flex: 1 1 20%;
    background-color: var(--background-color);
    border-radius: 3px;
    overflow: auto;
    height: 100%;
    padding: 0 8px;

    .flex-style-container {
      display: flex;
      gap: 1em;
      flex-direction: row;

      div {
        flex: 1 1 auto;
      }
    }

    label {
      display: block;
      margin-bottom: 2px;
      font-family: monospace;
    }

    .sandbox-editor-item {
      display: flex;
      flex-direction: column;
      gap: 1em;
    }

    select,
    input {
      display: block;
      width: 100%;
      box-sizing: border-box;
    }

    .sandbox-section {
      h1,
      h3,
      h4,
      h2 {
        margin: 0;
      }
      display: flex;
      flex-direction: column;
      gap: 1em;
    }
  }
}

.flex {
  display: flex;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-column-reverse {
  display: flex;
  flex-direction: column-reverse;
}

.justify-content-flex-start {
  justify-content: flex-start;
}

.justify-content-flex-end {
  justify-content: flex-end;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-space-between {
  justify-content: space-between;
}

.justify-content-space-around {
  justify-content: space-around;
}

.align-items-flex-start {
  align-items: flex-start;
}

.align-items-flex-end {
  align-items: flex-end;
}

.align-items-center {
  align-items: center;
}

.align-items-baseline {
  align-items: baseline;
}

.align-items-stretch {
  align-items: stretch;
}

.gap-05 {
  gap: 0.5em;
}

.gap-1 {
  gap: 1em;
}

.gap-2 {
  gap: 2em;
}

.gap-3 {
  gap: 3em;
}

.align-self-auto {
  align-self: auto;
}

.align-self-flex-start {
  align-self: flex-start;
}

.align-self-flex-end {
  align-self: flex-end;
}

.align-self-center {
  align-self: center;
}

.align-self-baseline {
  align-self: baseline;
}

.align-self-stretch {
  align-self: stretch;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.clickable {
  cursor: pointer;
}

.border-bottom-dashed {
  border-bottom: 1px dashed gray;
}

.padding-bottom-sm {
  padding-bottom: 0.5em;
}

.padding-bottom-md {
  padding-bottom: 0.5em;
}