/*----- CONTAINER -----*/
.page-cont {
  position:absolute;
  top:0;left:0;right:0;
  min-height:100vh;
  display:flex;
  flex-flow:column nowrap;
  align-items:center;
  margin-inline:auto;
  width:clamp(var(--Container-Min-Width),var(--Container-Width),var(--Container-Max-Width));
}

.page-cont::before, .page-cont::after {
	content:"";
	flex:1 0;
	min-height:var(--Screen-Gaps);
}

@supports(width:fit-content){
  .page-cont {
    width:fit-content;
    max-width:min(var(--Container-Width),var(--Container-Max-Width));
  }
}

/*----- BASICS -----*/
* {
  box-sizing:border-box;
}

html {
  scrollbar-gutter:stable both-edges;
}

body {
  margin:0;
  font:var(--Body-Font-Weight,normal) var(--Body-Font-Size,0.9rem)/var(--Body-Line-Height,1.5) var(--Body-Font-Family), sans-serif;
  color:var(--Body-Text-Color);
  background-color:var(--Background-Color);
  background-image:var(--Background-Image);
  background-repeat:repeat;
  background-attachment:fixed;
}

a { text-decoration:none }

b, strong {
  font-weight:var(--Bold-Font-Weight);
}

canvas, img, video { vertical-align:middle }
button { cursor:pointer }

:is(h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol):first-child {
  margin-top:0;
}

:is(h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol):last-child {
  margin-bottom:0;
}

blockquote > p:first-child {
  margin-top:0;
}

blockquote > p:last-child {
  margin-bottom:0;
}

nav > ul {
  margin:0;
	padding:0;
	list-style:none;
}

.faded:not(a > .faded) {
  color:rgb(from var(--Boxes-Text-Color,#000) r g b / 75%);
}

/*----- HEADINGS -----*/
h1, h2, h3 {
  font-family:var(--Heading-Font-Family);
  font-weight:var(--Heading-Font-Weight);
  font-size:calc(var(--Body-Font-Size) + 1px);
  text-transform:uppercase;
  letter-spacing:var(--Heading-Letter-Spacing);
}

h1 {
  font-size:var(--Heading-Font-Size);
}

/*----- SMALL CAPS -----*/
.caps, b.label {
  font:var(--Caps-Font-Weight,normal) var(--Caps-Font-Size,0.9rem)/var(--Caps-Line-Height,1.5) var(--Caps-Font-Family), sans-serif;
  text-transform:uppercase;
  letter-spacing:var(--Caps-Letter-Spacing);
}

b.label {
  font-weight:var(--Bold-Font-Weight)!important;
}

/*----- LINKS -----*/
a[href]:not([href=""],:has(>*:not(span))){
  color:var(--Links-Color);
  padding-bottom:var(--Links-Underline-Gap);
  border-bottom:var(--Links-Underline-Size) solid var(--Links-Underline-Color);
  transition:all var(--Links-HOVER-Speed) ease-in-out;
}

a[href]:not([href=""],:has(>*:not(span))):hover {
  color:var(--Links-HOVER-Color);
  border-color:var(--Links-HOVER-Underline-Color);
}

/*----- SCROLLBAR -----*/
::-webkit-scrollbar {
  width:calc((var(--Chrome-Scrollbar-Padding) * 2) + var(--Chrome-Scrollbar-Thumb-Size));
  height:calc((var(--Chrome-Scrollbar-Padding) * 2) + var(--Chrome-Scrollbar-Thumb-Size));
  background-color:var(--Chrome-Scrollbar-BG);
}
 
::-webkit-scrollbar-thumb {
  border:var(--Chrome-Scrollbar-Padding) solid var(--Chrome-Scrollbar-BG);
  background-color:var(--Chrome-Scrollbar-Thumb);
}
 
::-webkit-scrollbar-track {
  border:var(--Chrome-Scrollbar-Padding) solid var(--Chrome-Scrollbar-BG);
  background-color:var(--Chrome-Scrollbar-Track);
}

@-moz-document url-prefix(){
  * {
    scrollbar-width:thin; /* firefox only */
  }
}

/*----- <MAIN> -----*/
main {
  display:flex;
  flex-flow:column nowrap;
  gap:var(--Layout-Sections-Spacing);
  width:100%;
  max-width:100%;
  filter:drop-shadow(var(--Boxes-Shadow-X-Offset) var(--Boxes-Shadow-Y-Offset) var(--Boxes-Shadow-Size) rgb(from var(--Boxes-Shadow-Color,#000) r g b / var(--Boxes-Shadow-Strength,100%)));
}

main > * { margin:0 }

/*----- HEADER -----*/
header {
  border-radius:var(--Boxes-Rounded-Corners);
  background:var(--Boxes-BG);
}

.header-inner {
  position:relative;
  z-index:0;
}

/*----- HEADER IMAGE -----*/
.header-img-hug {
  position:relative;
  border-radius:var(--Boxes-Rounded-Corners) var(--Boxes-Rounded-Corners) 0 0;
  overflow:hidden;
  z-index:0;
}

.header-img-hug img {
  display:block;
  width:100%;
  max-width:100%;
  object-fit:cover;
  object-position:center;
}

/*----- HEADER ICON + STATUS + USERNAME + LINKS -----*/
.header-lower-hug {
  position:relative;
  display:flex;
  flex-flow:row wrap;
  gap:var(--Header-Status-Left-Gap,0px);
  margin-left:var(--Boxes-Padding);
  margin-right:calc(var(--Boxes-Padding) + (var(--Header-Profile-Pic-Border-Thickness) / 2));
  z-index:1;
}

.header-lower-hug:not(:first-child){
  margin-top:calc(var(--Header-Profile-Pic-Total-Size) / -2);
  padding-bottom:calc(var(--Boxes-Padding) - var(--Header-Profile-Pic-Border-Thickness));
}

/*----- HEADER ICON -----*/
.header-icon-hug {
  position:relative;
  width:var(--Header-Profile-Pic-Total-Size);
  height:var(--Header-Profile-Pic-Total-Size);
  border-radius:var(--Header-Profile-Pic-Rounded-Corners);
  background:var(--Boxes-BG);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex-shrink:0;
  z-index:0;
}

.header-icon-hug img {
  display:block;
  width:var(--Header-Profile-Pic-Size);
  height:var(--Header-Profile-Pic-Size);
  border-radius:var(--Header-Profile-Pic-Rounded-Corners);
  object-fit:cover;
  object-position:center;
}

/*----- HEADER ICON + STATUS + USERNAME -----*/
.header-mid-hug {
  display:flex;
	flex-direction:column;
	justify-content:center;
  padding-block:calc(var(--Boxes-Padding) + (var(--Header-Profile-Pic-Border-Thickness) / 2));
}

.header-mid-inner {
  position:relative;
}

/*----- HEADER STATUS -----*/
.header-status {
  position:relative;
  border:var(--Header-Status-Border-Size) solid var(--Header-Status-Border-Color);
  border-radius:var(--Header-Status-Rounded-Corners);
  padding:calc(var(--Header-Status-Padding-Y) - var(--Body-LH-V-Gap)) var(--Header-Status-Padding-X);
  --ts:calc(var(--Header-Status-Padding-X) + 2px + var(--Header-Status-Bubble-Total-Size-2));
  min-width:calc((var(--ts) * 2) - var(--Header-Status-Left-Gap,0px));
  background:var(--Header-Status-BG);
  font-size:var(--Header-Status-Font-Size);
  color:var(--Header-Status-Text-Color);
  filter:drop-shadow(var(--Header-Status-Shadow-X-Offset) var(--Header-Status-Shadow-Y-Offset) var(--Header-Status-Shadow-Size) rgb(from var(--Header-Status-Shadow-Color,#000) r g b / var(--Header-Status-Shadow-Strength,100%)));
  text-align:left;
}

.header-status.caps {
  padding:calc(var(--Header-Status-Padding-Y) - var(--Caps-LH-V-Gap)) var(--Header-Status-Padding-X);
}

.header-status blockquote {
  margin:0;
  padding:0;
  border:none;
}

.header-status:not(.caps) blockquote {
  margin-top:-1px;
}

.header-status:before {
  content:"";
  position:absolute;
  top:0;left:0;
  margin-top:calc(0px - var(--Header-Status-Border-Size) - var(--Header-Status-Bubble-Total-Size-1) - (var(--Header-Status-Bubble-Total-Size-2) / 2));
  margin-left:calc((var(--Header-Status-Bubble-Total-Size-1) / -2) + 2px);
  width:var(--Header-Status-Bubble-Total-Size-1);
  height:var(--Header-Status-Bubble-Total-Size-1);
  border:var(--Header-Status-Border-Size) solid var(--Header-Status-Border-Color);
  background:var(--Header-Status-BG);
  border-radius:100%;
}

.header-status:after {
  content:"";
  position:absolute;
  top:0;left:0;
  margin-top:calc(0px - var(--Header-Status-Border-Size) - (var(--Header-Status-Bubble-Total-Size-2) / 2));
  margin-left:calc(var(--Header-Status-Padding-X) + 2px);
  width:var(--Header-Status-Bubble-Total-Size-2);
  height:var(--Header-Status-Bubble-Total-Size-2);
  border:var(--Header-Status-Border-Size) solid var(--Header-Status-Border-Color);
  background:var(--Header-Status-BG);
  border-radius:100% 100% 0 0;
  clip-path:inset(0 0 50% 0);
}

/*----- HEADER USERNAME -----*/
.header-username {
  position:absolute;
  top:100%;left:0;
  margin-top:var(--Header-Username-Top-Gap);
  margin-left:calc(var(--Header-Status-Border-Size) + var(--Header-Status-Padding-X));
  font-size:var(--Header-Username-Font-Size,var(--Body-Font-Size));
  font-weight:var(--Header-Username-Font-Weight,400);
  color:var(--Header-Username-Color);
}

.header-username > span:first-child:before {
  content:"@";
  margin-right:1px;
  font-family:"Asimovian", sans-serif;
}

/*----- HEADER LINKS -----*/
.header-right-hug {
  display:flex;
  align-items:center;
  height:var(--Header-Profile-Pic-Total-Size);
  flex:1;
  justify-content:flex-end;
}

.header-links {
  display:flex;
  flex-flow:row wrap;
  justify-content:flex-end;
  gap:var(--Header-Links-Icons-Spacing);
  filter:drop-shadow(var(--Header-Links-Icons-Shadow-X-Offset) var(--Header-Links-Icons-Shadow-Y-Offset) var(--Header-Links-Icons-Shadow-Size) rgb(from var(--Header-Links-Icons-Shadow-Color,#000) r g b / var(--Header-Links-Icons-Shadow-Strength,100%)));
}

.header-links [role="menuitem"]{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--Header-Links-Icons-Total-Size);
  height:var(--Header-Links-Icons-Total-Size);
  border:var(--Header-Links-Icons-Border-Size) solid var(--Header-Links-Icons-Border-Color);
  border-radius:var(--Header-Links-Icons-Rounded-Corners);
  background:var(--Header-Links-Icons-BG);
  color:var(--Header-Links-Icons-Color);
  transition:transform var(--Header-Links-Icons-Hover-Speed) ease-in-out;
}

.header-links [role="menuitem"]:hover {
  transform:scale(calc(100% + var(--Header-Links-Icons-Hover-Zoom-Percentage,0%)),calc(100% + var(--Header-Links-Icons-Hover-Zoom-Percentage,0%)));
}

.header-links [role="menuitem"] i {
  font-size:var(--Header-Links-Icons-Size);
}

/*----- BOXES GRID -----*/
/* boxes UNDERNEATH the main header box */
.more-boxes {
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--Layout-Sections-Spacing);
}

.more-boxes > * { margin:0 }

.box[full-width="yes"]{
  grid-column-end:span 2;
}

.box {
  position:relative;
  background:var(--Boxes-BG);
  border-radius:var(--Boxes-Rounded-Corners);
  padding:var(--Boxes-Padding);
  color:var(--Boxes-Text-Color);
  z-index:0;
}

.box-heading {
  position:relative;
  margin-left:-2px;
  font-size:var(--Box-Heading-Font-Size);
  color:var(--Box-Heading-Text-Color);
  filter:drop-shadow(var(--Box-Heading-Shadow-X-Offset) var(--Box-Heading-Shadow-Y-Offset) var(--Box-Heading-Shadow-Size) rgb(from var(--Box-Heading-Shadow-Color,#000) r g b / var(--Box-Heading-Shadow-Strength,100%)));
}

.box-heading:first-child {
  margin-top:calc(0px - var(--Boxes-Padding) - var(--Box-Heading-Border-Size) - var(--Box-Heading-Padding-Y) - (var(--Box-Heading-Font-Size) / 2));
}

.box-heading:not(:last-child){
  margin-bottom:calc(var(--Boxes-Padding) - var(--Body-LH-V-Gap) + 1px);
}

.box-heading > span {
  display:inline-block;
  border:var(--Box-Heading-Border-Size) solid var(--Box-Heading-Border-Color);
  border-radius:var(--Box-Heading-Rounded-Corners);
  padding:calc(var(--Box-Heading-Padding-Y) - var(--Body-LH-V-Gap)) var(--Box-Heading-Padding-X);
  background:var(--Box-Heading-BG);
}

.icon-bullets {
  margin:0;
  padding:0;
  list-style:none;

  display:flex;
  flex-flow:column nowrap;
  gap:var(--Bullet-List-Rows-Spacing);
}

.icon-bullets li {
  position:relative;
}

.icon-bullets li:has(> i[class]:not([class=""])){
  padding-left:calc(var(--Icon-Bullets-Size) + var(--Icon-Bullets-Gutter));
}

.icon-bullets li i[class]:not([class=""]){
  position:absolute;
  display:flex;
  align-items:center;
  top:0;left:0;
  font-size:var(--Icon-Bullets-Size);
  height:calc(var(--Body-Font-Size) * var(--Body-Line-Height) + var(--Body-Line-Height-Vertical-Align-Adjust));
}

b.label {
  padding:var(--Bullet-List-Label-Padding-Y) var(--Bullet-List-Label-Padding-X);
  background:var(--Bullet-List-Label-BG);
  border-radius:var(--Bullet-List-Label-Rounded-Corners);
  color:var(--Bullet-List-Label-Text-Color);
}

b.label:has(+ span.detail){
  margin-right:2px;
}