:root {
	/* Margin */
	--margin-unit-small: 4px;
	--margin-unit: 8px;
	--margin-unit-large: 12px;

	--margin-small: var(--margin-unit-small) calc(var(--margin-unit-small) * 1.5);
	--margin: var(--margin-unit) calc(var(--margin-unit) * 1.5);
	--margin-large: var(--margin-unit-large) calc(var(--margin-unit-large) * 1.5);

	/* Padding */
	--padding-unit-small: 4px;
	--padding-unit: 8px;
	--padding-unit-large: 12px;

	--padding-small: var(--padding-unit-small) calc(var(--padding-unit-small) * 1.5);
	--padding: var(--padding-unit) calc(var(--padding-unit) * 1.5);
	--padding-large: var(--padding-unit-large) calc(var(--padding-unit-large) * 1.5);

	--font-size-small: 12px;
	--font-size: 18px;
	--font-size-large: 26px;
	--font-size-largest: 48px;

	--font-weight-small: 300;
	--font-weight: 400;
	--font-weight-large: 500;

	--font-family: 'Roboto Flex';
	--font-family-serif: 'Roboto Slab';
	--font-family-code: 'Roboto Mono';

	--border-radius-small: 6px;
	--border-radius: 10px;
	--border-radius-large: 14px;

	--red-dark: hsl(0, 79%, 30%);
	--red-light: hsl(0, 80%, 50%);

	--yellow-dark: hsl(50, 80%, 30%);
	--yellow-light: hsl(50, 80%, 50%);

	--green-dark: hsl(117, 80%, 30%);
	--green-light: hsl(117, 80%, 45%);

	--color-main-darkest: hsl(196, 80%, 10%);
	--color-main-dark: hsl(196, 71%, 20%);
	--color-main: hsl(196, 71%, 40%);
	--color-main-light: hsl(196, 71%, 60%);

	--black: #1a1a1a;

	--gray-dark: #808080;
	--gray: #b3b3b3;
	--gray-light: #e6e6e6;

	--opaque: hsl(0, 0%, 0%, 0%);

	--box-shadow-small: 0px 1px 2px 1px rgba(0, 0, 0, 0.3);
	--text-shadow-small: 0px 1px 2px rgba(0, 0, 0, 0.7);

	--linear-gradient-main: linear-gradient(38deg, var(--color-main-dark) 0%, var(--color-main) 78%);
	/* --linear-gradient-light: linear-gradient(38deg, var(--color-main-dark) 0%, var(--color-main) 78%); */
}

* {
	font-family: var(--font-family);
	/* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
	/* font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
	font-weight: var(--font-weight);
}

code {
	font-family: var(--font-family-code);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-family-serif);
}

body {
	margin: 0px;
	background-color: var(--color-main-darkest);
	overflow: hidden;
	width: 100vw;
	height: 100vh;
}

button {
	border-radius: var(--border-radius-small);
	background-color: var(--color-main);
	border: 0px;
	outline: 0px;
	color: white;
	box-shadow: var(--box-shadow-small);
	cursor: pointer;
}

button > svg {
	width: 16px;
	height: 16px;
}

input,
textarea,
select {
	border-radius: var(--border-radius-small);
	outline: 0px;
	border: 1px solid black;
	padding: 0.5ch;
	background-color: white;
}

button:hover,
button:focus {
	background-color: var(--color-main-light);
}

@media only screen and (max-width: 1025px) {
	/* Big Landscape tablet */
}

@media only screen and (max-width: 961px) {
	/* Landscape tablet */
}

@media only screen and (max-width: 641px) {
	/* Portrait tablet */
}

@media only screen and (max-width: 320px) {
	/* Phones in portrait */
}