@import url(text-loader.css);

:root {
  --blue: hsl(210, 40%, 40%);
  --white: hsl(0, 0%, 100%);
  --light-gray: hsl(210, 10.2%, 80%);
  --deep-gray: hsl(210, 10.2%, 20%);

  --ui-font-family: Fira Sans Condensed;
}

html { height: 100vh;}

body {
  display: grid;
  grid-template: 
    "header header" auto
    "aside main " 1fr
   / 1fr  5fr;
  margin:0;
  height: 100%;
}

header h2,
header h3 {
  text-transform: uppercase;
  font-variant: small-caps;
  color: var(--deep-gray);
  font-family: var(--ui-font-family);
}

body > header {
  background: var(--blue);
  color: var(--white);
  padding:1em;
  display: flex;
  align-items: center;
  grid-area: header;
}

body > header input {
  flex: 1;
}
aside {
  background: var(--light-gray);
  padding:1em;
}

aside form {
  width: 100%;
  display: flex;
}

main {
  padding: 1em;
  gap: 1em;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

code {
  background-color: hsl(49.4, 100%, 80%);
  padding: .2em;
}