/*COMMON HTML START*/
html {
	display: flex;
	justify-content: center;
	background-color: var(--bg-color);
	color: var(--primary-color);
	font-family: "Xolonium", sans-serif;
	font-size: var(--default-font-size);
	scroll-behavior: smooth;
}

[data-accessibility~="serif"] {
	font-family: Meteora, serif;
}

[data-accessibility~="monospace"] {
	font-family: SpaceMono, sans-serif;
}

[data-accessibility~="disabled"] {
	scroll-behavior: auto;
}

body {
	position: relative;
	padding: var(--spacing-medium);
	width: 100%;
	max-width: var(--content-width);
}

body[data-mode="blurred"]::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(var(--spacing-x-small));
}

body[data-mode="blurred"] nav::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(var(--spacing-x-small));
}

::-moz-selection {
	color: var(--primary-color);
	background: var(--focus-color);
}

::selection {
	color: var(--primary-color);
	background: var(--focus-color);
}

::-webkit-scrollbar {
	width: var(--spacing-x-small);
}

::-webkit-scrollbar-track {
	background: var(--shade-1);
}

::-webkit-scrollbar-thumb {
	background: var(--primary-color);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--shade-3);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Xolonium", sans-serif;
	color: var(--primary-text-color);
}

h1,
h2 {
	font-weight: 700;
}

h3,
h4,
h5,
h6 {
	font-weight: 400;
	letter-spacing: var(--letter-spacing-normal);
	margin-top: var(--spacing-small);
}

h1 {
	font-size: var(--title-1-size);
	line-height: 1;
	margin-bottom: 5px;
}

h2 {
	font-size: var(--title-2-size);
	line-height: var(--title-2-line);
	margin-bottom: var(--spacing-x-small);
}

h2[data-type="wip"] {
	font-family: "Xolonium", sans-serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	width: 100%;
	margin-top: var(--spacing-medium);
	margin-bottom: var(--spacing-xx-large);
}

[data-accessibility~="serif"] h1,
[data-accessibility~="serif"] h2,
[data-accessibility~="serif"] h3,
[data-accessibility~="serif"] h4,
[data-accessibility~="serif"] h5,
[data-accessibility~="serif"] h6 {
	font-family: "Meteora", serif;
}

[data-accessibility~="serif"] h2[data-type="wip"] {
	font-family: Meteora, serif;
}

[data-accessibility~="monospace"] h1,
[data-accessibility~="monospace"] h2,
[data-accessibility~="monospace"] h3,
[data-accessibility~="monospace"] h4,
[data-accessibility~="monospace"] h5,
[data-accessibility~="monospace"] h6 {
	font-family: SpaceMono, sans-serif;
}

[data-accessibility~="monospace"] h2[data-type="wip"] {
	font-family: SpaceMono, sans-serif;
}

@media (max-width: 48rem) {
	h1 {
		font-size: min(15vw, var(--title-1-size));
		line-height: var(--title-1-line);
		margin-bottom: var(--spacing-x-small);
	}

	h2 {
		font-size: var(--title-2-size);
		line-height: var(--title-2-line);
		margin-bottom: 8px;
	}

	h2[data-type="wip"] {
		font-size: 30px;
		margin-top: var(--spacing-normal);
		margin-bottom: 40px;
	}

	h3 {
		font-size: var(--font-size);
		margin-top: var(--spacing-x-small);
	}

	h4 {
		font-size: 18px;
		margin-top: var(--spacing-x-small);
	}

	h5,
	h6 {
		font-size: 16px;
		margin-top: 8px;
	}
}

p,
ul li {
	font-family: "ApfelGrotezk", sans-serif;
	font-size: var(--font-size);
	font-weight: 400;
	letter-spacing: var(--letter-spacing-normal);
}

[data-accessibility~="serif"] p,
[data-accessibility~="serif"] ul li {
	font-family: "Sentient", serif;
}

[data-accessibility~="monospace"] p,
[data-accessibility~="monospace"] ul li {
	font-family: "DMMono", sans-serif;
}

[data-accessibility~="spacing"] p,
[data-accessibility~="spacing"] ul li {
	letter-spacing: var(--letter-spacing-largest);
	word-spacing: 0.25rem;
}

[data-accessibility~="line"] p,
[data-accessibility~="line"] ul li {
	line-height: 1.75;
}

#main p:not(:last-child),
main p:not(:last-child) {
    margin-bottom: var(--spacing-small);
}

#main p:last-of-type,
#main p:last-of-type {
    margin-bottom: 0;
}

main {
	position: relative;
	min-height: calc(100vh - 430px);
}

main:has([data-type="searchContainer"]) {
	min-height: calc(100vh - 450px);
}

@media (max-width: 48rem) { 
	main {
		min-height: unset;
	}
}

main ul {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

main li {
    padding-left: var(--spacing-x-large);
    text-indent: -27px;
	line-height: 2;
}

main li:before {
	font-family: "Xolonium", sans-serif;
	content: "●";
	padding-right: var(--spacing-x-small);
}

blockquote {
	display: flex;
	align-items: center;
	flex-direction: row;
	padding-left: var(--spacing-xxx-large);
	padding-top: var(--spacing-small);
	padding-bottom: var(--spacing-small);
}

blockquote::before {
	content: '⚡';
	font-family: "Xolonium", sans-serif;
	position: absolute;
	left: 0;
	margin-bottom: var(--spacing-small);
	font-size: 55px;
}

blockquote p {
	font-family: "Xolonium", sans-serif;
	font-size: 22px;
	font-weight: 400;
	color: var(--primary-text-color);
	margin-bottom: var(--spacing-small);
	border-left: 2px solid var(--primary-color);
	padding-left: var(--spacing-small);
}

[data-accessibility~="serif"] blockquote p {
	font-family: Meteora, serif;
}

[data-accessibility~="monospace"] blockquote p {
	font-family: SpaceMono, sans-serif;
}

a[href]:not(:where(
	[href^="#"],
	[href^="/"]:not([href^="//"]),
	[href^="mailto:"],
	[href^="tel:"],
	[href^="https://studioaugustine.test"],
    [href^="https://www.studioaugustine.test/"],
	[href^="https://www.studioaugustine.ee/"],
	[href^="https://studioaugustine.ee/"],
	[href*="javascript:void(0);"],
	[data-type="main-title-navigation"] > a,
    figure > a,
	[data-type="portfolio-item"] > a,
	.feed-image,
)):after {
 	content: "↗";
}

a {
	font-weight: 700;
	color: var(--primary-color);
	text-decoration: underline;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--focus-color);
	cursor: pointer;
}

a:focus-visible {
	outline: 2px solid var(--focus-color);
	outline-offset: 2px;
	border-radius: 1px;
}

a[data-type="disabled"] {
    pointer-events: none;
}

[data-accessibility~="links"] a {
	background-color: var(--info-color);
}

[data-accessibility~="links"] a:hover {
	color: var(--primary-color);
}

figure {
	padding-top: var(--spacing-medium);
	padding-bottom: var(--spacing-small);
}

figure a:focus-visible img {
	outline: 2px solid var(--focus-color);
	outline-offset: 5px;
}

/*Disable user-select START*/
img,
button,
a[data-button]{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;	
}

/*:focus-visible {
	outline: 2px solid red;
	outline-offset: var(--spacing-xx-small);
	border-radius: 1px;
    transform: scale(1.05);
    transition-duration: 250ms;	
}*/
/*Disable user-select END*/

img,
.sl-wrapper .sl-image img {
	border-radius: 10px;
}

.sl-wrapper {
    background-color: rgba(211, 211, 211, 0.5);
    z-index: 9999;
}

figcaption {
	font-family: "ApfelGrotezk", sans-serif;
	font-size: var(--font-size-small);
	line-height: var(--line-height-small);
	font-weight: 400;
	letter-spacing: var(--letter-spacing-normal);	
	margin-top: var(--spacing-x-small);
    padding-left: var(--spacing-x-small);
}

hr {
	margin-top: var(--spacing-x-large);
	margin-bottom: var(--spacing-x-large);
	border-top: 2px solid var(--primary-color);
}

hr[data-type="navbar"] {
	margin-top: var(--spacing-small);
	margin-bottom: var(--spacing-small);
}

hr[data-type="chart"] {
	margin-top: var(--spacing-x-large);
	margin-bottom: 15px;
}

main hr {
	border-top: 1px solid rgba(37, 37, 37, 0.25);
}

.sa-content + hr {
	border-top: 2px solid var(--primary-color);
}

main hr + [data-type="image-set"] figure {
	padding-top: 5px;
}

br {
	margin-top: var(--spacing-medium);
	margin-bottom: var(--spacing-medium);
}

[data-type~="hidden"] {
    display: none!important;
}

[data-type~="shown"] {
    display: block;
}

[data-button~="text"] {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
}

[data-button~="default"],
[data-button~="secondary"] {
	font-size: var(--font-size-medium);
	line-height: var(--line-height-medium);
    font-weight: 400;
	padding: var(--spacing-xx-small) var(--spacing-small);
	border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
	text-align: center;
	transition-duration: 250ms;
}

[data-button~="default"] {
    background-color: var(--primary-color);
	color: var(--bg-color);
    border: 2px solid var(--primary-color);
}

[data-button~="secondary"] {
    background-color: var(--bg-color);
	color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

[data-button~="close"] {
	position: fixed;
    right: 25px;
    top: 25px;
    height: 50px;
    width: 50px;
    border: 2px solid var(--focus-color)!important;
    background-color: var(--bg-color)!important;
    border-radius: 15px;
    padding: 10px!important;
    margin-top: 0;
    margin-right: 0;
	z-index: 9999;
}

[data-button~="inverted"] {
    background-color: var(--bg-color);
	color: var(--primary-color);
	border: 2px solid var(--primary-color);
}

[data-button~="default"]:hover,
[data-button~="secondary"]:hover {
	transform: scale(1.05);
	transition-duration: 250ms;
}

[data-button~="default"]:hover {
	color: var(--bg-color);
}

[data-button~="secondary"]:hover {
	color: var(--primary-color);
}

[data-button~="inverted"]:hover {
    background-color: var(--primary-color);
	color: var(--bg-color);
	border: 2px solid var(--bg-color);
}

[data-button~="default"]:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 4px!important;
	transform: scale(1.05);
	transition-duration: 250ms;
}

:disabled[data-button~="default"] {
	opacity: 0.5;
	cursor: default;
}

:disabled[data-button~="default"]:hover {
	transform: scale(1);
}

[data-accessibility~="button"] [data-button~="default"] {
	font-size: 32px;
	padding: var(--spacing-small) var(--spacing-x-large);
}

@media only screen and (max-width: 40rem) {
	[data-button] {
		width: 100%;
	}
	
	[data-button]:hover,
	[data-button]:focus-visible {
		transform: unset;
		transition-duration: unset;
	}	
}
/*COMMON HTML END*/