blowfish/assets/css/main.css

/*! Blowfish | MIT License | https://github.com/nunocoracao/blowfish */

@tailwind base;
@tailwind components;
@tailwind utilities;

body a,
body button {
  @apply transition-colors;
}

/* Scale SVG icons to text size */
.icon svg {
  @apply h-[1em] w-[1em];
}

/* Search */
#search-query::-webkit-search-cancel-button,
#search-query::-webkit-search-decoration,
#search-query::-webkit-search-results-button,
#search-query::-webkit-search-results-decoration {
  @apply hidden;
}

/* Hamburger menu */
body:has(#menu-controller:checked) {
  @apply overflow-y-hidden;
}

#menu-button:has(#menu-controller:checked) {
  @apply invisible;
}

#menu-controller:checked~#menu-wrapper {
  @apply visible opacity-100;
}

/* RTL support */
.prose blockquote {
  @apply rtl:pr-4 rtl:border-l-0 rtl:border-r-4;
}

.prose ul>li,
.prose ol>li {
  @apply rtl:pl-0 rtl:pr-2 rtl:mr-7;
}

.prose ol>li:before,
.prose ul>li:before {
  @apply rtl:left-auto rtl:right-1;
}

.prose thead td:first-child,
.prose thead th:first-child {
  @apply rtl:pr-0;
}

.prose thead td:last-child,
.prose thead th:last-child {
  @apply rtl:pl-0;
}

/* Adjust first child within prose */
.prose div.min-w-0.max-w-prose>*:first-child {
  @apply mt-3;
}

/* Table of Contents */
.toc ul,
.toc li {
  @apply px-0 leading-snug list-none;
}

.toc ul ul {
  @apply ltr:pl-4 rtl:pr-4;
}

.toc a {
  @apply font-normal text-neutral-700 dark:text-neutral-400;
}

.toc ul>li {
  @apply rtl:mr-0;
}

/* Code Copy */
.highlight-wrapper {
  @apply block;
}

.highlight {
  @apply relative z-0;
}

.highlight:hover>.copy-button {
  @apply visible;
}

.copy-button {
  @apply absolute top-0 right-0 z-10 invisible w-20 py-1 font-mono text-sm cursor-pointer opacity-90 bg-neutral-200 whitespace-nowrap rounded-bl-md rounded-tr-md text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200;
}

.copy-button:hover,
.copy-button:focus,
.copy-button:active,
.copy-button:active:hover {
  @apply bg-primary-100 dark:bg-primary-600;
}

.copy-textarea {
  @apply absolute opacity-5 -z-10;
}

/* -- Chroma Highlight -- */
/* Background */
.prose .chroma {
  @apply static rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
}

/* LineTableTD */
.chroma .lntd,
.chroma .lntd pre {
  @apply p-0 m-0 align-top border-none;
}

/* LineTable */
.chroma .lntable {
  @apply block w-auto px-4 py-3 overflow-hidden text-base;
  border-spacing: 0;
}

/* LineHighlight */
.chroma .hl {
  @apply block w-auto px-4 -mx-4 bg-primary-100 dark:bg-primary-900;
}

.chroma .lntd .hl {
  @apply p-0 m-0;
}

/* LineNumbersTable */
/* LineNumbers */
.chroma .lnt,
.chroma .ln {
  @apply text-neutral-600 dark:text-neutral-300 mr-[0.4em] px-[0.4em] py-0;
}

/* Keyword */
/* KeywordDeclaration */
/* KeywordNamespace */
/* KeywordPseudo */
/* KeywordReserved */
/* NameClass */
/* NameFunctionMagic */
/* NameNamespace */
/* NameVariableClass */
/* Operator */
.chroma .k,
.chroma .kd,
.chroma .kn,
.chroma .kp,
.chroma .kr,
.chroma .nc,
.chroma .fm,
.chroma .nn,
.chroma .vc,
.chroma .o {
  @apply text-primary-600 dark:text-primary-300;
}

/* KeywordConstant */
.chroma .kc {
  @apply font-semibold text-secondary-400 dark:text-secondary-500;
}

/* KeywordType */
/* NameVariable */
/* NameVariableInstance */
/* NameVariableMagic */
/* LiteralNumber */
/* LiteralNumberBin */
/* LiteralNumberFloat */
/* LiteralNumberHex */
/* LiteralNumberInteger */
/* LiteralNumberIntegerLong */
/* LiteralNumberOct */
.chroma .kt,
.chroma .nv,
.chroma .vi,
.chroma .vm,
.chroma .m,
.chroma .mb,
.chroma .mf,
.chroma .mh,
.chroma .mi,
.chroma .il,
.chroma .mo {
  @apply text-secondary-400 dark:text-secondary-600;
}

/* Name */
/* NameDecorator */
/* NameEntity */
/* NameLabel */
.chroma .n,
.chroma .nd,
.chroma .ni,
.chroma .nl {
  @apply text-secondary-900 dark:text-secondary-200;
}

/* NameAttribute */
/* NameBuiltin */
/* NameBuiltinPseudo */
/* NameOther */
/* NameProperty */
/* NameTag */
.chroma .na,
.chroma .nb,
.chroma .bp,
.chroma .nx,
.chroma .py,
.chroma .nt {
  @apply text-secondary-800 dark:text-secondary-300;
}

/* NameConstant */
/* NameException */
/* NameVariableGlobal */
.chroma .no,
.chroma .ne,
.chroma .vg {
  @apply font-semibold text-secondary-400 dark:text-secondary-500;
}

/* NameFunction */
.chroma .nf {
  @apply text-secondary-600 dark:text-secondary-500;
}

/* Literal */
/* LiteralDate */
/* LiteralString */
/* LiteralStringAffix */
/* LiteralStringBacktick */
/* LiteralStringChar */
/* LiteralStringDelimiter */
/* LiteralStringDoc */
/* LiteralStringDouble */
/* LiteralStringHeredoc */
/* LiteralStringInterpol */
/* LiteralStringOther */
/* LiteralStringSingle */
/* GenericInserted */
/* GenericOutput */
/* GenericPrompt */
.chroma .l,
.chroma .ld,
.chroma .s,
.chroma .sa,
.chroma .sb,
.chroma .sc,
.chroma .dl,
.chroma .sd,
.chroma .s2,
.chroma .sh,
.chroma .si,
.chroma .sx,
.chroma .s1,
.chroma .gi,
.chroma .go,
.chroma .gp {
  @apply text-primary-800 dark:text-primary-400;
}

/* LiteralStringEscape */
.chroma .se {
  @apply font-semibold text-secondary-400 dark:text-secondary-500;
}

/* LiteralStringRegex */
/* LiteralStringSymbol */
.chroma .sr,
.chroma .ss {
  @apply font-semibold text-primary-800 dark:text-primary-400;
}

/* OperatorWord */
.chroma .ow {
  @apply font-semibold text-primary-400 dark:text-primary-600;
}

/* Comment */
/* CommentMultiline */
/* CommentSingle */
/* CommentSpecial */
/* CommentPreproc */
/* CommentPreprocFile */
.chroma .c,
.chroma .cm,
.chroma .c1,
.chroma .cs,
.chroma .cp,
.chroma .cpf {
  @apply italic text-neutral-500 dark:text-neutral-400;
}

/* CommentHashbang */
.chroma .ch {
  @apply italic font-semibold text-neutral-500 dark:text-neutral-400;
}

/* GenericEmph */
.chroma .ge {
  @apply italic;
}

/* GenericHeading */
.chroma .gh {
  @apply font-semibold text-neutral-500;
}

/* GenericStrong */
.chroma .gs {
  @apply font-semibold;
}

/* GenericSubheading */
/* GenericTraceback */
.chroma .gu,
.chroma .gt {
  @apply text-neutral-500;
}

/* GenericUnderline */
.chroma .gl {
  @apply underline;
}

/* Custom */

.thumbnail {
  min-width: 300px;
  height: 180px;
  background-repeat:no-repeat;
  background-size:cover; 
  background-position:center;
}

.thumbnail_card {
  height: 250px;
  background-repeat:no-repeat;
  background-size:cover; 
  background-position:center;
}

.thumbnail_card_term {
  height: 150px;
  background-repeat:no-repeat;
  background-size:cover; 
  background-position:center;
}

.single_hero_basic {
  background-repeat:no-repeat;
  background-size:cover; 
  background-position:center;
}

.single_hero_round {
  max-height: 50vh;
  object-fit: cover;
}

.single_hero_background {
  background-repeat:no-repeat;
  background-size:cover; 
  background-position:center;
  width: calc(100% + 40px);
  z-index: -10;
  margin-left: -20px;
}

.hero_gradient {
  width: 100%;
  height: 100%;
}

.thumbnailshadow {
  box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
}

.anchor {
  display: block;
  position: relative;
  top: -100px;
  height: 0px;
  visibility: hidden;
}

@screen sm {
  .thumbnail {
    min-width: 100%;
    height: 180px;
  }
  .article {
    flex-wrap: wrap;
  }
}

@screen md {
  .thumbnail {
    min-width: 300px;
    min-height: 180px;
    height: auto;
  }
  .article {
    flex-wrap: nowrap;
  }
}

.medium-zoom-image--opened {
  z-index: 100;
}

.nested-menu:hover + .menuhide {
  visibility: visible;
  opacity: 1;
  transition: visibility 0.3s, opacity 0.3s ease-in-out ;
}

.menuhide:hover {
  visibility: visible;
  opacity: 1;
  transition: visibility 0.3s, opacity 0.3s ease-in-out ;
}

.menuhide {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s, opacity 0.3s ease-in-out ;
  z-index: 1000;
}

.active {
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}

/* Gallery Specific Styles */
.grid-w10 { width: calc(10% - 5px); margin: 0px !important; }
.grid-w15 { width: calc(15% - 5px); margin: 0px !important; }
.grid-w20 { width: calc(20% - 5px); margin: 0px !important; }
.grid-w25 { width: calc(25% - 5px); margin: 0px !important; }
.grid-w30 { width: calc(30% - 5px); margin: 0px !important; }
.grid-w33 { width: calc(33% - 5px); margin: 0px !important; }
.grid-w35 { width: calc(35% - 5px); margin: 0px !important; }
.grid-w40 { width: calc(40% - 5px); margin: 0px !important; }
.grid-w45 { width: calc(45% - 5px); margin: 0px !important; }
.grid-w50 { width: calc(50% - 5px); margin: 0px !important; }
.grid-w55 { width: calc(55% - 5px); margin: 0px !important; }
.grid-w60 { width: calc(60% - 5px); margin: 0px !important; }
.grid-w65 { width: calc(65% - 5px); margin: 0px !important; }
.grid-w66 { width: calc(66% - 5px); margin: 0px !important; }
.grid-w70 { width: calc(70% - 5px); margin: 0px !important; }
.grid-w75 { width: calc(75% - 5px); margin: 0px !important; }
.grid-w80 { width: calc(80% - 5px); margin: 0px !important; }
.grid-w85 { width: calc(85% - 5px); margin: 0px !important; }
.grid-w90 { width: calc(90% - 5px); margin: 0px !important; }
.grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
.grid-w100 { width: calc(100% - 5px); margin: 0px !important; }

@screen sm {
  .sm\:grid-w10 { width: calc(10% - 5px); margin: 0px !important; }
  .sm\:grid-w15 { width: calc(15% - 5px); margin: 0px !important; }
  .sm\:grid-w20 { width: calc(20% - 5px); margin: 0px !important; }
  .sm\:grid-w25 { width: calc(25% - 5px); margin: 0px !important; }
  .sm\:grid-w30 { width: calc(30% - 5px); margin: 0px !important; }
  .sm\:grid-w33 { width: calc(33% - 5px); margin: 0px !important; }
  .sm\:grid-w35 { width: calc(35% - 5px); margin: 0px !important; }
  .sm\:grid-w40 { width: calc(40% - 5px); margin: 0px !important; }
  .sm\:grid-w45 { width: calc(45% - 5px); margin: 0px !important; }
  .sm\:grid-w50 { width: calc(50% - 5px); margin: 0px !important; }
  .sm\:grid-w55 { width: calc(55% - 5px); margin: 0px !important; }
  .sm\:grid-w60 { width: calc(60% - 5px); margin: 0px !important; }
  .sm\:grid-w65 { width: calc(65% - 5px); margin: 0px !important; }
  .sm\:grid-w66 { width: calc(66% - 5px); margin: 0px !important; }
  .sm\:grid-w70 { width: calc(70% - 5px); margin: 0px !important; }
  .sm\:grid-w75 { width: calc(75% - 5px); margin: 0px !important; }
  .sm\:grid-w80 { width: calc(80% - 5px); margin: 0px !important; }
  .sm\:grid-w85 { width: calc(85% - 5px); margin: 0px !important; }
  .sm\:grid-w90 { width: calc(90% - 5px); margin: 0px !important; }
  .sm\:grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
  .sm\:grid-w100 { width: calc(100% - 5px); margin: 0px !important; }
}

@screen md {
  .md\:grid-w10 { width: calc(10% - 5px); margin: 0px !important; }
  .md\:grid-w15 { width: calc(15% - 5px); margin: 0px !important; }
  .md\:grid-w20 { width: calc(20% - 5px); margin: 0px !important; }
  .md\:grid-w25 { width: calc(25% - 5px); margin: 0px !important; }
  .md\:grid-w30 { width: calc(30% - 5px); margin: 0px !important; }
  .md\:grid-w33 { width: calc(33% - 5px); margin: 0px !important; }
  .md\:grid-w35 { width: calc(35% - 5px); margin: 0px !important; }
  .md\:grid-w40 { width: calc(40% - 5px); margin: 0px !important; }
  .md\:grid-w45 { width: calc(45% - 5px); margin: 0px !important; }
  .md\:grid-w50 { width: calc(50% - 5px); margin: 0px !important; }
  .md\:grid-w55 { width: calc(55% - 5px); margin: 0px !important; }
  .md\:grid-w60 { width: calc(60% - 5px); margin: 0px !important; }
  .md\:grid-w65 { width: calc(65% - 5px); margin: 0px !important; }
  .md\:grid-w66 { width: calc(66% - 5px); margin: 0px !important; }
  .md\:grid-w70 { width: calc(70% - 5px); margin: 0px !important; }
  .md\:grid-w75 { width: calc(75% - 5px); margin: 0px !important; }
  .md\:grid-w80 { width: calc(80% - 5px); margin: 0px !important; }
  .md\:grid-w85 { width: calc(85% - 5px); margin: 0px !important; }
  .md\:grid-w90 { width: calc(90% - 5px); margin: 0px !important; }
  .md\:grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
  .md\:grid-w100 { width: calc(100% - 5px); margin: 0px !important; }
}

@screen lg {
  .lg\:grid-w10 { width: calc(10% - 5px); margin: 0px !important; }
  .lg\:grid-w15 { width: calc(15% - 5px); margin: 0px !important; }
  .lg\:grid-w20 { width: calc(20% - 5px); margin: 0px !important; }
  .lg\:grid-w25 { width: calc(25% - 5px); margin: 0px !important; }
  .lg\:grid-w30 { width: calc(30% - 5px); margin: 0px !important; }
  .lg\:grid-w33 { width: calc(33% - 5px); margin: 0px !important; }
  .lg\:grid-w35 { width: calc(35% - 5px); margin: 0px !important; }
  .lg\:grid-w40 { width: calc(40% - 5px); margin: 0px !important; }
  .lg\:grid-w45 { width: calc(45% - 5px); margin: 0px !important; }
  .lg\:grid-w50 { width: calc(50% - 5px); margin: 0px !important; }
  .lg\:grid-w55 { width: calc(55% - 5px); margin: 0px !important; }
  .lg\:grid-w60 { width: calc(60% - 5px); margin: 0px !important; }
  .lg\:grid-w65 { width: calc(65% - 5px); margin: 0px !important; }
  .lg\:grid-w66 { width: calc(66% - 5px); margin: 0px !important; }
  .lg\:grid-w70 { width: calc(70% - 5px); margin: 0px !important; }
  .lg\:grid-w75 { width: calc(75% - 5px); margin: 0px !important; }
  .lg\:grid-w80 { width: calc(80% - 5px); margin: 0px !important; }
  .lg\:grid-w85 { width: calc(85% - 5px); margin: 0px !important; }
  .lg\:grid-w90 { width: calc(90% - 5px); margin: 0px !important; }
  .lg\:grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
  .lg\:grid-w100 { width: calc(100% - 5px); margin: 0px !important; }
}

@screen xl {
  .xl\:grid-w10 { width: calc(10% - 5px); margin: 0px !important; }
  .xl\:grid-w15 { width: calc(15% - 5px); margin: 0px !important; }
  .xl\:grid-w20 { width: calc(20% - 5px); margin: 0px !important; }
  .xl\:grid-w25 { width: calc(25% - 5px); margin: 0px !important; }
  .xl\:grid-w30 { width: calc(30% - 5px); margin: 0px !important; }
  .xl\:grid-w33 { width: calc(33% - 5px); margin: 0px !important; }
  .xl\:grid-w35 { width: calc(35% - 5px); margin: 0px !important; }
  .xl\:grid-w40 { width: calc(40% - 5px); margin: 0px !important; }
  .xl\:grid-w45 { width: calc(45% - 5px); margin: 0px !important; }
  .xl\:grid-w50 { width: calc(50% - 5px); margin: 0px !important; }
  .xl\:grid-w55 { width: calc(55% - 5px); margin: 0px !important; }
  .xl\:grid-w60 { width: calc(60% - 5px); margin: 0px !important; }
  .xl\:grid-w65 { width: calc(65% - 5px); margin: 0px !important; }
  .xl\:grid-w66 { width: calc(66% - 5px); margin: 0px !important; }
  .xl\:grid-w70 { width: calc(70% - 5px); margin: 0px !important; }
  .xl\:grid-w75 { width: calc(75% - 5px); margin: 0px !important; }
  .xl\:grid-w80 { width: calc(80% - 5px); margin: 0px !important; }
  .xl\:grid-w85 { width: calc(85% - 5px); margin: 0px !important; }
  .xl\:grid-w90 { width: calc(90% - 5px); margin: 0px !important; }
  .xl\:grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
  .xl\:grid-w100 { width: calc(100% - 5px); margin: 0px !important; }
}

@screen 2xl {
  .2xl\:grid-w10 { width: calc(10% - 5px); margin: 0px !important; }
  .2xl\:grid-w15 { width: calc(15% - 5px); margin: 0px !important; }
  .2xl\:grid-w20 { width: calc(20% - 5px); margin: 0px !important; }
  .2xl\:grid-w25 { width: calc(25% - 5px); margin: 0px !important; }
  .2xl\:grid-w30 { width: calc(30% - 5px); margin: 0px !important; }
  .2xl\:grid-w33 { width: calc(33% - 5px); margin: 0px !important; }
  .2xl\:grid-w35 { width: calc(35% - 5px); margin: 0px !important; }
  .2xl\:grid-w40 { width: calc(40% - 5px); margin: 0px !important; }
  .2xl\:grid-w45 { width: calc(45% - 5px); margin: 0px !important; }
  .2xl\:grid-w50 { width: calc(50% - 5px); margin: 0px !important; }
  .2xl\:grid-w55 { width: calc(55% - 5px); margin: 0px !important; }
  .2xl\:grid-w60 { width: calc(60% - 5px); margin: 0px !important; }
  .2xl\:grid-w65 { width: calc(65% - 5px); margin: 0px !important; }
  .2xl\:grid-w66 { width: calc(66% - 5px); margin: 0px !important; }
  .2xl\:grid-w70 { width: calc(70% - 5px); margin: 0px !important; }
  .2xl\:grid-w75 { width: calc(75% - 5px); margin: 0px !important; }
  .2xl\:grid-w80 { width: calc(80% - 5px); margin: 0px !important; }
  .2xl\:grid-w85 { width: calc(85% - 5px); margin: 0px !important; }
  .2xl\:grid-w90 { width: calc(90% - 5px); margin: 0px !important; }
  .2xl\:grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
  .2xl\:grid-w100 { width: calc(100% - 5px); margin: 0px !important; }
}

/* Carousel Specific Styles */
.ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */
.ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
.ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */

@screen sm {
  .sm\:ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */
  .sm\:ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
  .sm\:ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */
}

@screen md {
  .md\:ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */
  .md\:ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
  .md\:ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */
}

@screen lg {
  .lg\:ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */
  .lg\:ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
  .lg\:ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */
}

@screen xl {
  .xl\:ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */
  .xl\:ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
  .xl\:ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */
}

@screen 2xl {
  .2xl\:ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */
  .2xl\:ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
  .2xl\:ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */
}