/* RESET 
------------------------------------------------------------ */
*, *::before, *::after {box-sizing: border-box;}

/* GENERAL
------------------------------------------------------------ */
.white		{color: #FFF}
.black		{color: #444;}
.red 		{color: #F44;}
.yellow 	{color: #EC5;}
.blue 		{color: #3BA;}
.dark_blue	{color: #367;}

body,
html {
	width: 100%;
	height: 100%;
	background-color: #f7fafd;
	margin: 0;
	padding: 0;
}

body
{
	font-family: 'Nunito';
	font-size: 1rem;
	line-height: 1.5;
}

#logo {
	float: left;
	width: 100%;
	font-weight: bold;
	text-decoration: none;
	font-size: 2rem;
	margin: .5rem 0 1rem 0;
}

h1
{
	margin-bottom: 2rem;
	font-size: 1.4rem;
	line-height: 1.4rem;
}

nav,
aside,
#main
{
	float: left;
	height: 100vh;
	padding: 1rem;
	display: none;
	overflow-y: auto;
}

.row
{
	display: block;
	float: left;
	width: 100%;
}

/* NAV
------------------------------------------------------------ */
nav
{
	width: 220px;
	background-color: #CAFE00;
	background-color: #F0F0F0;
	background-color: #FFF;

	border-right: #DDD solid 1px;

	background-color: #2D3F64;
	border: none;
}

nav #sketch_left {
	position: absolute;
	top: 220px;
	width: 220px;
	left: 0;
}

aside #sketch_right {
	position: absolute;
	width: 220px;
	bottom: 0;
	right: 0;
	z-index: 0;
}


#profile_pic {
	width: 60%;
	margin: 0 20% 1rem 20%;
}

nav p {
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
}

/* RIGHT COLUMN
------------------------------------------------------------ */
aside
{
	width: 220px;
	background-color: #F0F0F0;
	background-color: #FFF;
	border-left: #DDD solid 1px;
}

#main
{
	background-color: #F5F5F5;

	display: block;
	width: 100%;
}

/* PLAYLIST
------------------------------------------------------------ */
.playlist_card
{
	width: 100%;
	float: left;
	margin-bottom: 1rem;
	background-color: #FFF;
	padding: 0.5rem;
}


.playlist_card img
{
	width: 100%;
}

/* HELPERS
------------------------------------------------------------ */
#game_arena
{
	z-index: 99;
	display: none;
	text-align: center;
	width: 100%;
	padding: 0;
	margin: 0;
	float: left;
	padding: 2rem 0;
	animation: fadeIn ease 1s;
}

#game_arena #body
{
	z-index: 99;

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* WEBPAGE
------------------------------------------------------------ *

.dark, .dark:hover, .dark:active, .dark:visited
{
	border-color: #888 !important;
	background-color: #444 !important;
	color: #FFF !important;
}

.red, .red:hover, .red:active, .red:visited
{
	border-color: #FF4444 !important;
	background-color: #FF4444 !important;
	color: #FFF !important;
}

.yellow, .yellow:hover, .yellow:active, .yellow:visited
{
	border-color: #F8C85C !important;
	background-color: #F8C85C !important;
	color: #FFF !important;
}

.blue, .blue:hover, .blue:active, .blue:visited
{
	border-color: #4DBCAE !important;
	background-color: #4DBCAE !important;
	color: #FFF !important;
}

/* PLAYER
------------------------------------------------------------ */
#video_container {
	position: relative;
	padding: 0;
}

/* CARD GAME
------------------------------------------------------------ */
#card_board
{
	display: none;
	width:100%;
}

.card_deck
{
	display:inline-block;
	margin: 0.5rem;
	width: 140px;
	height: 140px;
}
/*
#card_board {
	display: none;
	flex: 1;
	flex-direction: row;
	flex-wrap: wrap;
}

.card_deck {
	float: left;
	display: block;
	/*
border: none;
padding: 0.2rem;
margin: 0 0.5rem;
border-radius: 0.5rem;

margin: 0;
max-width: 220px;
margin: 0 auto;
width: 220px;
height: 220px;
}
*/

/*
@media (max-width:767px)
{
.card_deck {
	flex-basis: calc(50% - 1rem);
	margin-bottom: 0.5rem;
}
}
*/

.active {
	transform: rotateY(180deg) !important;
}

.card_deck > .card
{
	width: 100%;
	height: 100%;
	cursor: pointer;
	transform-style: preserve-3d;
	transform: translateZ(-100px);
	transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);


	-webkit-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.16);
	-moz-box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.16);
	box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.16);

	border-radius: 25px;
}

.card > .front,
.card > .back
 {
	 -webkit-backface-visibility: hidden;
	 backface-visibility: hidden;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 25px;
}

.card .front {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	background-color: #4DBCAE;
}

.card .back {
	transform: rotateY(180deg);
	background-color: #3BA;
	background-color: #EC5;
}

/* QUIZ GAME
------------------------------------------------------------ */
#player_question {
	position: absolute;
	bottom: 0;

	width: 100%;
	height: 100%;

	text-align: center;
	display: none;
	background-color: rgba(57, 54, 78, 96%);
}

#player_question a {
	background-color: #FF556F;
	color: #FFF;
	margin: 2em;
	text-align: center;
	text-decoration: none;
	padding: 1em 4em;	
}

#question_statement {
	font-size: 1.6rem;
	color: #367;
	color: #FFF;
	margin-bottom: 1rem;
}

.questions_options {
	margin: 1rem;
}

#open_answer_board
{
	display: none;
}

#open_answer {
	width: 100%;
	padding: 1rem;
	margin: 0;
}












#game_arena button {
  font-weight: 600;
  color: #382b22;
  padding: 1.25em 2em;
  background: #FFF;
  border: 2px solid #EC5;
  border-radius: 0.75em;
  transform-style: preserve-3d;
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
  width: 90%;
}
#game_arena button::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #EC5;
  border-radius: inherit;
  transform: translate3d(0, 0.75em, -1em);
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}
#game_arena button:hover
{
  transform: translate(0, 0.25em);
}

#game_arena button:hover::before
{
	transform: translate3d(0, 0.5em, -1em);
}
#game_arena button:active
{
	transform: translate(0em, 0.75em);
}

#game_arena button:active::before
{
  transform: translate3d(0, 0, -1em);
}

textarea
{
	color: #367;
	text-align: center;
	padding: 1.25em 2em;
	background: #FFF;
	border: 2px dashed #367;
	border-radius: 0.75em;
	margin-bottom: 1rem;
	max-width: 480px;
	margin: 0.5rem;
	width:440px;
	height: 120px;
	font-size: 1.1rem;
}

textarea:focus
{
    outline: none !important;
    box-shadow: none;
}












@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	 }
}

@keyframes fadeOut {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	 }
}

@keyframes bg-scrolling-reverse {
	100% {background-position: 50px 50px;}
}
@keyframes bg-scrolling {
	0% {background-position: 50px 50px;}
}

/* Main styles */
#main {
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC") repeat 0 0;
	animation: bg-scrolling-reverse 4s infinite;
	animation-timing-function: linear;
}

#game_arena #body {
	background: linear-gradient(253deg, #0cc898, #1797d2, #864fe1);
	background-size: 300% 300%;
	animation: Background 16s ease infinite;
}

@keyframes Background {
	0% {background-position: 0% 50%}
	50% {background-position: 100% 50%}
	100% {background-position: 0% 50%}
}

#game_arena .content {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(https://i.imgur.com/wCG2csZ.png);
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
/* works with row or column */

flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
text-align: center;
z-index: -1;
padding: 1rem;
}








aside {
	background-color: #F5F5F5;
}
aside h1 {
	color: #888;
	text-align: center;
	padding-bottom: 1rem;
	border-bottom: dotted 1px #888;
	margin: 0 0 1rem 0;
}

.playlist_card {
	text-decoration: none;
	color: #444;
	background-color: #FFF;
	padding: 0.5rem;
	box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.16);
	font-size: 0.9rem;
	font-weight: 600;
}

.playlist_card.is_active {
	background-color: #F44;
	color: #FFF;
}














/* Small devices (portrait tablets and large phones, 600px and up)
@media only screen and (min-width: 600px){}
*/

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px)
{
	#main {width: calc(100% - 220px);}
	nav {display: block;}
	.only_desktop {display: none;}

	.card_deck
	{
		width:220px !important;
		height: 220px !important;
	}

	#question_statement
	{
		margin-bottom: 3rem;
	}

	#game_arena button {
		width: auto;
	  }
}

/* Large devices (laptops/desktops, 992px and up)
@media only screen and (min-width: 992px) {}
*/

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px)
{
	#main {width: calc(100% - 440px);}
	aside {display: block;}
}