@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('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap'); */

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

html {
  /* font-size: clamp(10px,2vmin,18px); */
  font-size: 2vmin; /* need to figure out a way to add a minimum which doesn't break on mobile */
  scroll-behavior: smooth;
  color: black;
  font-family: Nunito, sans-serif;
}

/* html, body, #page {
  width: 100vw;
} */

/* html{
  outline: 1px solid red;
  outline-offset: -10px;
}
body{
  outline: 1px solid orange;
  outline-offset: -10px;
}
#page{
  outline: 1px solid blue;
  outline-offset: -10px;
} */

:root{
  --r-1: 2rem;
  --p-1: 1.5rem;
  --c-bkg: white;
  /* --c-1: #00C2FF; */
  --c-1: #ececec;
  --c-2: black;
  --c-3: #0477d7;
  --viewportWidth: calc(100vw - var(--scrollbarWidth));
}

@keyframes pageload {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

body {
  animation: pageload 1.5s 1;
}

.site-logo {
  height: 5rem;
  width: 5rem;
  transform: rotateZ(0deg) translateY(1.2rem);
  transition: 0.2s all;
  /* border: 3px solid var(--c-1); */
  border-radius: 1rem;
  z-index: 2;
}

.site-logo:hover {
  transform: rotateZ(4deg) translateY(1.2rem) scale(1.1);
}

.site-header {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 1rem;
}

.no-flexbox-gap .site-header>*:not(:last-child) {
  margin-right: 1rem;
}

.site-title {
  font-family: Bebas Neue;
  font-style: normal;
  font-weight: normal;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  width: auto;
  margin: 3rem 0 0 0;
}

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

.page-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.btn {
  transition: all 0.2s;
  font-family: Nunito, sans-serif;
  cursor: pointer;
}

a:hover, .btn:hover {
  text-decoration: none;
}

article {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: min(60rem, var(--viewportWidth));
}

.no-flexbox-gap article > *:not(:last-child) {
  margin-bottom: 1rem;
}


article > header {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
  gap: 2rem;
}

.no-flexbox-gap article > header > *:not(:last-child) {
  margin-bottom: 2rem;
}

article > header > aside {
  font-size: max(1rem, 10pt);
  max-width: 60ch;
}

.inset {
  background: var(--c-1);
  padding: 4rem 0;
  position: relative;
  width: var(--viewportWidth);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.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);
}

.inset > article {
  
}

h1 {
  font-family: Bebas Neue;
  font-size: 3.5rem;
  color: var(--c-2);
  line-height: 0.77;
  width: 17ch;
  /* for scrolling */
  padding-top: 0.75rem;
}

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

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

@import '_nav.css';

@import '_hero.css';

@import '_blurb.css';

@import '_showcase.css';

@import '_screenshots.css';

@import '_systems.css';

@import '_pricing.css';

@import '_download.css';

@import '_reviews.css';

@import '_contact.css';

@import '_footer.css';