:root {
  --000: hsl(250, 17%, 00%);
  --100: hsl(250, 15%, 12%);
  --200: hsl(250, 12%, 22%);
  --300: hsl(250, 11%, 30%);
  --400: hsl(250, 10%, 40%);
  --500: hsl(250, 10%, 50%);
  --600: hsl(250, 10%, 60%);
  --700: hsl(250, 10%, 70%);
  --800: hsl(250, 10%, 80%);
  --900: hsl(250, 10%, 94%);
  --999: hsl(250, 10%, 100%);
  --bg: var(--999);
  --fg: hsl(220, 50%, 20%);
  --accent: hsl(220, 100%, 50%);
  --black: hsl(220, 0%, 0%);
  --white: hsl(220, 0%, 100%);
  --red: hsl(3, 100%, 67%);
  --green: hsl(129, 67%, 47%);
  --yellow: hsl(41, 99%, 59%);
  --aqua: hsl(160, 100%, 60%);
  --gray: var(--700);
  --light-gray: var(--900);
  --headline: "Outfit";
  --body: "DM Sans";
  --radius: 3px;
}

body {
  font: 400 100%/1.5 var(--body), sans-serif;
  color: var(--fg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

@media (min-width: 25em) {
  body {
    font-size: 125%;
  }
}

a:link {
  color: var(--accent);
}

h1, h2, h3, h4, h5, h6, p,
ul, ol, dl, code, img, figure, table, video, hr {
  margin-bottom: 2.5rem;
}

h1, h2, h3, h4, h5, h6 {
  font: 600 1.5em/1 var(--headline), sans-serif;
  letter-spacing: -0.03em;
}

@media (min-width: 25em) {
  h1 { font-size: 2.25em; font-weight: 800; }
  h2 { font-size: 1.8em;  font-weight: 700; }
  h3 { font-size: 1.55em;  font-weight: 600; }
  h4 { font-size: 1.33em;  font-weight: 600; }
  h5 { font-size: 1.2em;  font-weight: 600; }
  h6 { font-size: 1.1em;  font-weight: 600; }
}

code {
  background: var(--light-gray);
  color: var(--fg);
  padding: 0.25em;
  border-radius: 4px;
  font-family: monospace;
}

pre code {
  display: block;
  background: var(--black);
  color: var(--bg);
  padding: 1em;
  border-radius: 3px;
  overflow-y: scroll;
}

table {
  border-collapse: collapse;
  font-size: 90%;
}

td, th {
  border: 1px solid var(--800);
  padding: 0.33em 0.5em;
}

th {
  background: var(--900);
}

hr {
  color: var(--light-gray);
}

.logo {
  font: 800 1.5em/1 var(--headline), sans-serif;
  text-align: center;
  letter-spacing: -0.05em;
  margin: 0 auto;
}

@media (min-width: 35em) {
  .logo {
    font-size: 2.25em;
  }
}

h1 a,
nav a {
  text-decoration: none;
  color: inherit;
}

nav ul {
  list-style: none inside;
  padding: 0;
  text-align: center;
  margin: 0 auto;
}

nav a {
  font-weight: 700;
  letter-spacing: -0.04em;
  padding: 0 1.5em;
}

@media (min-width: 25em) {
  nav {
    display: flex;
    justify-content: center;
  }

  nav li {
    float: left;
  }

  nav a {
    display: inline-block;
  }

  nav li:before {
    content: "|";
    color: var(--800);
  }
  nav li:first-of-type:before {
    display: none;
  }
}

header {
  margin: 1rem auto;
}

main {
  display: flex;
  margin: 0 auto;
  padding: 1em;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 35em) {
  main {
    max-width: 32em;
    padding: 4em 2em;
  }
}

@media (min-width: 35em) {
  main {
    max-width: 36em;
    padding: 4em 2em;
  }
}

.term {
  margin-bottom: 3em;
}

.term-title {
  background: var(--200);
  display: flex;
  padding: 0.75em;
  border-radius: 0.33em 0.33em 0 0;
}

.term-btn {
  font-size: 1.25em;
  margin-right: 0.25em;
  width:  0.5em;
  height: 0.5em;
  border-radius: 1em;
}

.term-message {
  background: var(--100);
  color: var(--bg);
  border-radius: 0 0 0.25em 0.25em;
  padding: 1em 1em 1em 2em;
  font: normal 80%/1.75 "JetBrains Mono", monospace;
  position: relative;
}

.term-message:before {
  content: "$";
  font-weight: 900;
  color: var(--aqua);
  position: absolute;
  top: 1em;
  left: 0.75em;
}

.term-message:after {
  display: inline-block;
  content: " ";
  width: 1ch;
  height: 1.75ch;
  border-radius: 2px;
  background: var(--aqua);
  position: absolute;
  top: 1.25em;
  left: 2em;
  z-index: 2;
  animation: 1.5s infinite cursor-blink;
}

.red { background: var(--red);}
.yellow { background: var(--yellow);}
.green { background: var(--green);}

@keyframes cursor-blink {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.button {
  display: inline-block;
  margin: 1em auto;
  padding: 0.66em 1.66em;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 3px;
  font-weight: 700;
  text-decoration: none;
  font-family: var(--headline);
}

.cta {
  margin: 4em auto;
}

footer {
  margin-top: auto;
  padding: 0.25em;
  font-size: 0.75em;
  text-align: center;
  color: var(--gray);
}

form {
  display: flex;
  width: 100%;
  flex-direction: column;
}

form .button {
  margin: 2em auto;
  text-align: center;
}

label,
input,
textarea {
  display: block;
  width: 100%;
}

input:invalid {
  outline: 2px solid var(--red);
}

input,
textarea {
  padding: 0.5em 1em;
  margin-bottom: 1em;
  border-radius: var(--radius);
}

textarea {
  width: 100%;
  min-height: 12em;
}

label {
  font-family: var(--headline);
  font-weight: 700;
}

.g-recaptcha {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1em auto 0;
}

.work-grid {
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 35em) {
  .work-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.work-item {
  border-radius: 3px;
  overflow: hidden;
}

.work-item img {
  margin: 0 auto;
}

.post main  {
  display: block;
}

.tag-list a {
  color: inherit;
  text-decoration: none;
}

.tag-item{
  padding-bottom: 3em;
  border-bottom: 1px solid var(--700);
}

.tag-item:last-of-type {
  border: none;
}