@import "variables.css";
@import "matrix-background.css";
@import "header.css";
@import "inputs.css";

@import "terminals/terminals.css";

* {
  margin: 0;
  font-family: var(--font-family);
  color: var(--main-text-color);

  scroll-behavior: smooth;
}

.transitioning * {
  transition: color 2s ease, background-color 2s ease, fill 2s ease;
}

/* Global styles for everything */

html {
  ::-webkit-scrollbar {
    width: 15px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: rgb(from var(--secondary-color) r g b / 0.5);
    border-left: 2px solid var(--main-text-color);
  }

  ::-webkit-scrollbar-track {
    background-color: transparent;
    border: none;
    border-left: 2px solid var(--main-text-color);
  }
}

body {
  background: var(--document-background-color);
  height: 100%;
}

outermain {
  display: flex;
  flex-direction: column;
  align-items: center;
}

main {

  margin-top: 40px; /* make room for the sticky header */

  width: min(calc(100% - ( 2 * var(--spacing))), 1300px);
  padding: var(--spacing);
  display: grid;
  grid-template-columns: 400px 1fr 400px;
  grid-gap: var(--spacing);
  position: absolute;
  z-index: 1;
  top: 0;
}


h1 {
  font-weight: 500;
}

p {
  font-weight: 300;
  font-family: var(--font-family-monospace);
}

input {
  font-weight: 500;
}

rawhtml {
  display: block;
}

@media screen and (max-width: 940px) {
  main {
    display: flex;
    flex-direction: column;
  }
}