www_ourverse.tf/css/layout.css

main {
  @apply pt-0;
}

#text-1xl { @apply text-xl }
#text-2xl { @apply text-2xl }
#text-3xl { @apply text-3xl }
#text-4xl { @apply text-4xl }
#text-5xl { @apply text-5xl }
#text-6xl { @apply xl:text-6xl lg:text-5xl md:text-4xl sm:text-3xl}
#text-7xl { @apply text-7xl }
#text-8xl { @apply text-8xl }
#text-9xl { 
    font-size: 8rem;
}

#xp-heading { @apply m-0 }
/*
html, body {
  @apply dark:bg-black;

body {
  @apply font-serif dark:text-gray-200;
}
*/

p {
  /* for handling Markdown-created <p> and <li> */
  @apply text-lg;
}

pre,
code {
  font-feature-settings: normal;
}

.navWhite,
.navWhite:visited {
  @apply text-white;
}

.navWhite:focus,
.navWhite:active {
  @apply text-gray-400;
}

.text-blue-light {
  @apply text-blue-500;
}

.text-blue-dark {
  /* for dark mode 
  @apply text-blue-200;
  */
}

.text-shadow-titles {
  text-shadow: 4px 4px 2px #000;
}

.gradient-titles {
  @apply bg-gradient-to-b from-blue-700 to-black;
}

.ctr {
  @apply text-center;
}

.legal {
  @apply text-xs;
}

nav h4 a:hover {
  @apply border-0 text-blue-300 font-light;
}
nav h4 a,
nav h4 a:focus,
nav h4 a:active {
  @apply border-0 text-black font-light;
}

a h2 {
  @apply text-black;
}

a:focus,
a:hover {
  @apply border-none text-blue-300;
}
a:active {
  @apply text-blue-800 border-blue-500;
}

h5 a {
  @apply text-gray-900 font-normal;
}

/*
a:hover {
  @apply dark:text-blue-300;
}
*/

sup a,
a.previous,
a.next,
.footnote-return {
  @apply border-b-0;
}

#nav-toggle:checked + #navMenu {
  @apply block;
}

a.navborderless {
  @apply border-b-0;
}
/*
.dateInfo {
  @apply text-gray-700 dark:text-gray-400;
}
*/

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
}

h1,
.h1 {
  @apply text-4xl font-extrabold;
}

h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  @apply font-bold;
}

h2,
.h2 {
  @apply text-4xl;
}

h4,
.h4 {
  @apply text-2xl;
}

h5 {
  @apply not-italic;
}

h5,
.h5,
h6,
.h6 {
  @apply text-lg;
}

.height-hero {
  height: 45vh;
  max-height: 45vh;
  overflow: hidden;
}

.height-post {
  height: 35vh;
  max-height: 35vh;
}

.imgCover {
  @apply object-cover object-center h-full w-full;
}

.background-hero-image-div {
  @apply relative overflow-hidden w-full bg-black;
  /* Have to allow for mobile browsers' own "chrome"; can't go by Inspector simulations of smaller breakpoints */
  height: 80vh;
  max-height: 80vh;
}

.background-hero-title-block-fit {
  @apply block w-full absolute bottom-0 px-4 pt-3 pb-6 bg-gradient-to-t from-black;
}

.background-hero-title-text {
  text-shadow: 4px 4px 2px #000;
}

@media screen and (min-width: 768px) {
  .background-hero-title-block-fit {
    @apply px-12;
  }

  .background-hero-image-div {
    height: 85vh;
    max-height: 85vh;
  }
}

@media screen and (min-width: 1024px) {
  .background-hero-title-block-fit {
    @apply px-16;
  }

  .background-hero-image-div {
    height: 95vh;
    max-height: 95vh;
  }
}

.text-nowrap,
.text-nobrk {
  @apply whitespace-nowrap;
}

article h1,
article h2,
article h3,
article h4 {
  @apply tracking-tight mt-8 mb-6;
}

article p {
  @apply text-lg leading-relaxed;
}

article img.containedImage {
  min-width: 100%;
  max-width: 100%;
  @apply w-full h-auto;
}

@media screen and (min-width: 768px) {
  .height-hero {
    height: 70vh;
    max-height: 70vh;
  }

  .height-post {
    height: 40vh;
    max-height: 40vh;
  }
}

@media screen and (min-width: 768px) {
  article p {
    @apply text-xl leading-relaxed;
  }
}

@media screen and (min-width: 1920px) {
  article p {
    @apply text-2xl leading-relaxed;
  }
}
/*
.yellowBox {
  @apply font-sans bg-yellow-200 border border-gray-900 border-solid mx-auto my-2 w-full px-6 py-2 dark:bg-gray-800 dark:border-gray-500;
}
*/

.yellowbox p {
  @apply w-full p-2 m-0;
}

ul,
ol {
  @apply pl-8;
}

ul {
  @apply list-disc;
}

ol {
  @apply list-decimal;
}

.twitter-tweet {
  @apply mt-4 mx-auto mb-0;
}

table.leagues {
  @apply w-11/12 mt-4 mx-auto mb-0 border-0 border-collapse;
}

table.leagues td.col {
  @apply w-1/2;
}

@media (min-width: 900px) {
  table.leagues {
    @apply w-3/5;
  }
  table.noborders {
    @apply w-11/12;
  }
}

table.noborders {
  @apply w-full border-0 border-collapse mt-6 mx-auto mb-4;
}

table.noborders td {
  @apply text-gray-800 text-left align-middle py-1 pr-0 pl-2;
  /* text-align: left !important; */
}

table.noborders td img {
  @apply inline-block align-middle m-0;
}

table.noborders tr {
  @apply bg-blue-100;
}

table.noborders tr:nth-child(even) {
  @apply bg-gray-200;
}

table.noborders thead tr {
  @apply bg-blue-700;
}

table.noborders thead td {
  @apply text-white font-bold;
}

table.noborders td.td70 {
  width: 70%;
}
table.noborders td.td70 img {
  @apply block w-1/2 h-auto;
  max-width: 50%;
}

table.noborders td.td30 {
  width: 30%;
}
/*
blockquote {
  @apply px-6 text-gray-700 dark:text-gray-400;
}
*/

/* start, footnotes */

.footnote-definition,
.footnote-reference {
  @apply font-sans;
}

.footnote-reference {
  font-size: 0.65em;
  top: -0.5em;
}

.footnote-sim {
  font-size: 0.65em;
  color: #0000ff;
  @media (prefers-color-scheme: dark) {
    color: #00aaff;
  }
}

.footnotes {
  & ol {
    padding-inline-start: 1.5rem;
  }
  & ol li {
    margin-bottom: 0.5rem;
    font-size: $pokey;
  }
  & li p {
    font-size: 100%;
    line-height: 1.4;
  }
  & .footnote-backref {
    font-size: 75%;
  }
}

a.footnote-return {
  font-size: 50%;
}

article > .footnote-definition {
  border-top: 1px solid black;
  padding-top: 1em;
  margin-top: 1em;
}

article > .footnote-definition ~ .footnote-definition {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.footnote-definition-label {
  top: -0.4em;
  font-size: 0.65em;
}

.footnote-definition-label + p {
  font-size: 75%;
  margin-top: -1.75em;
  margin-left: 1em;
  line-height: 1.35;
}

.footnote-definition-label::after {
  content: ".";
}

/* == end, footnotes */

.aspect-16x9 {
  padding-bottom: 56.25%;
}
/*
hr {
  @apply border-solid border-gray-900 dark:border-gray-100;
}
*/

footer {
  @apply font-sans;
}

.lazypicturecaption {
  @apply text-sm p-0 mt-2 leading-snug text-center;
}

.home-colOne p {
  @apply leading-8 mb-4;
}

.home-colOne img {
  @apply my-4;
}

.container-comments {
  margin: 0 auto;
  font-size: 85%;
  width: 85%;
  max-width: 720px !important;
  margin-bottom: 0;
}

@media screen and (min-width: 900px) {
  .container-comments {
    width: 40%;
  }
}