:root {
	--neu-shadow: 10px 10px 30px rgb(204, 205, 206), -10px -10px 30px #fff;
	--neu-shadow-inset: inset 10px 10px 30px rgb(204, 205, 206), inset -10px -10px 30px #fff;
	--neu-shadow-sm: 5px 5px 15px rgb(204, 205, 206), -5px -5px 15px #fff;
	--neu-border-radius: 12px;
}

/*Layouts*/
body {
	padding: 1rem;
}

main {
	display: grid;
	column-gap: 2rem;
	row-gap: 1rem;
	margin: auto;
}

main.article-aside {
	grid-template-rows: auto auto;
	grid-template-columns: 3fr 1fr;
	grid-template-areas: "header header"
		"article aside";
}

main.menu-article {
	grid-template-rows: auto auto;
	grid-template-columns: auto 3fr;
	grid-template-areas: "header header"
		"menu article";
}

article {
	grid-area: article;
}

header {
	grid-area: header;
}

aside {
	grid-area: aside;
}

.menu {
	grid-area: menu;
	display: flex;
}

.menu ul {
	width: 100%;
}

/* Basis */
.neu-border {
	box-shadow: var(--neu-shadow);
	border-radius: var(--neu-border-radius);
	border-top: 2px solid rgba(255, 255, 255, 0.2);
	border-left: 2px solid rgba(255, 255, 255, 0.2);
	border-bottom: 2px solid rgba(204, 205, 206, 0.2);
	border-right: 2px solid rgba(204, 205, 206, 0.2);
}

.neu-extrude {
	box-shadow: var(--neu-shadow);
	border-radius: var(--neu-border-radius);
	border-top: 2px solid rgba(255, 255, 255, 0.2);
	border-left: 2px solid rgba(255, 255, 255, 0.2);
	border-bottom: 2px solid rgba(204, 205, 206, 0.2);
	border-right: 2px solid rgba(204, 205, 206, 0.2);
	padding: 0.75rem;
}

.neu-depress {
	box-shadow: var(--neu-shadow-inset);
	border-radius: var(--neu-border-radius);
	border-top: 2px solid rgba(255, 255, 255, 0.2);
	border-left: 2px solid rgba(255, 255, 255, 0.2);
	border-bottom: 2px solid rgba(204, 205, 206, 0.2);
	border-right: 2px solid rgba(204, 205, 206, 0.2);
	padding: 0.75rem;
}

.neu-convex {
	background: radial-gradient(farthest-corner at 16px 16px, #fff, rgb(204, 205, 206));
	border: none;
}

.neu-concave {
	background: radial-gradient(farthest-corner at bottom 16px right 16px, #fff, rgb(204, 205, 206));
}

.neu-seg {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Components */

/* Buttons */
button,
.link-button {
	background-color: var(--primary-med);
	border-radius: var(--neu-border-radius);
	box-shadow: var(--neu-shadow-sm);

	padding: 0.5rem;
	color: var(--text);
	cursor: pointer;
	margin-right: 0.5rem;
}

button:hover,
.link-button:hover {
	background-color: var(--background);
	box-shadow: none;
	border: 1px solid var(--border);
}

button:active,
.link-button:active {
	box-shadow: inset 2px 2px 5px rgb(204, 205, 206), inset -2px -2px 5px #fff;
	border: 1px solid transparent;
}

/* Links */
a {
	color: var(--link);
	text-decoration: none;
}

/* Lists */
ul {
	display: flex;
	flex-flow: column nowrap;
	gap: 0.5rem;
}

/* Tabs */
nojs-tab {
	background-color: var(--background);
	border-radius: var(--neu-border-radius);
	z-index: 0;
}

nojs-tab .tab-tab {
	background-color: var(--background);
	box-shadow: var(--neu-shadow-sm);
}

nojs-tab .tab-container:first-of-type .tab-tab {
	border-top-left-radius: var(--neu-border-radius);
	border-bottom-left-radius: var(--neu-border-radius);
}

nojs-tab .tab-container:last-of-type .tab-tab {
	border-top-right-radius: var(--neu-border-radius);
	border-bottom-right-radius: var(--neu-border-radius);
}

nojs-tab .tab-flag:checked~.tab-tab {
	box-shadow: none;
	background-color: var(--background);
	z-index: -1;
}