#python-terminal {
  padding: 5vw 0 0 0;
  display: grid;
  grid-template-rows: repeat(4, auto);
  row-gap: 3vw;
}

.pt-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 0.9vw;
  letter-spacing: 0.05em;
  opacity: 0.8;
  margin: 0 2vw;
}

#python-terminal a {
  justify-self: end;
  color: var(--color-theme-font);
  text-decoration: none;
}

#python-terminal a:hover {
  color: var(--color-theme-red);
  transition: all 0.3s;
  text-decoration: underline;
}

.pt-title-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin: 0 2vw;
}

#python-terminal ol {
  list-style-position: inside;
  margin: 0 2vw;
}

#python-terminal .long-text {
  hyphens: auto;
  text-align: justify;
  margin: 0 2vw;
}

.pt-title-row h2 {
  font-size: 8vw;
  font-weight: 300;
  font-family: var(--text-calligraphy-2);
}

.arrow {
  width: 5vw;
  height: 3vw;
  border-radius: 2vw;
  border: 1px solid #999;
  background: transparent;
  font-size: 1.5vw;
  cursor: pointer;
  place-self: center end;
}

select {
  width: max-content;
  font-size: 1.2vw;
  padding: 0.8vw 1.2vw;
  border: 1px solid var(--color-theme-border);
  background: transparent;
  font-family: inherit;
  color: var(--color-theme-font-dark);
}

.pt-text p {
  font-size: 12px;
  text-align: center;
}

.pt-console {
  background: #111;
  color: #0f0;
  font-family: monospace;
  padding: 2vw;
  height: 30vw;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
}

.pt-output {
  overflow-y: auto;
  white-space: pre-wrap;
  font-size: 1vw;
}

.pt-input-line {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5vw;
  align-items: center;
}

.pt-input-line input {
  background: transparent;
  border: none;
  outline: none;
  color: #0f0;
  font-family: inherit;
  font-size: 1vw;
}

footer p {
  text-align: center;
  padding: 10px;
}

.download-bar {
  width: 50vw;
  height: 42px;
  margin: 3vh auto;

  display: grid;
  grid-template-columns: auto auto;


  font-size: 1.2vw;
  background: transparent;
  font-family: inherit;
  color: var(--color-theme-font-dark);

}

details {
  border: 1px solid var(--color-theme-border);
  padding: 10px;
}

summary {
  cursor: pointer;
}

label {
  display: block;
  margin-left: 10px;
}

.cat {
  display: block;
  margin-top: 10px;
  cursor: pointer;
  font-weight: 200;
}

#download-button {
  cursor: pointer;
  background-color: transparent;
  text-align: center;
  border-left: none;
  border-right: 1px solid var(--color-theme-border);
  border-top: 1px solid var(--color-theme-border);
  border-bottom: 1px solid var(--color-theme-border);
  width: 100%;
  padding: 12px;
  font-family: var(--text-main-serif);
  color: var(--color-theme-font-dark);
}

summary:hover,
#download-button:hover {
  background-color: color-mix(in srgb, transparent, rgb(107, 26, 26) 10%);
}