body {
	margin: 0;
}

body:hover {
	cursor: default;
}

.fast-fade-out {
	opacity: 0;
	transition:
	   opacity 1s;
}

.header {
	background-color: #445685;

	height: 100%;
	width: 100%;

	position: fixed;
	top: 0;
	transition: height 2s;
	z-index: 1000;
}

.hhm-letterhead {
	display: block;
	height: 150px;
	position: absolute;
	top: 75px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	text-align: center;

	opacity: 0;
    transition: opacity 2s;
}

.hhm-logo {
	display: block;
	height: 89.8%;
	margin: auto;
}

.hhm-text {
	display: block;
	height: 20%;
	margin: auto;
	position: relative;
	left: 15px;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
	    opacity: 1;
	}
}

.namaste {
	display: block;
	position: absolute;
	top: 300px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;

	text-align: center;

    opacity: 0;
    transition: 
      opacity 2s,
      top 2s;
}

@font-face {
  font-family: "Bangla MN Regular";
  src: url('fonts/bangla-mn-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.namaste-hands {
	display: inline-block;
	height: 65px;
	width: auto;
	vertical-align: middle;
	position: relative;
	right: 2px;
	bottom: 15px;
}

.namaste-title {
	color: white;
	display: inline-block;
	font-family: "Bangla MN Regular", Arial, sans-serif;
	font-size: 2.66em;
	font-weight: bold;
}

.namaste-scale {
	display: inline-block;
	height: 60px;
	width: auto;
	margin: auto;
	vertical-align: middle;
	position: relative;
	left: 10px;
	bottom: 15px;
}

.namaste-description {
	display: block;
	position: absolute;
	top: 375px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;

	text-align: center;
	color: white;
	font-size: 1.33em;

    opacity: 0;
    transition: opacity 2s;
}

.user-welcome {
	display: block;
	position: absolute;
	top: 500px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	color: white;
	text-align: center;

    opacity: 0;
    transition: opacity 2s;
}

.welcome-message {
	display: inline-block;
	font-size: 1.33em;
}

.ana-photo {
	display: inline-block;
	border: round;
	border-radius: 50%;
	width: 40px;
	height: auto;
	position: relative;
	left: 10px;
	bottom: 5px;
}

.join-call-div {
	display: block;
	position: absolute;
	top: 600px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	text-align: center;

    opacity: 0;
    transition: opacity 2s;
}

.piglet-game {
	opacity: 0;
	transition: opacity 2s;
}

.game-area {
	font-family: Arial;
	color: white;
	height: 100%;
	padding-top: 85px;
	transition: background-color 5s ease;
}

.game-info {
	display: inline-block;
	font-size: 1.1em;
	width: 36.5%;
	height: auto;
	margin: 10px 1%;
	padding-left: 1%;
	padding-right: 1%;
	padding-top: 10px;
	vertical-align: top;
	border: 2px solid #88a2e3;
	border-radius: 20px;
	transition: opacity 1s;
	background-color: #445685;
}

.name-value-display, .role-value-display, .status-explanation, .status-value-display {
	color: #FFD700;
	font: Arial;
	font-weight: bolder;
	font-size: 1.2em;
	display: inline-block;
}

.status-value-display, .status-explanation {
	color: #ff5757;
}

.info-row {
	margin-bottom: 22px;
}

.info-label {
	font-size: 1.1em;
	font-weight: bold;
}

.rule-row {
	margin-bottom: 22px;
}

.info-emphasis {
	font-weight: bold;
	color: #FFD700;
}

.namaste-text {
	font-family: "Bangla MN Regular", Arial, sans-serif;
	font-weight: bold;
}

.call-player {
	width: 22%;
	height: auto;
	display: inline-block;
	position: relative;
}

.reaction-holder {
	position: absolute;
	top: 20%;
	left: 15%;
	font-size: 2.5em;
	text-align: center;

	transform: scale(0);
}

.video-player {
	width: 100%;
	height: auto;
}

.video-status {
	width: 25%;
	color: gray;
	font-size: 1em;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.video-status-text {
	text-align: center;
	width: 150%;
	transform: translateX(-16.66%);
}

.video-status-icon {
	width: 100%;
}

.connect-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.game-board {
	display: inline-block;
	width: 36.5%;
	margin: 10px 1%;
	padding: 10px 1%;
	vertical-align: top;
	border: 2px solid #88a2e3;
	background-color: #445685;
	border-radius: 20px;

	max-height: 1000px;
	transition: opacity 1s;
	overflow: hidden;
}

.input-info {
	font-size: 0.85em;
	margin-top: -15px;
	min-height: 15px;
}

.mistakes-section {
	font-size: 1em;
	color: white;
	margin-bottom: 8px;
}

.mistakes-count, .found-fraction {
	display: inline-block;
	color: #FFD700;
	font-size: 1.3em;
	font-weight: bolder;
}

.found-count {
	display: inline-block;
}

.found-section {
	font-size: 1em;
	color: white;
	margin-bottom: 10px;
}

.found-entry {
	margin-bottom: 10px;
	line-height: 1;
	/*letter-spacing: -1px;*/
	font-size: 1.1em;
	animation: popout 0.75s ease;
}

.game-input {
	font-family: Arial;
	color:black;
	border-radius: 20px;
}

.piggy-bank-key {
	font-weight: bold;
	margin-right: 5px;
	color: #FFD700;
}

@keyframes shake {
  0% {
    margin-left: 0rem;
  }
  25% {
    margin-left: 0.5rem;
  }
  75% {
    margin-left: -0.5rem;
  }
  100% {
    margin-left: 0rem;
  }
}

.shake-animated {
  animation: shake 0.2s ease-in-out 0s 
}

@keyframes popout {
  0% {transform: translateX(0) scale(0);}
  80% {transform: translateX(10%) scale(1.2);}
  100% {transform: translateX(0%) scale(1);}
}

.popout-animated {
	animation: popout 0.75s ease;
}

@keyframes pop-in-and-out {
  0% {transform: scale(0);}
  20% {transform: scale(1.2);}
  25% {transform: scale(1);}
  80% {transform: scale(1);}
  100% {transform: scale(0);}
}

.pop-in-and-out-animated {
	animation: pop-in-and-out 0.5s ease;
}

.unselectable {
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.companion {
	opacity: 0;
	position: fixed;
	transition: opacity 3s;
}

#glados {
	top: 5%;
	left: 0;
	width: 22%;
}

#cake {
	top: 60%;
	left: 30%;
	width: 20%;
	transform: translate(-50%, -50%);
}

#oleander {
	top: 100%;
	left: 10%;
	width: 30%;
	transform: translate(-50%, -100%);
}

#harry {
	top: 100%;
	left: 100%;
	width: 22%;
	transform: translate(-100%, -100%);
}

#guybrush {
	top: 60%;
	left: 70%;
	height: 50%;
	transform: translate(-50%, -50%);
}

#atlas {
	top: 15%;
	right: 5%;
	width: 5%;

	transform: translate(-100%, 0);
}

.achievement {
	position: fixed;
	bottom: 0;
	right: 0;

	width: 400px;
	height: 156px;
	padding: 16px;
	transform: translateY(100%);
	vertical-align: center;

	background-image: linear-gradient(#3d3d3c, #1a1a17);
	animation: 6s ease 0s 1 slideInFromBottom;
	z-index: 2000;
}

.achievement-text {
	color: white;
	font-family: helvetica;
	display: inline-block;
	vertical-align: middle;
	width: 220px;
}

.achievement-icon {
	width: 111px;
	height: 111px;
	border: 1px solid white;
	float: left;
	margin-right: 16px;
	display: inline-block;
	text-align: center;
}

.achievement-title {
	font-weight: bold;
	font-size: 1em;
	margin-bottom: 15px;
}

.achievement-body {
	font-size: 0.9em;
	line-height: 1.2;
}

@keyframes slideInFromBottom {
  0% {transform: translateY(100%);}
  10% {transform: translateY(0%);}
  90% {transform: translateY(0%);}
  100% {transform: translateY(100%);}
}