*,*::after,*::before {
  box-sizing: border-box;
}

:root {
  font-size: 16px;
  --color-text: #111;
  --color-bg: #e3efed;
  --color-bg-alt: #8ca9af;
  --color-link: rgba(0,0,0,0.6);
  --color-link-hover: #000;
  --page-padding: 1.5rem;
  --color-title: #000;
}
.demo-3 {
  --color-bg: #ece6df;
  --color-bg-alt: #8b8078;
  --color-title: #191818;
}

body {
  margin: 0; padding: 0;
  color: var(--color-text); width: 100vw;
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: url(../img/noise.png), radial-gradient(circle, var(--color-bg) 0%, var(--color-bg-alt) 100%);
  background-size: 150px, 100% 100vh;
}
main.covered {
	position: relative; width: 100vw; height: 90vh; background-color: #bbaadd;
	background-image: url('images/grandentry.jpg'); background-position: center center;
	background-size: cover; background-repeat: no-repeat;
}
footer {
	display:flex; align-items: center; justify-content: center; width: 100vw;
	border-top: 0.5rem double var(--accent); position: relative;
}
footer p {padding: 0.5rem; background: rgba(255,255,255,0.5);
	border: 8px double var(--accent); -webkit-border-radius: 999vh; border-radius: 999vh;
}
footer a:link, footer a:visited { color: var(--other);}

/* Page Loader */
.js .loading::before,.js .loading::after {
  content: ""; position: fixed; z-index: 1000;
}
.js .loading::before {
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--color-bg);
}
.js .loading::after {
  top: 50%; left: 50%;
  width: 60px; height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%; opacity: 0.4;
  background: var(--color-link-hover);
  animation: loaderAnim 0.7s linear infinite alternate forwards;
}

@keyframes loaderAnim {
  to {
    opacity: 1;
    transform: scale3d(0.5, 0.5, 1);
  }
}
a {
  text-decoration: none;
  color: var(--color-link);
  outline: none; cursor: pointer;
}
a:hover {
  text-decoration: underline;
  color: var(--color-link-hover);
  outline: none;
}
a:focus {
  outline: none; background: lightgrey;
}
a:focus:not(:focus-visible) {background: transparent;}
a:focus-visible {
  outline: 2px solid red; background: transparent;
}
div.ider {display:flex; width: 100vw; text-align:center; padding: 5vh 0 5vh 0; margin: 0;
	flex-direction: row; align-items: center; justify-content: center; 
	background: var(--primary); position:relative;
}
div.ider::after {content: ''; width: 66%; margin: 0 auto; display: inline-block; 
	border-bottom: 8px double var(--accent); position: absolute; bottom: 3vh;
}
.unbutton {
  background: none; border: 0;
  padding: 0; margin: 0;
  font: inherit; cursor: pointer;
}
.unbutton:focus {outline: none;}
.mainframe {
  padding: var(--page-padding);
  position: relative;
  display: grid; z-index: 1000;
  width: 100%; height: 100%;
  grid-row-gap: 1rem;
  grid-column-gap: 2rem;
  pointer-events: none;
  justify-items: start;
  grid-template-columns: auto auto;
  grid-template-areas: "title" "archive" "back" "github" "demos" "sponsor" "tags";
}
.mainframe #cdawrap {justify-self: start;}
.mainframe a {pointer-events: auto;}
.frame__title {
  grid-area: title; font-size: inherit;
  margin: 0;
}
.frame__back {
  grid-area: back; justify-self: start;
}
.frame__archive {
  grid-area: archive; justify-self: start;
}
.frame__tags {grid-area: tags;}
.frame__github {grid-area: github;}
.frame__demos {
  grid-area: demos; display: flex; gap: 1rem;
}
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh; width: 100%;
  position: absolute;
  left: 0; top: 0;
}
.gloock-regular {
  font-family: "Gloock", serif;
  font-weight: 400;
  font-style: normal;
}
.debug {
  position: absolute;
  top: 50%; left: 50%;
  width: 100vw; height: 1px;
  border-radius: 5px;
  background-color: red;
  transform: translate(-50%, -50%);
}
.scene {
  perspective: 1000px;
  overflow: hidden; position: absolute;
  display: flex; justify-content: center;
  align-items: center;
  height: 90vh; width: 100vw;
  left: 0; top: 0; background-color: rgba(255,255,255,0.5);
}

.card {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.card__img {
  width: 5em;
  border-radius: 5px;
  aspect-ratio: 2/3;
  background-position: center;
  background-size: cover;
}
.headings {
  text-align: center;
  position: relative; z-index: 10;
  color: var(--color-title);
}
.headings__main {
  line-height: 90%;
  font-size: clamp(2.5rem, 1.59rem + 3.883vw, 6.25rem);
}
.headings_subtitle {
  line-height: 0.5; margin-top: -1rem;
  font-size: clamp(1rem, 0.757rem + 1.036vw, 2rem);
}
.golden.bar {z-index: 8888; font-size: 1.25rem;
	position: -webkit-sticky; position: sticky;
	top: 0; border-top: 8px double var(--accent);
	border-bottom: 8px double var(--accent); text-align: center;
	display: flex; flex-direction: row; align-items: center; 
	justify-content: center; padding: 0;
}
.smeared {aspect-ratio: 1.46/1;
	-webkit-mask-image: url('images/smeared.png');
	mask-image: url('images/smeared.png'); mask-size: contain;
	background-image: url('images/rococo-floral.jpg'); background-size: cover; 
	background-position: center center; display: inline-block;
	float: right; margin: 1.25em; width: 40%;
}
.trellis-grid .full.center,
.trellis-grid .full.justify {display:flex; align-items: center; justify-content: center; height: 100%; }
.trellis-grid .full.center>.boxed, .trellis-grid .full.justify>.boxed {
	width: 100%; max-width: 920px; border: 0.75rem double var(--accent); padding: 3rem;
	-webkit-border-radius: 2rem; border-radius: 2rem; margin: 0 0 10vh 0;
}
.trellis-grid .full.center>.boxed>.accent {margin: 0 auto;}
ul.firstcap li::first-letter {
	font-weight: 900; font-size: 150%;
}
img.prt {
	-webkit-border-radius: 50%; border-radius: 50%; 
	width: 100%; max-width: 222px; height: auto !important;
	border: 0.75rem double var(--accent); padding: 0; margin: 1.5rem;
}
.ebooklink {aspect-ratio: 0.77/1; overflow: hidden; margin: 0 auto;
	display: inline-block; -webkit-border-radius: 8px; border-radius: 8px;
	border: 8px double var(--accent);
}
.fwlink {aspect-ratio: 1.4/1; overflow: hidden; margin: 0 auto; display: inline-block;}
.fwlink img, .ebooklink img {width: 100%; height: 100%; padding: 0; margin: 0; object-fit: cover;}
img.responsive {width: 100%; height: auto !important; }
.linklist {padding: 0; margin: 0; list-style: none; text-align: left; width: 100%;}
.linklist li {margin: 0 0 0.5em 0; width: 100%;}
.linklist li a{display:block; width: 100%; border-left: 8px double var(--accent);
	padding: 0.5rem; border-bottom: 1px solid var(--accent);
}
.linklist li a:link,.linklist li a:visited { color: var(--secondary); }
.linklist li a:hover {color: var(--accent); text-decoration: none;}

@media screen and (min-width: 53em) {
  .mainframe {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    grid-template-columns: auto auto auto 1fr;
    grid-template-rows: auto auto;
    align-content: space-between;
    grid-template-areas: "title back archive github sponsor" "tags tags tags demos demos";
  }
  .mainframe #cdawrap,
  .frame__demos {justify-self: end;}
  .card__img {width: 6em;}
}

/* BALDUR BUTTON */
.baldur-btn {
  position: relative; border-width: 4px 12px; z-index: 0;
  border-style: solid; border-color: transparent;
  padding: 8px 24px; text-align: center; color: #fff;
  transition-property: transform; font-weight: 600;
  transition-duration: .4s; margin: 1.5em auto;
}
.golden.bar .baldur-btn {margin: 1.25em;}
.baldur-btn .btn-bg {
  $offset: 12px;
  position: absolute;
  z-index: -1; inset: 0;
  clip-path: polygon(
    #{$offset} 0, calc(100% - #{$offset}) 0%, 100% #{$offset},
    100% calc(100% - #{$offset}), calc(100% - #{$offset}) 100%,
    #{$offset} 100%, 0% calc(100% - #{$offset}), 0% #{$offset},
  );
  background-color: rgba(0,0,0,0.5);
  transition-property: filter;
  transition-duration: .2s; will-change: filter;
}
.baldur-btn:hover .btn-bg {background-color: rgba(255,255,255,0.5);}
.baldur-btn:hover { color: #000;}
.btn-b {
  position: absolute; z-index: -2; inset: -4px -12px;
  @supports (-webkit-mask-box-image: inherit) or (mask-border: inherit) {
	  background-color: #fff;
    -webkit-mask-box-image-source: url('baldur.svg');
    -webkit-mask-box-image-slice: 15 23;
    -webkit-mask-box-image-width: 15px 23px;
    -webkit-mask-box-image-repeat: repeat;
    mask-border-source: url('baldur.svg');
    mask-border-slice: 15 23;
    mask-border-width: 15px 23px;
    mask-border-repeat: repeat;
  }
  
  @supports not ((-webkit-mask-box-image: inherit) or (mask-border: inherit)) {
    border-width: 15px 23px;
    border-style: solid; border-color: transparent;
    border-image-source: url('baldur.svg');
    border-image-slice: 15 23;
    border-image-width: 15px 23px;
    border-image-repeat: repeat;
    background-color: transparent;
    background-origin: content-box, border-box;
    background-repeat: no-repeat;
    filter: invert(100%);
  }
}
.baldur-btn.alt .btn-b{
	@supports (-webkit-mask-box-image: inherit) or (mask-border: inherit) {
		background-color: var(--accent);
	}
	@supports not ((-webkit-mask-box-image: inherit) or (mask-border: inherit)) {
		background-color: transparent; border-color: transparent;
	}
}

@media screen and (max-width: 768px) {
	.golden.bar {font-size: 1rem;}
	.baldur-btn {margin: 0.75em;}
}

/* B-TABS */
.b-tabs {
	list-style: none; margin: 0 0 1.75rem 0; padding: 0; display: block;
}
.tabs__nav {font-size: 1.15rem;}
.tabs__nav_link {
	cursor: pointer; text-decoration: none; font-weight: 900; padding: 0.75rem;
	border: 1px solid var(--other); color: var(--secondary);
}
.tabs__nav_link:hover {background-color: var(--accent); text-decoration: none;}
.tab-content {
	display: block; transition: opacity 0.2s; color: var(--secondary);
	border: 1px solid var(--other);
}
.b-tabs.style__horizontal .tab-content,
.b-tabs.style__vertical .tab-content {
	height: 0; opacity: 0;
	overflow: hidden; visibility: hidden;
}
.b-tabs.style__horizontal .tab-content.is__active,
.b-tabs.style__vertical .tab-content.is__active,
.tab-content.is__active {
	opacity: 1; height: auto; flex-grow: 1;
	visibility: visible; padding: 1rem;
}
/* B-TABS: horizontal */
.b-tabs.style__horizontal .tabs__nav {
	position: relative;
	z-index: 2; display: flex;
	margin-bottom: -1px;
}
.b-tabs.style__horizontal .tabs__nav .tabs__nav_link {
	display: block; border-bottom: 0;
	margin: 0 3px; background: var(--primary);
}
.b-tabs.style__horizontal .tabs__nav .tabs__nav_link.is__active {
	background: var(--auxiliary); color: var(--accent);
}
.b-tabs.style__horizontal .tab-content.is__active {
	background: var(--primary); position: relative; z-index: 1;
}
.b-tabs.style__horizontal .tab-content .tabs__nav_link {display: none;}
/* B-TABS: vertical */
.b-tabs.style__vertical {display: flex; width: 100%;}
.b-tabs.style__vertical .tabs__nav {flex: 0 0 auto;}
.b-tabs.style__vertical .tabs__nav .tabs__nav_link {
	border: 1px solid var(--other);
	border-right: 0; margin: 0;
	padding: 0.75rem; background: var(--primary);
	display: block; transition: all 0.5s ease;
}
.b-tabs.style__vertical .tabs__nav .tabs__nav_link.is__active {
	font-weight: bold; background: #e51d2b; color: #fff;
}
.b-tabs.style__vertical .tabs__nav .tabs__nav_link:hover{background: #a2a2a2; color: #fff;}
.b-tabs.style__vertical .tab-content {flex-grow: 1; width: 0;}
.b-tabs.style__vertical .tab-content .tabs__nav_link{display: none;}
.b-tabs.style__vertical .tab-content.is__active {
	border: 1px solid var(--other);
	background: var(--primary); position: relative;
	z-index: 1; width: 100%; flex-basis: 100%;
}
/* B-TABS: accordion */
.b-tabs.style__accordion, .b-tabs.is__responsive {display: block;}
.b-tabs.style__accordion .tabs__nav,.b-tabs.is__responsive .tabs__nav {
	display: none;
}
.b-tabs.style__accordion .tabs__nav_link,
.b-tabs.is__responsive .tabs__nav_link,
.b-tabs.style__accordion .tab-content .tabs__nav_link,
.b-tabs.is__responsive .tab-content .tabs__nav_link {
	display: block; padding: 0.75rem; 
}
.b-tabs.style__accordion .tabs__nav_link.is__active,
.b-tabs.is__responsive .tabs__nav_link.is__active {
	margin-bottom: 0;
	background: var(--accent); color: var(--secondary);
}
.b-tabs.style__accordion .tab-content,
.b-tabs.is__responsive .tab-content {
	border: 1px solid var(--other);
	padding: 0; margin: 0;
	background: var(--primary); display: block;
	height: auto; flex: none;
	opacity: 1; visibility: visible;
	overflow: auto; width: auto;
}
.b-tabs.style__accordion .tab_content_wrapper,
.b-tabs.is__responsive .tab_content_wrapper {
	height: 0; overflow: hidden;
	transform: scaleY(0);
	transition: transform 0.2s;
	transform-origin: top left;
}
.b-tabs.style__accordion .tab-content.is__active .tab_content_wrapper,
.b-tabs.is__responsive .tab-content.is__active .tab_content_wrapper {
	height: auto; transform: scaleY(1); padding: 1rem;
}