:root {
	--header-bg-color: #222;
	--owncast-purple: #333;
}

#logo-container {
	background-size: 2em;
	background-image: url("/logo");
}

.tab-bar [role="tab"][aria-selected="true"] {
	background-color: #888;
}

.tab-bar [role="tab"]:hover {
	background-color: #444;
}

.text-indigo-600 {
	color: #8b9fc3;
}

.text-gray-500 {
	color: #666;
}

.text-gray-700 {
	color: #aaa;
}

.text-gray-800 {
	color: #aaa;
}

.bg-gray-300 {
	background-color: #222;
}

.bg-white {
	border-color: #aaa;
	background-color: rgba(26,32,44,var(--bg-opacity));
}

/* Browser notify content */
#modal-content-content div {
	background-color: #444;
	color: #aaa;
}

/* Requires important because colour set by javascript */
#notify-button-container button {
	background-color: #444 !important;
	border-color: #666;
}

/* Invert the bell svg colour */
#notify-button-container .external-action-button img {
	filter: invert(100%);
}
/*-- end browser notify content */

/* Formatting tech specs for thin vs wide */
#tech-specs-flex {
	display: flex;
}

.column {
	width: 50%;
}

@media (max-width: 960px) {
	#tech-specs-flex {
		display: initial;
	}

	.column {
		width: 100%;
	}
}

@media (min-width: 1540px) {
	.user-content {
		margin: auto;
		width: 75%;
	}
}