*{padding: 0; margin: 0; user-select: none; box-sizing: border-box;}
html{height: 100vh; color: var(--text_colour); scroll-padding-top: 100px; font-size: 18px; line-height: 2rem; font-family: nobilityCasual;}

/* html{background: linear-gradient(rgb(34, 2, 102),rgb(114, 4, 81),rgb(34, 2, 102)); background-size: 100dvw 300%;} */
/* html{background: radial-gradient(var(--table_row_02),var(--table_row_03)),var(--table_row_02);} */
/* scrollbar-gutter: stable; */

/* text */
h1, h2, h3, h4, h5, h6, p, a{color: inherit;}
h1, h2{font-family: aquireFont; color: var(--accent_colour); text-shadow: var(--box_shadow);}

main h1,
main h2{position: relative; padding: 32px 0; text-align: center; background: linear-gradient(90deg,rgb(0,0,0,0),rgb(0,0,0,0.35),rgb(0,0,0,0.35),rgb(0,0,0,0));}

h1::after{content: ''; position: absolute; left: 0; bottom: 16px; width: 100%; height: 2px; border-radius: 50%; background: linear-gradient(to right,rgb(0,0,0,0),var(--accent_colour),rgb(230,170,30),var(--accent_colour),rgb(0,0,0,0));}

/* time */
time{font-family: 'Courier New', Courier, monospace; font-size: 0.85rem;}

/* links */
a,
.link{text-decoration: none; color: var(--link_colour);}

a:visited{color: var(--link_colour_visited);}

a:not(a:has(img))[target="_blank"]::after{content: ' ⤴';}

a:not(a:has(img)):not(a:has(.fa)):not(a:has(.fas)):not(a:has(.far)):not(a:has(.fa-solid)):hover{text-decoration: underline dotted; text-underline-offset: 8px;}

a[disabled],
.link[disabled]{cursor: not-allowed;}

button.link{background: transparent; display: inline; box-shadow: none;}
button.link:hover{transform: none;}

/* lists */
ul, ol{margin-left: 1rem;}
ul li{list-style-type: square;}
ul li li{list-style-type: disc;}
ul li li li{list-style-type: circle;}

/* table */
table{border-collapse: collapse; width: 100%;}

/* details */
details > summary{cursor: zoom-in;}
details[open] > summary{cursor: zoom-out;}

/* media */
a:has(img) img,
details > summary:has(img) img{pointer-events: none;}

header img,
footer img{pointer-events: none;}

img, video{object-fit: cover; width: inherit; height: inherit; display: block;}

/* body */
body{min-height: 100%; display: flex; flex-direction: column;}

body > header,
body > footer{width: 100%; box-shadow: 0 0 8px rgb(0,0,0,0.5);}

body > header{background: linear-gradient(180deg, var(--background_gradient_alpha_01), var(--background_gradient_alpha_02));}
body > footer{background: linear-gradient(360deg, var(--background_gradient_alpha_01), var(--background_gradient_alpha_02));}

body > header > div,
body > footer > div,
main{width: 1200px; margin: 0 auto;}

body > header{position: sticky; top: 0; z-index: 1; backdrop-filter: blur(4px); font-size: 0.9rem;}
body > header > div{height: 80px; display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center; gap: 16px;}
body > header > div > a{height: 64px; width: 64px;}

.nav_tabs{display: flex; gap: 32px; align-items: center;}
.nav_tabs > a{font-weight: bold; letter-spacing: 2px;}

/* account_nav */
body:has(.account_nav) > footer,
body:has(.account_nav) > main{transition: filter 0.3s;}

body:has(.account_nav[open]) > footer,
body:has(.account_nav[open]) > main{filter: blur(2px) brightness(0.6); pointer-events: none;}

.account_nav{position: relative; align-self: center; height: 64px;}
.account_nav > summary{padding: 4px; height: 100%; width: auto; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; background: var(--input); list-style-type: none; transition: filter 0.2s; box-shadow: var(--box_shadow);}
.account_nav > summary:hover{background: var(--input_hover); filter: brightness(1.25);}
.account_nav > summary > img{border-radius: inherit; aspect-ratio: 1 / 1;}

.account_nav > nav{background: var(--background_gradient_01); border-radius: 8px; position: absolute; right: 0; top: 80px; width: 256px; box-shadow: var(--box_shadow); overflow: hidden;}

.account_nav > nav hr{border-color: var(--text_colour_dim);}

.account_nav > nav .active_profile_nav{display: grid; gap: 4px; margin: 8px;}

.account_nav > nav .overflow_nav{max-height: 50vh; overflow: auto; overscroll-behavior: contain;}
.account_nav > nav .overflow_nav.guest{height: 100%;}

.account_nav > nav .overflow_nav div a,
.account_nav > nav .overflow_nav .link{padding: 16px; line-height: 16px;}

.account_nav > nav .overflow_nav > div a:hover{background: var(--input_hover); border-bottom-color: transparent;}

.account_nav > nav > div a,
.account_nav > nav > div button{display: flex; align-items: center; font-size: 0.85rem; font-family: Georgia, 'Times New Roman', Times, serif;}

.active_profile_nav{background: var(--background_gradient_02); padding: 1rem; display: grid; place-items: center; gap: 8px; border-radius: 16px;}
.active_profile_nav > img{width: 64px; height: 64px; box-shadow: var(--box_shadow); border-radius: 50%;}


.nav_bar_narrow > summary{width: 64px; height: 64px; display: block;}
.nav_bar_narrow > summary > img{filter: var(--invert);}
.nav_bar_narrow[open]{background: rgb(0,0,0,0.5); backdrop-filter: blur(4px); position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;}
.nav_bar_narrow[open] > summary{width: 100%; background: var(--input); height: 80px; display: grid; align-items: center;}
.nav_bar_narrow[open] > summary:hover{background: var(--input_hover);}
.nav_bar_narrow[open] > summary > img{object-fit: contain; height: 64px;}

.nav_bar_narrow > nav{padding: 16px;}
.nav_bar_narrow > nav > ul{display: grid; gap: 32px;}
.nav_bar_narrow > nav > ul{margin-left: 0;}
.nav_bar_narrow > nav > ul li{list-style: none;}
.nav_bar_narrow > nav > ul a{background: var(--input); color: inherit; padding: 16px 24px; border-radius: 50px; display: block; text-align: center; box-shadow: var(--box_shadow);}
.nav_bar_narrow > nav > ul a:hover,
.nav_bar_narrow > nav > ul a:focus{background: var(--input_hover);}

body > footer{font-size: 0.9rem;}
body > footer > div{padding: 64px 0; display: grid; gap: 32px;}
body > footer > div > p{text-align: center;}
body > footer > div > nav{display: flex; gap: 32px;}
body > footer > div > nav > section{flex: 1;}
body > footer > div > nav h2{border-bottom: 1px solid; margin-bottom: 16px; text-align: center;}
body > footer > div > nav > section ul{justify-items: center; text-align: center; display: grid; gap: 8px; margin-left: 0;}
body > footer > div > nav > section ul li{list-style-type: none;}

.logo_support{display: flex; margin: auto; gap: 16px;}
.logo_support > a{display: flex; align-items: center;}
.logo_support > a img{width: 1.5rem; height: 1.5rem; border-radius: 4px; filter: grayscale(1); transition: filter 0.5s, scale 0.5s;}
.logo_support > a:hover img,
.logo_support > a:focus img{filter: grayscale(0); scale: 1.1;}

main{padding: 32px 0; flex: 1; min-height: 50vh; align-content: start;}

@media screen and (min-width: 1250px) {
	.hide_this{display: none;}
}

@media screen and (max-width: 1250px) {
	html{font-size: 16px;}

	body > header > div,
	body > footer > div,
	main{width: 100%;}

	body > header > div{padding: 0 16px;}

	body > footer > div{padding: 32px;}
	body > footer > div > nav{display: grid; gap: 32px;}

	main{padding: 32px 16px;}

	.nav_tabs{display: none;}
}

@media screen and (max-width: 200px) {
	body{display: none;}
}