template/css/desktop.css

@font-face {
	font-family: 'Inter Tight';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/inter-tight-400.woff2);
	unicode-range: U+000-5FF;
}

@font-face {
	font-family: 'Inter Tight';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/inter-tight-700.woff2);
	unicode-range: U+000-5FF;
}



/* Variables for the universal theme */
:root {
	--body: #1b1c27;
	--main: #1a1b26;
	--text: #c0caf5;
	--line: #414868;
	--highlight: #171721;
	--image: #444663;
	--header: #171721;

	--field_bg: #1f1f2c;
	--field_bg_hover: #2c2c3e;
	--field_bg_inactive: #1a1b26;
	--field_border: #414868;
	--field_border_hover: #4c547a;
	--field_border_inactive: #414868;
	--field_text: #c0caf5;
	--field_text_inactive: #777e98;

	--transparent_30: rgba(26, 27, 38, .7);
	--transparent_20: rgba(26, 27, 38, .8);
	--transparent_10: rgba(26, 27, 38, .9);

	--red: #f7768e;
	--green: #9ece6a;
	--blue: #7aa2f7;
	--blue_faded: #394c73;
	--purple: #bb9af7;
	--purple_faded: #52446d;
	--orange: #ff9e64;
	--yellow: #e0af68;
	--dark: #414868;
	--white: #ffffff;
	--grey: #858daa;

	--icon_select: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-selector" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="rgba(255,255,255,1)" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M8 9l4 -4l4 4"></path><path d="M16 15l-4 4l-4 -4"></path></svg>');

	--font: 'Inter Tight', sans-serif;
	--font_mono: 'Inter Tight', sans-serif;
	--fontsize: 1rem;
	--lineheight: 1.75rem;
}



* {
	box-sizing: content-box;
	scroll-behavior: smooth;
}

html {
	overflow-y: scroll;
}

html, body {
	background-color: var(--body);
	color: var(--text);
	font-family: var(--font);
	font-size: var(--fontsize);
	line-height: var(--lineheight);
	margin: 0;
	padding: 0;
}

a {
	color: var(--text);
	text-decoration: underline;
	text-decoration-color: var(--line);
	text-decoration-thickness: .05rem;
	/* text-decoration-style: wavy; */
	text-underline-offset: 5px;
}

a.color-red {
	text-decoration-color: var(--red_underline);
}

p {
	hyphens: auto;
	margin: 0;
	padding: 10px 0;
	text-align: justify;
	word-wrap: break-word;

	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	-o-hyphens: auto;
}

mark {
	background-color: var(--mark);
	color: var(--text);
}

ul {
	margin: 0 0 0 30px;
	padding: 5px 0;
}

ul > li {
	padding: 5px 0;
}

ul > li > a > svg {
	height: 20px;
	width: 20px;
}

ul > li > a > svg > path:last-child {
	fill: var(--text);
}

ul > li > ul {
	margin: 0 0 0 20px;
}

ol {
	list-style-type: none;
	counter-reset: item;
	margin: 0 0 0 30px;
	padding: 5px 0;
}

ol > li {
	display: table;
	counter-increment: item;
	padding: 5px 0;
}

ol > li > div {
	padding: 5px 0;
}

ol > li:before {
	content: counters(item, ".");
	display: table-cell;
	font-weight: 700;
	width: 25px;
}

ol > li > ol {
	margin: 0;
}

ol > li > ol > li:before {
	content: counters(item, ".");
	width: 40px;
}

ol > li > ol.second > li > ol.third > li:before {
	width: 50px;
}

ol.third {
	margin-bottom: -5px;
}

input:not([type="checkbox"]),
textarea,
select {
	background-color: var(--field_bg);
	border: 1px solid var(--field_border);
	border-radius: 3px;
	color: var(--field_text);
	font-family: var(--font);
	font-size: var(--fontsize);
	outline: none;
	resize: none;
	padding: 8px 10px;
	width: calc(100% - (11px * 2));
}

input::placeholder,
textarea::placeholder,
select::placeholder {
	color: var(--text);
}

input[disabled],
textarea[disabled],
select[disabled] {
	background-color: var(--field_bg_inactive);
	border: 1px dashed var(--field_border_inactive);
	color: var(--field_text_inactive);
	cursor: not-allowed;
}

input:not([disabled]):not([readonly]):active,
input:not([disabled]):not([readonly]):hover,
textarea:not([disabled]):not([readonly]):active,
textarea:not([disabled]):not([readonly]):hover,
select:not([disabled]):active,
select:not([disabled]):hover {
	background-color: var(--field_bg_hover);
	border: 1px solid var(--field_border_hover);
}

input[type="submit"],
input[type="submit"]:active,
input[type="submit"]:hover {
	background-color: var(--green) !important;
	border: 1px solid var(--green) !important;
	color: var(--main);
	cursor: pointer;
	font-weight: 700;
	padding: 5px 10px;
	width: auto;
}

input[type="radio"] {
	cursor: pointer;
	line-height: 100%;
	opacity: 0;
	position: absolute;
	width: auto;
}

input[type="radio"] + label {
	border: 1px solid transparent;
	cursor: pointer;
	margin: 0 3px;
	opacity: .7;
	padding: 1px 3px;
}

input[type="radio"]:checked + label {
	background-color: var(--checked);
	backdrop-filter: blur(3px);
	border-radius: 2px;
	color: var(--checked_str);
	opacity: 1;
}

input[type="radio"]:checked:focus + label {
	border: 1px solid var(--checked_focus);
}

input[type="date"] {
	appearance: none;
}

input[readonly] {
	border: 1px dashed var(--line);
}

input, textarea {
	caret-color: var(--yellow);
}

textarea {
	height: 250px;
	min-height: 130px;
	resize: vertical;
	vertical-align: top;
	width: calc(100% - 21px - 2px);
}

select {
	appearance: none;
	background-image: var(--icon_select);
	background-size: 17px;
	background-repeat: no-repeat;
	background-position: center right 8px;
	cursor: pointer;
	width: calc(100% - 21px - 2px);
}

h1 {
	align-items: center;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	font-size: 190%;
	font-weight: 700;
	margin: 0 0 5px 0;
	line-height: 2.5rem;
	padding: 0;
}

h1 > svg {
	margin: 0 5px;
	opacity: .4;
	width: 32px;
}

h2 {
	font-size: 140%;
	font-weight: 700;
	margin: 30px 0 0 0;
	padding: 0;
}

hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 30px -50px;
	padding: 0;
}

sup {
	vertical-align: top;
}

figure {
	margin-block-start: 0;
	margin-block-end: 0;
	margin-inline-start: 0;
	margin-inline-end: 0;
	margin: 0;
	width: 100%;
}

figure,
figure > img {
	object-fit: cover;
	vertical-align: top;
	width: 100%;
}

svg {
	height: 100%;
	vertical-align: top;
	width: 20px;
}

svg[class*="icon-tabler-currency"] {
	height: auto;
	margin: .10rem .2rem 0 .2rem;
	width: 18px;
}















#website {
	margin: 50px auto;
	max-width: 800px;
}















.color-grey {
	opacity: .6;
}

.color-red {
	color: var(--red) !important;
}

.color-green {
	color: var(--green);
}

.color-blue {
	color: var(--blue);
}

.color-yellow {
	color: var(--yellow);
}



.message {
	font-size: 126%;
	font-weight: 400;
	opacity: .7;
	padding: 20px 10px;
	text-align: center;
}

.msg {
	display: none;
}

.msg > div {
	align-items: flex-start;
	display: flex;
	flex-direction: row;
	font-size: 100%;
	margin-bottom: 20px;
	padding: 0;
	text-align: left;
}

.msg > div > svg {
	margin-right: 10px;
}



.mono {
	font-family: var(--font_mono) !important;
	font-size: 100%;
}

.no-select {
	cursor: default;

	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
}

.side-by-side {
	align-items: flex-start;
	display: flex;
	flex-direction: row;
}

.hidden {
	display: none !important;
}

.visible {
	display: block !important;
}



.checkboxes {
	padding: 20px 0;
}

.checkbox:not(:first-child) {
	margin-top: 25px;
}

.checkbox.nodesc {
	margin-top: 0;
}

.checkbox > div {
	align-items: center;
	display: inline-flex;
	flex-direction: row;
	position: relative;
}

.checkbox > div > input {
	cursor: pointer !important;
	left: 5px;
	opacity: 0;
	position: absolute;
	top: 5px;
}

.checkbox > div > input[disabled],
.checkbox > div > input[disabled] ~ label {
	color: var(--checkbox_disabled);
	cursor: not-allowed !important;
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
}

.checkbox > div > input[disabled] ~ .icon-checkbox > svg > path:not(:first-child) {
	color: var(--checkbox_disabled);
}

.checkbox > div > .icon-checkbox {
	left: 6px;
	position: absolute;
	pointer-events: none;
	top: 5px;
}

.checkbox > div > .icon-checkbox.is-checked,
.checkbox > div > input:checked ~ .icon-checkbox.is-unchecked {
	opacity: 0;
}

.checkbox > div > input:checked ~ .is-checked {
	opacity: 1;
}

.checkbox > div > label {
	cursor: pointer !important;
	padding: 4px 8px 4px 35px;
}

.checkbox > div > input:not([disabled]):hover ~ .icon-checkbox,
.checkbox > div > input:not([disabled]):hover ~ label,
.checkbox > div > input:not([disabled]):focus ~ .icon-checkbox,
.checkbox > div > input:not([disabled]):focus ~ label {
	background-color: var(--checkbox_focus);
	border-radius: 3px;
}

.checkbox > .desc {
	display: block;
	left: 35px;
	line-height: 140%;
	font-size: 98%;
	opacity: .7;
	top: 4px;
	width: calc(100% - 35px);
}

.checkbox > .desc > p {
	text-align: left;
}



@keyframes rotation {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}