@font-face {
  font-family: "JetBrains Mono";
  src: url("/css/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/css/fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html {
  font-size: clamp(8px, 1.1vw, 17px);
  line-height: 1.4;
  font-family: "JetBrains Mono", monospace;
  background-color: #091923;
  padding: 3ch 5ch;
}

.terminal-container {
  display: flex;
  gap: 3ch;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  align-items: stretch;
}

.left-terminal-column {
  display: flex;
  flex-direction: column;
  gap: 3ch;
  flex: 1 1 30ch;
}

.left-terminal-column .terminal-bottom {
  flex: 1 0;
}

.right-terminal-column {
  flex: 1 1 50ch;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 10ch);
  min-height: 20ch;
}

.right-terminal-column .terminal {
  flex: 1 1 0;
}

.right-terminal-column p {
  margin-bottom: 10ch;
}

.terminal {
  border-radius: .5ch;
  border: 1px solid #ACADBC;
  color: #59ABA8;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 60ch;
}


.terminal-top {
  border-radius: .5ch;
  border: 1px solid #ACADBC;
  color: #59ABA8;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 25ch;
}

.terminal-bottom {
  border-radius: .5ch;
  border: 1px solid #ACADBC;
  color: #59ABA8;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 25ch;
}

.terminal-header {
  background-color: #030c11;
  padding: 0 3ch;
  height: 4ch;
  align-items: center;
  border-bottom: 1px solid #ACADBC;
  display: flex;
}

.terminal-body {
  background-color: #02111B;
  display: flex;
  flex-direction: column;
  height: calc(100% - 4ch - 1px);
  padding: 1ch 4ch;
  margin: 0;
}

.terminal-body p{
  margin: 0 0 1ch 0;
  white-space: pre-wrap;
}

.active-line {
  text-indent: -3ch;
  margin: 0;
}

.terminal-body .logo {
  white-space: pre;
  margin: 0;
}

.active-line::before {
  content: ">  ";
  color: #ACADBC;
}

a[href^="tel:"] {
  color: inherit;
}

@media (max-width: 768px) {
  .right-terminal-column {
    height: auto; 
  }
  .right-terminal-column .terminal{
    flex: none;
  }
}