@charset "UTF-8";

/**************************/
/**************************/
/********** VARS **********/
/**************************/
/**************************/

:root {
	/* default colors */
	--dark-color: rgb(24,23,22);
	--light-color: rgb(244,243,242);
	--bright-color: rgb(255,255,255);

	--drop-shadow: rgba(24,23,22,.5);

	/* main colors */
	--yellow-color : rgb(255,217,1);
	--blue-color : rgb(46,162,255);
	--green-color : rgb(46,137,1);

	/* main colors opacity */
	--yellow-color-alt : rgba(255,217,1,.5);
	--blue-color-alt : rgba(46,162,255,.5);
	--green-color-alt : rgba(46,137,1,.5);

	/* alternative colors */
	--water-color:rgb(112,193,172);
	--emerald-color:rgb(0,169,157);
	--coral-color:rgb(224,134,116);
	--sun-color:rgb(255,166,1);
	--plum-color:rgb(87,49,103);
	--grass-color:rgb(106,183,143);


	/* alternative colors opacity */
	/*--water-color-alt:rgba(112,193,172,.5);*/
	--water-color-alt:rgb(188, 217, 207);
	--emerald-color-alt:rgba(0,169,157,.5);
	--coral-color-alt:rgba(224,134,116,.5);
	--sun-color-alt:rgba(255,166,1,.5);
	--plum-color-alt:rgba(87,49,103,.5);
	--grass-color-alt:rgba(106,183,143,.5);
}

/********** DEFAULT == PRIMARY **********/

* {
	-webkit-tap-highlight-color: rgba(46,162,255,.25);
}

/********** BUTTONS COLORS **********/

.overlay-content .buttons a,
.overlay-content .button,
.overlay-content input[type="submit"],
.overlay-content button,
.has-bright-background-color .buttons a,
.has-bright-background-color .button,
.has-bright-background-color input[type="submit"],
.has-bright-background-color button {
	background:var(--light-color);
}

.focus.has-dark-background-color .buttons a,
.focus.has-dark-background-color .button {
	color:var(--dark-color);
	text-shadow:0 0 0 var(--dark-color);
	background:var(--light-color);
}

/********** BACKGROUND COLORS **********/

.has-dark-background-color,
.has-blue-background-color,
.has-emerald-background-color,
.has-grass-background-color,
.has-plum-background-color {
	color:var(--bright-color);
	text-shadow:0 0 0 var(--bright-color);
}
.has-dark-background-color {
	background:var(--dark-color);
}
.has-light-background-color {
	background:var(--light-color);
}
.has-bright-background-color {
	background:var(--bright-color);
}
.has-yellow-background-color {
	background:var(--yellow-color);
}
.has-blue-background-color {
	background:var(--blue-color);
}
.has-green-background-color {
	background:var(--green-color);
}
.has-water-background-color {
	background:var(--water-color);
}
.has-emerald-background-color {
	background:var(--emerald-color);
}
.has-coral-background-color {
	background:var(--coral-color);
}
.has-sun-background-color {
	background:var(--sun-color);
}
.has-plum-background-color {
	background:var(--plum-color);
}
.has-grass-background-color {
	background:var(--grass-color);
}

/** opacity **/

.has-yellow-background-color-alt {
	background:var(--yellow-color-alt);
}
.has-blue-background-color-alt {
	background:var(--blue-color-alt);
}
.has-green-background-color-alt {
	background:var(--green-color-alt);
}

.has-water-background-color-alt {
	background:var(--water-color-alt);
}
.has-emerald-background-color-alt {
	background:var(--emerald-color-alt);
}
.has-coral-background-color-alt {
	background:var(--coral-color-alt);
}
.has-sun-background-color-alt {
	background:var(--sun-color-alt);
}
.has-plum-background-color-alt {
	background:var(--plum-color-alt);
}
.has-grass-background-color-alt {
	background:var(--grass-color-alt);
}

/********** SVG COLORS **********/

*[class*=-fill-color] svg,
*[class*=-fill-color] svg path {
	fill:inherit;
}
.is-dark-fill-color {
	fill:var(--dark-color);
}
.is-light-fill-color {
	fill:var(--light-color);
}
.is-bright-fill-color {
	fill:var(--bright-color);
}
.is-yellow-fill-color {
	fill:var(--yellow-color);
}
.is-blue-fill-color {
	fill:var(--blue-color);
}
.is-green-fill-color {
	fill:var(--green-color);
}
.is-water-fill-color {
	fill:var(--water-color);
}
.is-emerald-fill-color {
	fill:var(--emerald-color);
}
.is-coral-fill-color {
	fill:var(--coral-color);
}
.is-sun-fill-color {
	fill:var(--sun-color);
}
.is-plum-fill-color {
	fill:var(--plum-color);
}
.is-grass-fill-color {
	fill:var(--grass-color);
}