* {
	box-sizing: border-box;
}

body {
	/*theme*/
	--text-border-radius: 0.2em;
	--max-text-widht: 50em;

	/* themes based on daisy ui naming */
	/* https://daisyui.com/theme-generator */
	/* light theme */
	--color-base-100: oklch(100% 0 0);
	--color-base-200: oklch(98% 0 0);
	--color-base-300: oklch(95% 0 0);
	--color-base-content: oklch(21% 0.006 285.885);
	--color-primary: oklch(45% 0.24 277.023);
	--color-primary-content: oklch(93% 0.034 272.788);


	/* dark theme */
	@media (prefers-color-scheme: dark) {
		--color-base-100: oklch(25.33% 0.016 252.42);
		--color-base-200: oklch(23.26% 0.014 253.1);
		--color-base-300: oklch(21.15% 0.012 254.09);
		--color-base-content: oklch(92% 0.004 286.32);
		--color-primary: oklch(58% 0.233 277.117);
		--color-primary-content: oklch(96% 0.018 272.314);
	}

	background-color: var(--color-base-100);
	color: var(--color-base-content);

	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100vw;
	min-height: 100vh;
	min-height: 100svh;
	padding: 1em;
	gap: 2em;

	div {
		max-width: var(--max-text-widht);
	}
}

code {
	font-family: monospace;
	background-color: var(--color-base-300);
	border-radius: var(--text-border-radius);
}

p {
	max-width: var(--max-text-widht);
}

button {
	background-color: var(--color-primary);
	color: var(--color-primary-content);
	border-radius: 1em;
	padding: 1em;
	font-weight: bold;
	
	&:hover {
		cursor: pointer;	
	}
}

a > button {
	width: 100%;
}

.link {
	color: var(--color-base-content);
	text-decoration-line: none;
	text-decoration-line: underline;
	text-decoration-thickness: 0.1em;

	&:hover {
		color: var(--color-primary-content);
		background-color: var(--color-primary);
		border-radius: var(--text-border-radius);
	}
}


.big-icon {
	height: 6em;
}


.logo-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em;

	* {
		height: 4em;
	}
}


.row,
.column {
	display: flex;
}

.column {
	flex-direction: column;
}

.row {
	flex-direction: row;
}

.flex-grid {
	display: flex;
	/* why do I always end with flex instead of grid? */
	gap: 2em;
	padding: 1em;
	flex-direction: row;
	flex-wrap: wrap;
	justify-items: stretch;
	/* horizontal */
	align-items: stretch;
	/* vertical inside rows */
	place-content: center;
	max-width: 100%;

	/* center the grid itself */
	&>* {
		flex-grow: 1;
		max-width: 35em;
		/* min-w and basis cause that flex prefer shrink over wrap */
		min-width: 17m;
		flex-basis: 17em;
	}
}



.card,
.app-card {
	border-radius: 2em;
	background-color: var(--color-base-200);
	padding: 2em;
	border-color: var(--color-base-content);
	border-style: solid;
	border-width: 0.1em;
}

.app-card {
	/*extends .card */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

.center-text {
	text-align: center;
}