@tailwind base;

a {
  @apply text-blue-700;
}

a:hover {
  @apply underline;
}

@tailwind components;

@tailwind utilities;

.content {
  @apply tracking-wider leading-8 text-xl;
}

.content p {
  @apply my-5;
}

.content h1 {
  @apply text-5xl font-bold mt-12 mb-5 leading-10;
}

.content h2 {
  @apply text-4xl font-bold mt-10 mb-5;
}

.content h3 {
  @apply text-3xl font-bold mt-10 mb-5;
}

.content h4 {
  @apply text-2xl font-bold mt-10 mb-5;
}

.content h5 {
  @apply text-xl font-bold mt-10 mb-5;
}

.content h6 {
  @apply text-lg font-bold mt-10 mb-5;
}

.content ul,
.content ol,
.content p {
  @apply overflow-auto;
}

.content > div > ul,
.content > div > ol {
  @apply my-6;
}

.content ul,
.content ol {
  @apply pl-8;
}

.content ul {
  @apply list-outside list-disc;
}

.content ol {
  @apply list-outside list-decimal;
}

.content pre[class*='language-'] {
  @apply my-8;
}

.content table {
  @apply whitespace-nowrap my-8 border-collapse block overflow-auto;
}

.content th,
.content td {
  @apply border px-8 py-4;
}

.content th {
  @apply bg-gray-100;
}

/*************************************/

/* latin-ext */

/* @font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/bebas-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/bebas-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');

html {
  font-size: 2vmin;
  scroll-behavior: smooth;
}

:root{
  --r-1: 2rem;
  --p-1: 1.5rem;
  --c-bkg: white;
  --c-1: #00C2FF;
  --c-2: black;
}

article {
  padding: 2rem;
}

.inset {
  background: var(--c-1);
  padding: 4rem 0;
  position: relative;
}

.inset::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--r-1);
  border-radius: 0 0 var(--r-1) var(--r-1);
  background: var(--c-bkg);
}

.inset::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--r-1);
  border-radius: var(--r-1) var(--r-1) 0 0;
  background: var(--c-bkg);
}

h1 {
  font-family: Bebas Neue;
  font-size: 3.5rem;
  color: var(--c-2);
  line-height: 0.77;
  width: 17ch;
  margin-bottom: 1rem;
}

h1.h1--hero {
  font-size: 4.2rem;
  width: auto;
}

h2 {
  font-family: Bebas Neue;
  font-size: 3rem;
  color: var(--c-2);
  line-height: 0.85;
}

.hero__wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blurb__wrapper {
  border-radius: var(--radius);
  background: var(--c-bkg);
}

.system__wrapper {
  display: flex;
  flex-direction: column;
}

.system__list { 
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.system__list li {
  aspect-ratio: 1;
  height: 5rem;
  background: var(--c-1);
  border-radius: var(--r-1);
}