/* lexend-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lexend-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lexend-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/lexend-v26-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-sans-tamil-regular - latin_tamil */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans Tamil';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/noto-sans-tamil-v31-latin_tamil-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-sans-tamil-700 - latin_tamil */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans Tamil';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/noto-sans-tamil-v31-latin_tamil-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* jetbrains-mono-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/jetbrains-mono-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

[hidden] {
  display: none !important;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body{
  padding: 1em;
  margin: 0; /* essential stuff */
  font-family: Lexend !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 
  "header"
  "form"
  "textarea"
  "error"
  "footer";
}
  main { display: contents; }
  form { grid-area: form; }
  header { grid-area: header; }
  textarea { grid-area: textarea; }
  #error-message { grid-area: error; }
  footer { grid-area: footer; }

h2, h1{
  font-family: JetBrains Mono !important;
}

#mode-selection {
  display: flex;
  flex-direction: column;
  align-items: start;
}
#mode-selection > * {
  flex: 1;
  width: 100%;
  min-width: 100px;
}

.tamil-text{
  font-family: Noto Sans Tamil;
}

#idaiyinam-sub-options
{
  margin-top: calc(var(--pico-spacing) * .375); /* same formula as the one pico.css itself uses */
  margin-left: 2em;
}

#error-message {
  background-color: darkred;
}

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
footer > small {
  text-align: center;
  text-justify: inter-word;
  margin-top: 0.5em;
}

@media (min-width: 600px) {
  body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "header   header   header   header"
      ".  form     form     ."
      ".  textarea textarea ."
      ". error error ."
      ". footer   footer .";
  }

  #mode-selection {
    flex-direction: row;
    gap: 4em;
  }
  #consonant-normal-section, #vowel-normal-section {
    display: grid;
    grid-template-columns: 1fr 2fr; /* width of <form element is already set, no need to worry */
    grid-template-areas:
    "coarse fine"
    "diacritic diacritic";
  }

  #consonant-section, #vowel-section > h2{
    grid-area: head;
  }
  .alpha-fieldset {
    grid-area: checkbox;
  }

  .extended-fieldset {
    grid-area: extended;
  }
  
  .coarse-fieldset {
    grid-area: coarse;
  }
  
  .fine-fieldset {
    grid-area: fine;
  }
  .diacritic-fieldset {
    grid-area: diacritic;
  }
}