:root{
	/* --font-color: #f5f5f9;
	--font-secondary: #b8b8d0;

	--main-background-color: #6949de;
	--object-background-color: #211be3;
	--object-hover-background-color: #0202d4;
	--object-clicked-background-color: #2422ba;
	--minor-background-color: #302af5;
	--third-background-color: #0b64f5;

	--object-border-color: #2424c6;
	--minor-border-color: #392cc6;

	--main-button-background-color: #1d61ff;
	--main-button-border-color: #114dd8; */

	--font-color: hsl(220, 30%, 18%);

	--main-background-color:        hsl(220, 45%, 77%);
	--minor-background-color:       hsl(220, 40%, 74%);
	--third-background-color:       hsl(220, 38%, 69%);

	--object-background-color:      hsl(220, 75%, 91%);
	--object-hover-background-color:hsl(220, 55%, 74%);
	--object-clicked-background-color:hsl(220, 50%, 68%);

	--object-border-color:          hsl(220, 35%, 60%);
	--minor-border-color:           hsl(220, 32%, 65%);
	--third-border-color:       	hsl(221, 14%, 39%);

	--main-button-background-color: hsl(220, 80%, 50%);
	--main-button-border-color:     hsl(220, 75%, 43%);

	--minor-button-background-color: hsl(220, 45%, 62%);
	--minor-button-border-color:     hsl(220, 40%, 48%);
	--minor-button-text-color:       hsl(220, 60%, 38%);

	--accent-secondary:             hsl(250, 68%, 58%);

	--ref-color: blueviolet;

	--header-height: 65px;
	
	--table-border-color: gray;

	scroll-behavior: smooth;

	--admin-displ: none;
	--admin-vis: collapse;
}

[data-theme="dark"] {
	--main-background-color:       #12132B;
	--object-background-color:     #1C1E3A;
	--object-hover-background-color: #262A4D;
	--object-clicked-background-color: #303560;
	--minor-background-color:      #171933;
	--third-background-color:      #1F2244;

	--object-border-color:         #2E3358;
	--minor-border-color:          #272B4E;

	--main-button-background-color: #5B4BE0;
	--main-button-border-color:     #4A3BC7;
}

* {
	-webkit-tap-highlight-color: transparent;
	box-sizing: border-box;
}

html {
	overscroll-behavior: none;
	background-color: var(--main-background-color);
	color: var(--font-color);
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	scrollbar-width: thin;
}

img {
	width: 45px;
	height: 45px;
}

button {
	color: var(--font-color);
	cursor: pointer;
}
button:hover {
	filter: brightness(0.9);
}
button:active {
	filter: brightness(0.7);
}
button:disabled {
	filter: brightness(0.55);
}

a {
	color: var(--ref-color);
	text-decoration: underline;
	cursor: pointer;
}


#profile {
	position: relative;
	display: flex;
	flex-direction: column;
}

#profile_info {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	align-items: center;
	user-select: none;
	cursor: pointer;
}

#profile_info * {
	pointer-events: none;
}

#profile_buttons {
	position: absolute;
	display: flex;
	flex-direction: column;
	top: 100%;
	background-color: var(--minor-background-color);
	border: 3px solid var(--minor-border-color);
	border-top: 0px;
	width: 100%;
}
#profile_buttons.hidden {
	display: none;
}

#profile_buttons button {
	background-color: var(--object-background-color);
	border: 0px;
	margin: 0.3rem;
	cursor: pointer;
}


#back {
	cursor: pointer;
	filter: invert(100%);
}

#context_menu {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	div {
		position: fixed;
		background-color: var(--minor-background-color);
		border: 1px solid var(--minor-border-color);
		border-radius: 8px;
		width: auto;
		height: auto;
		min-width: 10rem;
		padding: 0.3rem;

		button {
			background-color: var(--minor-background-color);
			border: 0;
			border-bottom: 1px solid var(--minor-button-border-color);
			margin: 0;
			padding: 0.3rem;
			width: 100%;
		}
	}
}

#oneshot {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.3);

	iframe {
		width: 80%;
		height: 80%;
	}
}

.admin {
	display: var(--admin-displ);
	visibility: var(--admin-vis);
}