html {
	line-height: calc(1em + 0.5rem);
	height:100%;
	-webkit-text-size-adjust: 100%;
	box-sizing: border-box;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:root {
	--classicblue: #03A9F4;
	--classicred: #ff0033;
	--classicorange: #ffaa00;
	--classicgreen: #4caf50;
	--btncolor: #735feb;
	--btncolor:#006bff;
	--radius: 5px;
	--red: #ff0033;
	--blue: #03A9F4;
	--orange: #ffaa00;
	--green: #4caf50;
	--newbs: rgb(0 0 0 / 10%) 0px 1px 3px 0px, rgb(0 0 0 / 6%) 0px 1px 2px 0px;
	--border: 1px solid rgba(36,36,36,.1);
	--accentfont:  "Inter", system-ui, sans-serif;
	--regular: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --base: #222222;
	--subbase: #4b4e55;
	--layer: #101010;
	--heading:white;
	--paragraph: #ccc;
}
body {
	height: 100%;
	margin: 0;
	font-size: 1rem;
	background:var(--base);
	background-attachment: fixed;
	color:var(--paragraph);
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-weight: 600;
	color:var(--heading);
	font-family: var(--accentfont);
	letter-spacing: -0.03em;
}


.grouped {
	display: flex;
}
*,
*::before,
*::after {
	box-sizing: inherit;
}
template {
	display: none;
}
body,
input,
select,
optgroup,
textarea {
	font-size: 1rem;
	font-family:var(--regular);
}


input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
	border-radius: var(--radius);
	padding: 7px 10px;
	border:var(--border);
	background: var(--heading);
}
select  {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

button:hover,
a.button:hover {
	filter: brightness(90%);
	opacity: 1;
	transform: translateY(0);
	transition-duration: .35s;
}

button, label.button, a.button, a:visited.button {
	display: flex;
	font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	gap:8px;
	align-items: center;
	outline: 0;
	border: 2px solid var(--btncolor);
	cursor: pointer;
	background: var(--btncolor);
	color: #FFFFFF;
	border-radius:5px;
	text-decoration: none;
	padding:0.35em 1.2em;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	justify-content: center;
	transition: transform 200ms,background 200ms;
}
input.big, select.big {
	padding:0.75em 1em;
}
button.big, a.button.big {
	font-size: 18px;
	padding:0.5em 1em;
}
button.secondary, label.button.secondary, a.button.secondary {
	color:var(--heading);
	background: var(--subbase);
	border:2px solid;
	border-color: var(--subbase);

}

button.icon {
	color:inherit;
	border-color: transparent;
	background: transparent;
}

.logo, .logoimg, .logotext, .logo svg {
	display: flex;
	font-size: 20px;
	font-weight: 600;
	gap:10px;
	color:var(--heading);
	align-items: center;
}

[onclick],
[onmousedown],
label[for] {
    cursor:pointer;
}

.langswitch {
	display: flex;
	align-items: center;
	font-weight: bold;
	background-color: var(--subbase);
	border-radius: 5px;
	padding-left: 0.25em;
}
.langswitch svg {
	color:inherit;
	height:1rem;
	width: 1rem;
}

.langswitch select, select.language {
	border: none;
	font-family: var(--accentfont);
	color: var(--heading);
	background: var(--subbase);
}

.load {
    display: none;
	font-size: 120%; /* size of loader */
	width: 3em; height: 1em;
	background: radial-gradient(closest-side, currentColor calc(100% - 1px), transparent) 0 50%,
				radial-gradient(closest-side, currentColor calc(100% - 1px), transparent) 1.25em 50%,
				radial-gradient(closest-side, currentColor calc(100% - 1px), transparent) 2.25em 50%;
	background-size: 1em 1em, .5em .5em, .5em .5em;
	background-repeat: no-repeat;
	opacity: 0.8;
	animation: loader .6s infinite;

}
.load.active, .load.block {
	display: block;
}
@keyframes loader {
	33% {
		background-size: .5em .5em, 1em 1em, .5em .5em;
		background-position: .25em 50%, 1em 50%, 2.25em 50%;
	}
	
	66% {
		background-size: .5em .5em, .5em .5em, 1em 1em;	
		background-position: .25em 50%, 1.25em 50%, 2em 50%;
	}
}

@media only screen and (max-width: 550px) {
	.langswitch label {
		display: none;
	}
}
.hidden,
[hidden] {
	display: none;
}