/*
-- Font sizes (px): 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
-- Spacing System (px): 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

--- 01 Typography ---

-- Font weights
Default: 400

-- Line heights:
Default: 1

-- Letter spacing:


--- 02 Colors ---
-- Font colors: #333 / #555 / #777 / #999 / #BBB / #DDD / #FFF
  -- Default #555

--- 03 Shadows ---

  box-shadow: inset 8px 16px 25px -10px rgba(255,255,255,0.1),7px 14px 25px -20px rgba(255,255,255,0.1);


--- 04 Border Radius ---

-- Default 0.5 rem

--- 05 Whitespace ---

By Default 1rem = 16px Better to do font-size: 62.5% on html to make 1rem = 10px
62,5% of 16px = 10px of the users browser font-size setting

####################################
#               RESET              #
####################################

*/
/* Box sizing rules */
*,
*::before,
*::after {
	box-sizing: border-box;
	scroll-behavior: smooth;
	margin: 0;
	padding: 0;
	font: inherit;
}

/* Prevent font size inflation */
html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;

	font-size: 62.5%;
}

html,
body {
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	line-height: 1;

	background-color: var(--theme-background-default);
	color: var(--theme-font-default);
}

body {
	margin: unset;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
}

p,
figcaption {
	text-wrap: pretty;
}

a {
	text-decoration: none;
	color: inherit;
}

ol,
ul {
	list-style: none;
}

.pico button,
.pico input,
.pico textarea,
select {
	font: inherit;
}

/* Remove default button style */
.pico button {
	cursor: pointer;
}

strong {
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/*
####################################
#               END RESET          #
####################################
*/

/*
####################################
#               GENERAL            #
####################################
*/

:root {
	--screen-padding: 0.6rem;
	--min-margin: 0.6rem;
	--max-width: min(calc(100vw - (2 * var(--screen-padding) + 2 * var(--min-margin))), 140rem);
	--padding: var(--screen-padding);

	/* Component Colors */
	--color-primary: #0277bb;
	--color-primary-hover: #025f9e;
	--color-danger: #be0505;
	--color-danger-hover: #9e0202;
	--color-danger-light: #f7d6d9;

	/* Background */
	--theme-background-default: rgba(14, 18, 23, 0.9);
	--theme-background-secondary: #7b7c7f;

	--theme-card-background-default: #3333338a;

	/* Font Colors */
	--theme-font-default: #f2f2f2;
	--theme-font-secondary: #9e9e9e;
	--theme-font-danger: #ff3d00;
	--theme-font-active-link: #f2f2f2;

	--theme-font-size-default: 1.8rem;
	--theme-font-weight-default: 200;
	--theme-font-leter-spacing-default: 1.25px;
	--theme-font-line-height-default: 1.6;

	--theme-font-size-xlarge: 4.4rem;
	--theme-font-weight-xlarge: 600;
	--theme-font-line-height-xlarge: 1.2;

	--theme-font-size-large: 3.6rem;
	--theme-font-weight-large: 400;
	--theme-font-line-height-large: 1.2;

	--theme-font-size-medium: 2.4rem;
	--theme-font-weight-medium: 400;
	--theme-font-line-height-medium: 1.8;

	--theme-font-size-small: 1.6rem;

	/* Border Radius */
	--theme-border-radius-default: 0.5rem;
}

@media screen and (max-width: 900px) {
	:root {
		--theme-font-size-default: 1.6rem;
		--theme-font-size-xlarge: 4.2rem;
		--theme-font-size-large: 3.4rem;
		--theme-font-size-medium: 2.2rem;
		--theme-font-size-small: 1.4rem;
	}
}

@media screen and (max-width: 780px) {
	:root {
		--theme-font-size-default: 1.2rem;
		--theme-font-size-xlarge: 3.6rem;
		--theme-font-size-large: 3rem;
		--theme-font-size-medium: 1.8rem;
		--theme-font-size-small: 1rem;
	}
}

h1 {
	font-size: var(--theme-font-size-xlarge);
	font-weight: var(--theme-font-weight-xlarge);
	line-height: var(--theme-font-line-height-xlarge);
	color: var(--theme-font-default);
}

h2 {
	font-size: var(--theme-font-size-large);
	font-weight: var(--theme-font-weight-large);
	line-height: var(--theme-font-line-height-large);
	color: var(--theme-font-default);
}

h3,
.pico h3 {
	font-size: var(--theme-font-size-medium);
	font-weight: var(--theme-font-weight-medium);
	line-height: var(--theme-font-line-height-medium);
	color: var(--theme-font-default);
}

h4 {
	font-size: var(--theme-font-size-small);
	font-weight: var(--theme-font-weight-medium);
	line-height: var(--theme-font-line-height-medium);
	color: var(--theme-font-default);
}

li,
label,
p,
td,
th,
.pico input,
.pico textarea,
.pico button,
a {
	font-size: var(--theme-font-size-default);
	font-weight: var(--theme-font-weight-default);
	letter-spacing: var(--theme-font-leter-spacing-default);
	line-height: var(--theme-font-line-height-default);
	color: var(--theme-font-default);
}

/* Pico CSS */
.pico input,
.pico textarea {
	-moz-border-radius: var(--theme-border-radius-default);
	-webkit-border-radius: var(--theme-border-radius-default);
	border-radius: var(--theme-border-radius-default);
	padding: 1.6rem;
}

.pico label {
	color: inherit;
	font-weight: inherit;
}

.pico input:not([type='checkbox'], [type='radio'], [type='range'], [type='file']) {
	padding: 1.6rem;
	height: unset;
}

.pico [type='submit'],
.pico button {
	font-size: var(--theme-font-size-default);
	padding: 1.6rem;
	-moz-border-radius: var(--theme-border-radius-default);
	-webkit-border-radius: var(--theme-border-radius-default);
	border-radius: var(--theme-border-radius-default);
}

blockquote {
	font-style: italic;
}

blockquote {
	padding: 1rem 2.4rem 1rem 4.4rem;
	position: relative;
}

blockquote::before {
	font-family: Arial;
	content: '\201C';
	font-size: 8rem;
	position: absolute;
	left: 10px;
	top: -10px;
}

blockquote::after {
	content: '';
}

a:hover,
a:active {
	color: var(--theme-font-active-link);
	box-shadow: 0 2px 0 0 var(--theme-font-active-link);
}

.b-border {
	border-bottom: 0.1rem solid rgba(74, 68, 99, 0.288);
}

.loading {
	display: flex;
	justify-content: center;
}

.loader {
	width: 48px;
	height: 48px;
	border: 3px dotted #fff;
	border-style: solid solid dotted dotted;
	border-radius: 50%;
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	animation: rotation 2s linear infinite;
}
.loader::after {
	content: '';
	box-sizing: border-box;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	border: 3px dotted #ff3d00;
	border-style: solid solid dotted;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	animation: rotationBack 1s linear infinite;
	transform-origin: center center;
}

@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes rotationBack {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}

.loader-cloud {
	width: 175px;
	height: 80px;
	display: block;
	margin: 1.6rem;
	background-image: radial-gradient(circle 25px at 25px 25px, #fff 100%, transparent 0),
		radial-gradient(circle 50px at 50px 50px, #fff 100%, transparent 0),
		radial-gradient(circle 25px at 25px 25px, #fff 100%, transparent 0),
		linear-gradient(#fff 50px, transparent 0);
	background-size:
		50px 50px,
		100px 76px,
		50px 50px,
		120px 40px;
	background-position:
		0px 30px,
		37px 0px,
		122px 30px,
		25px 40px;
	background-repeat: no-repeat;
	position: relative;
	box-sizing: border-box;
}
.loader-cloud::before {
	content: '';
	left: 60px;
	bottom: 18px;
	position: absolute;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #ff3d00;
	background-image: radial-gradient(circle 8px at 18px 18px, #fff 100%, transparent 0),
		radial-gradient(circle 4px at 18px 0px, #fff 100%, transparent 0),
		radial-gradient(circle 4px at 0px 18px, #fff 100%, transparent 0),
		radial-gradient(circle 4px at 36px 18px, #fff 100%, transparent 0),
		radial-gradient(circle 4px at 18px 36px, #fff 100%, transparent 0),
		radial-gradient(circle 4px at 30px 5px, #fff 100%, transparent 0),
		radial-gradient(circle 4px at 30px 5px, #fff 100%, transparent 0),
		radial-gradient(circle 4px at 30px 30px, #fff 100%, transparent 0),
		radial-gradient(circle 4px at 5px 30px, #fff 100%, transparent 0),
		radial-gradient(circle 4px at 5px 5px, #fff 100%, transparent 0);
	background-repeat: no-repeat;
	box-sizing: border-box;
	animation: rotationBack 3s linear infinite;
}
.loader-cloud::after {
	content: '';
	left: 94px;
	bottom: 15px;
	position: absolute;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: #ff3d00;
	background-image: radial-gradient(circle 5px at 12px 12px, #fff 100%, transparent 0),
		radial-gradient(circle 2.5px at 12px 0px, #fff 100%, transparent 0),
		radial-gradient(circle 2.5px at 0px 12px, #fff 100%, transparent 0),
		radial-gradient(circle 2.5px at 24px 12px, #fff 100%, transparent 0),
		radial-gradient(circle 2.5px at 12px 24px, #fff 100%, transparent 0),
		radial-gradient(circle 2.5px at 20px 3px, #fff 100%, transparent 0),
		radial-gradient(circle 2.5px at 20px 3px, #fff 100%, transparent 0),
		radial-gradient(circle 2.5px at 20px 20px, #fff 100%, transparent 0),
		radial-gradient(circle 2.5px at 3px 20px, #fff 100%, transparent 0),
		radial-gradient(circle 2.5px at 3px 3px, #fff 100%, transparent 0);
	background-repeat: no-repeat;
	box-sizing: border-box;
	animation: rotationBack 4s linear infinite reverse;
}

/* SvelteKit body wrapper */
.sveltekit-body-wrapper {
	display: contents;
}