human-anatomy-3d/src/assets/styles/main.css

@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;
  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: #00C2FF;
  --viewportWidth: calc(100vw - var(--scrollbarWidth));
}

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

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

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

.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 '_info.css';

@import '_screenshots.css';

@import '_systems.css';

@import '_pricing.css';

@import '_download.css';

@import '_reviews.css';

@import '_contact.css';

@import '_footer.css';