/* ------- DEV ------- */

/* {border: 1px solid #fff;} */

/* ------- GLOBAL ------- */

* {
	cursor: default;
}

body {
	background-color: rgb(25,25,25);
	margin: 0;
	padding: 0;
}

a:hover {
	cursor: pointer !important;
}

*::selection {
	background: rgba(0,0,0,0)
}

#default {
	width: 100vw;
	height: 100vh;
	margin: 0;
	position: relative;
	overflow: hidden;
	-webkit-box-shadow: 0px 5px 23px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 5px 23px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 5px 23px 0px rgba(0,0,0,0.75);
}

/* ------- BACKGROUNDS ------- */

.backgrounds {
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
}

#background1 {
	background-image: url("/3.0/bg.jpg");
	background-size: cover;
	position: absolute;
	z-index: 1;
	opacity: 1;
	filter: blur(5px);
	opacity: 0.6;
}

#background2 {
	text-shadow: 0 0 15px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,1);
	background-image: url("/3.0/bg.jpg");
	font-weight: bold;
	margin: 0 0;
	padding: 0;
	background-size: cover;
	text-align: center;
	position: absolute;
	right: 0;
	bottom: 0;
	color: rgb(255,255,255);
	mix-blend-mode: multiply;
	opacity: 1;
	font-family: 'Lexend Giga', sans-serif;
	z-index: 4;
}

/* ------- BLACK BARS ------- */

.blackbars {
	background: #000;
}

#blackbarTop {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 5vh;
	z-index: 5;
	box-shadow: 0 0 15px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,1);
}

#blackbarBottom {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	height: 5vh;
	z-index: 11;
	box-shadow: 0 0 15px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,1);
	text-align: center;
	color: rgba(255,255,255,.1);
	line-height: 5vh;
	font-family: 'Lexend Giga', sans-serif;
}

#blackbarBottom a {
	color: rgba(255,255,255,.1);
	text-decoration: none;
	display: inline-block;
	width: 100%;
}

#blackbarBottom *:hover {
	cursor: pointer;
}

#blackbarLeft {
	position: absolute;
	bottom: 0;
	top: 0;
	left: 0;
	width: 2.5vw;
	z-index: 4;
}

#blackbarRight {
	position: absolute;
	bottom: 0;
	top: 0;
	right: 0;
	width: 2.5vw;
	z-index: 4;
}

/* ------- EDGE HIGHLIGHTS ------- */

.bars {
	position: absolute;
	mix-blend-mode: hard-light;
	z-index: 2;
	box-shadow: 0 0 15px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,1);
	background: #fff;
	width: 100%;
}

#topbar {
	top: 0;
	height: 6vh;
}

#bottombar {
	bottom: 0;
	height: 6vh;
}

/* ------- MAIN CHARACTER ------- */

#character {
	position: absolute;
	top: -3.5vh;
	left: 0;
	z-index: 5;
	height: calc(100% * 1.65);
	pointer-events: none;
}

/* ------- LOGO CONTAINER ------- */

#logo {
	font-size: 10vw; 
	font-weight: initial;
	margin: 0 auto;
	padding: 10px;
	width: 50%;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 65%;
	transform: translate(-50%, -50%);
	mix-blend-mode: hard-light;
	font-family: 'Lexend Giga', sans-serif;
	z-index: 4;
	text-shadow: 0 0 15px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,1), 0 0 15px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,1);
	display: table;
	color: #fff;
}

#logo::selection, #logo span::selection, #logo a::selection {
	color: #ffa800;
}

#logo div {
	display: table-row;
	position: absolute;
	width: 100%;
	top: 50%;
	transform: translate(0, -60%);
	padding: 0;
	text-align: center;
	left: 0;
	pointer-events: none;
	font-weight: initial;
}

#logo span {
    font-family: 'Roboto', sans-serif;
}

#logo span a {
	display: inline-block;
	font-size: 8vw;
}

/* ------- LINKS ------- */

#logo div a {
	display: table-cell;
	font-size: 2.5vw;
	position: relative;
	display: inline-block;
	color: inherit;
	padding: 0.75vw;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	width: 4vw;
	pointer-events: auto;
	color: rgb(200,200,200);
}

#logo div a i {
	display: inline-block;
	cursor: pointer;
	text-align: center;
	padding: 0;
	margin: 0;
	width: auto;
	height: auto;
}

#logo div a:hover {
	font-size: 3vw;
	cursor: pointer;
	width: 4vw;
	color: #fff;
	transition: text-shadow 0.25s ease, font-size 0.25s ease, color 0.25s ease;
	color: #fff;
}

#google:hover {
	text-shadow: 0 0 15px rgba(66,133,244,1), 0 0 10px rgba(66,133,244,1), 0 0 15px rgba(66,133,244,1), 0 0 10px rgba(66,133,244,1);
}

#youtube:hover {
	text-shadow: 0 0 15px rgba(255,0,0,1), 0 0 10px rgba(255,0,0,1), 0 0 15px rgba(255,0,0,1), 0 0 10px rgba(255,0,0,1);
}

#artstation:hover {
	text-shadow: 0 0 15px rgba(19,175,240,1), 0 0 10px rgba(19,175,240,1), 0 0 15px rgba(19,175,240,1), 0 0 10px rgba(19,175,240,1);
}

#deviantart:hover {
	text-shadow: 0 0 15px rgba(0,229,155,1), 0 0 10px rgba(19,175,240,1), 0 0 15px rgba(19,175,240,1), 0 0 10px rgba(19,175,240,1);
}

#reddit:hover {
	text-shadow: 0 0 15px rgba(255,69,0,1), 0 0 10px rgba(255,69,0,1), 0 0 15px rgba(255,69,0,1), 0 0 10px rgba(255,69,0,1);
}

#facebook:hover {
	text-shadow: 0 0 15px rgba(22,115,234,1), 0 0 10px rgba(22,115,234,1), 0 0 15px rgba(22,115,234,1), 0 0 10px rgba(22,115,234,1);
}

/* ------- RARITY BASE ------- */

#flare {
	display: none;
	position: absolute;
	top: 0;
	left: -15vw;
	z-index: 1;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	mix-blend-mode: hard-light;
}

@media (orientation: landscape) {

	@keyframes specialsheen {
		0% {
			left: -20vw;
		}
		
		100% {
			left: 120vw;
		}
	}

	@keyframes specialsheen2 {
		0% {
			left: -50vw;
		}
		
		100% {
			left: 150vw;
		}
	}

	#sheen1 {
		display: none;
		animation: 1s ease-out 0.75s 1 specialsheen;
		position: absolute;
		top: 0;
		left: -20vw;
		height: 100vh;
		width: 5vw;
		background-color: #fff;
		transform: skew(15deg, 15deg);
		filter: blur(20px);
		z-index: 15;
	}

	#sheen2 {
		display: none;
		animation: 1s ease-out 0.75s 1 specialsheen2;
		position: absolute;
		top: 0;
		left: -60vw;
		height: 100vh;
		width: 5vw;
		background-color: #fff;
		transform: skew(15deg, 15deg);
		filter: blur(20px);
		z-index: 15;
	}
}

/* ------- COMMON MODIFIERS ------- */

/* ------- UNCOMMON MODIFIERS ------- */

.flare-u {
	display: block !important;
	filter: saturate(0) !important;
}

.sheen1-u {
	display: block !important;
}

.sheen2-u {
	display: block !important;
}

/* ------- RARE MODIFIERS ------- */

.flare-r {
	display: block !important;
}

.sheen1-r {
	display: block !important;
	background-color: #ffb517 !important;
}

.sheen2-r {
	display: block !important;
	background-color: #ffb517 !important;
}

.logo-r {
	color: #ffa800 !important;
}

.bars-r {
	background-color: #ffb517 !important;
}

/* ------- MYTHIC MODIFIERS ------- */

.flare-m {
	display: block !important;
	filter: drop-shadow(16px 16px 20px red) !important;
}

.sheen1-m {
	display: block !important;
	background-color: #b03e00 !important;
}

.sheen2-m {
	display: block !important;
	background-color: #ffa800 !important;
}

.logo-m {
	color: #b03e00 !important;
}

.bars-m {
	background-color: #b03e00 !important;
}

/* ------- SPECIAL MODIFIERS ------- */

.flare-s {
	display: block !important;
	filter: hue-rotate(240deg) drop-shadow(16px 16px 20px red) !important;
}

.sheen1-s {
	display: block !important;
	background-color: #f27af2 !important;
}

.sheen2-s {
	display: block !important;
	background-color: #f27af2 !important;
}

.logo-s {
	color: #f27af2 !important;
}

.bars-s {
	background-color: #f27af2 !important;
}

/* ------- TOOL TIP ------- */

.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
	line-height: initial;
	visibility: hidden;
	width: 100%;
	color: rgba(255,255,255,.25);
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	margin-left: -50%;
	opacity: 0;
	transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}