/*******************************************************************************************************************/
/** References:                                                                                                    */
/** flex: See https://www.w3.org/TR/css-flexbox-1/                                                                 */
/** box-shadow: See https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow                                    */
/** Variables: See https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties                    */
/*******************************************************************************************************************/

/*******************************************************************************************************************/
/* CSS Variables (for themes etc.)                                                                                 */
/*******************************************************************************************************************/

:root, :root[ipr_theme=light] {
	/* Header */
	--mc_header-color: rgb(88, 88, 88);
	--mc_header-background-color: rgb(188, 188, 188);
	--mc_header_menuitem-color: rgb(88, 88, 88);
	--mc_header_menuitem-color-active: black;
	--mc_header_menuitem-color-hover: rgb(88, 88, 88);
	--mc_header_menu-div-hover: rgb(222, 222, 222);
	--mc_header_menuicon-span: url(/images/icons/DarkMode.png);
	--mc_header_logo-background-image: url(/images/LogoDark_128x56.png);
	--mc_header_logo-background-image-large: url(/images/LogoDark_1024x454.png);
	--mc_header-popupmenu-background-color: rgb(222, 222, 222);
	--mc_header-popupmenu-background-color-hover: rgb(255, 255, 255);

	/* Splash */
	--mc_splash-background-color: rgba(255, 255, 255, 0.3);
	--mc_splash-background-blend-mode: lighten;
	--mc_splash_quote-span-color: rgb(33, 33, 33);
	--mc_splash_quote-span-color-a: rgb(22, 22, 22);
	--mc_splash_quote-span-color-a_hover: black;
	--mc_splash_bottom-span-color: rgb(88, 88, 88);
	--mc_splash_inner-background-color: rgba(233, 233, 233, 0.80);
	--mc_splash_inner-background-color_hover: rgba(233, 233, 233, 0.95);

	/* Sections */
	--mc_section-color: rgb(88, 88, 88);
	--mc_section-background-color: rgb(233, 233, 233);
	--mc_section-a-color: rgb(22, 22, 111);
	--mc_section-a-color_hover: rgb(44, 44, 222);
	--mc_section-buttondiv-color: rgb(22, 22, 111);
	--mc_section-buttondiv-color_hover: rgb(44, 44, 222);
	--mc_section-buttondiv-background-color: rgb(244, 244, 244);
	--mc_section-buttondiv-background-color_hover: rgb(255, 255, 255);
	--mc_home-background-image: url('/images/backgrounds/Microchange Bubbles Light 2048x3190.png');

	/* Dialogs */
	--mcdialog-overlay-background: rgba(0,0,0,0.4);
	--mcdialog-container-background: rgb(233, 233, 233);
	--mcdialog-titlebar-color: rgb(88, 88, 88);
	--mcdialog-titlebar-background: rgb(188, 188, 188);
	--mcdialog-vspacer-background: rgb(188, 188, 188);
}
:root[ipr_theme=dark] {
	/* Header */
	--mc_header-color: rgb(177, 177, 177);
	--mc_header-background-color: rgb(33, 33, 33);
	--mc_header_menuitem-color: rgb(177, 177, 177);
	--mc_header_menuitem-color-active: white;
	--mc_header_menuitem-color-hover: rgb(177, 177, 177);
	--mc_header_menu-div-hover: rgb(55, 55, 55);
	--mc_header_menuicon-span: url(/images/icons/LightMode.png);
	--mc_header_logo-background-image: url(/images/LogoLight_128x56.png);
	--mc_header_logo-background-image-large: url(/images/LogoLight_1024x454.png);
	--mc_header-popupmenu-background-color: rgb(55, 55, 55);
	--mc_header-popupmenu-background-color-hover: rgb(33, 33, 33);

	/* Splash */
	--mc_splash-background-color: rgba(0, 0, 0, 0.6);
	--mc_splash-background-blend-mode: darken;
	--mc_splash_quote-span-color: rgb(166, 166, 166);
	--mc_splash_quote-span-color-a: rgb(177, 177, 177);
	--mc_splash_quote-span-color-a_hover: white;
	--mc_splash_bottom-span-color: rgb(166, 166, 166);
	--mc_splash_inner-background-color: rgba(0, 0, 0, 0.50);
	--mc_splash_inner-background-color_hover: rgba(0, 0, 0, 0.75);

	/* Sections */
	--mc_section-color: rgb(166, 166, 166);
	--mc_section-background-color: rgb(22, 22, 22);
	--mc_section-a-color: rgb(177, 177, 131);
	--mc_section-a-color_hover: white;
	--mc_section-buttondiv-color: rgb(177, 177, 131);
	--mc_section-buttondiv-color_hover: rgb(255, 255, 255);
	--mc_section-buttondiv-background-color: rgb(11, 11, 11);
	--mc_section-buttondiv-background-color_hover: rgb(0, 0, 0);
	--mc_home-background-image: url('/images/backgrounds/Microchange Bubbles Dark 2048x3190.png');

	/* Dialogs */
	--mcdialog-overlay-background: rgba(22,22,22,0.8);
	--mcdialog-container-background: rgb(22, 22, 22);
	--mcdialog-titlebar-color: rgb(177, 177, 177);
	--mcdialog-titlebar-background: rgb(33, 33, 33);
	--mcdialog-vspacer-background: rgb(33, 33, 33);
}

/*******************************************************************************************************************/
/* Common CSS                                                                                                      */
/*******************************************************************************************************************/

html, body {
	font-family: 'Ubuntu', Verdana, Arial, Helvetica, sans-serif;
}
.mc_superscript {
	vertical-align: super;
	font-size: 0.75em;
}
.mc_subscript {
	vertical-align: sub;
	font-size: 0.75em;
}
h1 {
	font-size: 2.5rem;
	font-weight: bold;
}
h2 {
	font-size: 2rem;
	font-weight: bold;
}
h3 {
	font-size: 1.5rem;
	font-weight: bold;
}
a {
	cursor: pointer;
	text-decoration: none;
	color: var(--mc_section-a-color);
	transition: color 0.5s ease;
}
a:hover {
	color: var(--mc_section-a-color_hover);
}
ul {
	margin: 1rem 0 0 0;
	padding: 0;
	text-align: left;
	list-style: none;
}
ul li {
	background-image: url(/favicon.png);
	background-repeat: no-repeat;
	background-size: 1.5rem 1.5rem;
	padding-left: 2rem;
	margin-bottom: 1.5rem;
}
.nooverscroll {
	overflow: auto;
	overscroll-behavior: none;
}
.nooverscroll-x {
	overflow-x: auto;
	overscroll-behavior: none;
}
.nooverscroll-y {
	overflow-y: auto;
	overscroll-behavior: none;
}
.mc_body_link {
	cursor: pointer;
	text-decoration: none;
	color: var(--mc_section-a-color);
	transition: color 0.5s ease;
}
.mc_body_link:hover {
	color: var(--mc_section-a-color_hover);
}
.mc_section-buttondiv {
	display: inline-block;
	cursor: pointer;
	padding: 1rem 2rem;
	border-radius: 2rem;
	font-weight: bold;
	font-size: 1.1rem;
	color: var(--mc_section-buttondiv-color);
	background-color: var(--mc_section-buttondiv-background-color);
	transition: padding 0.5s ease, color 0.5s ease, background-color 0.5s ease;
}
.mc_section-buttondiv:hover {
	padding: 1rem 3rem;
	color: var(--mc_section-buttondiv-color_hover);
	background-color: var(--mc_section-buttondiv-background-color_hover);
}
.mc_section_image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mc_page-background {
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	background-size: contain;
	background-image: var(--mc_home-background-image);
}

/*******************************************************************************************************************/
/* Microchange dialogs                                                                                             */
/*******************************************************************************************************************/

/* Needed to avoid selection happening in dialogs when resiting and dragging */
/* TODO(5): [ ] Move this somehow into the IprDialog component. */
.iprdialog-no-select {
	user-select: none !important;
}

/*******************************************************************************************************************/

.mcstddialog-titlebar {
	background: var(--mcdialog-overlay-background) !important;
}
.mcstddialog-container {
	background: var(--mcdialog-container-background) !important;
	width: min-content;
	height: min-content;
}
.mcstddialog-titlebar {
	color: var(--mcdialog-titlebar-color) !important;
	background: var(--mcdialog-titlebar-background) !important;
}
.mcstddialog-close {
	color: var(--mcdialog-titlebar-color) !important;
	background: var(--mcdialog-titlebar-background) !important;
}
.mcstddialog-close:hover {
	color: white !important;
	background-color: darkred !important;
}

/*******************************************************************************************************************/
/* Media queries                                                                                                   */
/*******************************************************************************************************************/

/*@media (min-width: 2200px) {
}
@media (min-width: 1800px) and (max-width: 2199px) {
}*/
@media (min-width: 1000px) and (max-width: 1399px) {
	h1 {
		font-size: 2.2rem;
		font-weight: bold;
	}
	h2 {
		font-size: 1.8rem;
		font-weight: bold;
	}
	h3 {
		font-size: 1.4rem;
		font-weight: bold;
	}
}
@media (max-width: 999px) {
	h1 {
		font-size: 1.9rem;
		font-weight: bold;
	}
	h2 {
		font-size: 1.6rem;
		font-weight: bold;
	}
	h3 {
		font-size: 1.3rem;
		font-weight: bold;
	}
}

/*******************************************************************************************************************/
/* Misc                                                                                                            */
/*******************************************************************************************************************/

/* For debugging CSS:
body div {
	border: 1px solid red;
}
.redborderdiv, .redborderdivs {
	border: 1px solid red;
}
.redborderdivs div {
	border: 1px solid red;
}
*/

/*******************************************************************************************************************/