html {
    overflow: hidden;
    height: 100%;
}
body {
    height: 100%;
    overflow: auto;
	margin: 0;
	padding: 0;
	background-color: black;
	font-size: 24px;
	font-family: 'Permanent Marker', sans-serif;
	color: orange;
}
/*=================================================*/
/*Frame*/
/*=================================================*/
#frame {
	position: relative;
	width: 896px;
	height: 494px;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
}
/*=================================================*/
/*Loading screen*/
/*=================================================*/
#loading-screen {
    position: absolute;
    z-index: 4000;
    height: 100%;
    width: 100%;
    background-color: black;
}
#loading-message {
    text-align: center;
    top: 25%;
    left: 43%;
    position: absolute;
}
/*Taken from https://www.w3schools.com/howto/howto_css_loader.asp*/
.loader {
    position: absolute;
    top: 40%;
    left: 40%;
    /*-webkit-transform: translateX(-50%) translateY(-50%);*/
    /*    -ms-transform: translateX(-50%) translateY(-50%);*/
    /*        transform: translateX(-50%) translateY(-50%);*/
    border: 16px solid orange; /* Light grey */
    border-top: 16px solid orangered;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/*=================================================*/
/*Play button screen*/
/*=================================================*/
#play-button-screen {
	/*font-size: 24px;*/
	/*font-family: 'Permanent Marker', sans-serif;*/
	/*color: orange;*/
	text-align: center;
	background-color: black;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2000;
}
#play-button {
	border: 5px solid orange;
	border-radius: 5px;
	position: absolute;
	height: auto;
	width: auto;
	padding: 0 10px 0 10px;
	z-index: 3000;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
}
@-webkit-keyframes spancolor {
  to { color: orangered; }
}
@keyframes spancolor {
  to { color: orangered; }
}
#play-button p span {
	font-size: 36px;
	-webkit-animation-name: spancolor;
	        animation-name: spancolor;
	-webkit-animation-duration: 2s;
	        animation-duration: 2s;
	-webkit-animation-delay: 1s;
	        animation-delay: 1s;
	-webkit-animation-iteration-count: infinite;
	        animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	        animation-timing-function: linear;
	-webkit-animation-direction: alternate;
	        animation-direction: alternate;	
}
#play-button-screen p a {
	position: absolute;
	bottom: 20px;
	left: 20px;
    font-size: 12px;
    color: #333333;
	text-decoration: none;
	font-family: Helvetica, serif;
}
/*=================================================*/
/*Intro video screen*/
/*=================================================*/
#title-screen, #title-screen-video {
    width: 100%;
    height: 100%;
}
#title-screen {
	background-color: black;	
	position: absolute;
    z-index: 1000;
}
/*=================================================*/
/*Difficulty mode select screen*/
/*=================================================*/
#difficulty-select-screen {
	background-color: black;
	z-index: 750;
	position: absolute;
	height: 100%; 
	width: 100%;
}
#title-screen-partial img{
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 900;
}
.difficulty-mode {
	position: absolute;	
	height: auto;	
    left: 50%;
	max-width: 100%;    
	z-index: 900;
	zoom: 0.7;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);	
}
.selection img:hover{
    -webkit-filter: brightness(150%);
    		filter: brightness(150%);
}
/* Taken from https://stackoverflow.com/questions/12115247/how-do-you-make-an-image-blink*/
@keyframes blink {
    0% {
    	-webkit-filter: brightness(100%);
    			filter: brightness(100%);
    }
    49% {
        -webkit-filter: brightness(150%);
        		filter: brightness(150%);
    }
    50% {
        -webkit-filter: brightness(100%);
        		filter: brightness(100%);
    }
    100% {
        -webkit-filter: brightness(100%);
        		filter: brightness(100%);
    }
}
.selected {
    -webkit-animation: blink .4s;
    		animation: blink .4s;
    -webkit-animation-iteration-count: infinite;
    		animation-iteration-count: infinite;
}
#easy{ top: 76%; }
#normal{ top: 83%; }
#hard{ top: 90%; }
/*=================================================*/
/*Character select screen*/
/*=================================================*/
#char-select-screen {
    background-color: #01025e;
    height: 100vh;
    width: 100vw;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 500;
	overflow: hidden;
}
#map-image img{
	height: 100%;
	width: 100%;
	display: block;
    margin-left: auto;
    margin-right: auto;	
}
#player-icons {
	position: absolute;
	height: auto;
	top: 65%;
	left: 50%;
	zoom: 0.7;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
}
#player-icons img{
	width: 100px;
	height: auto;
}
.player-select{ float: left; }
/*=================================================*/
/*VS screen*/
/*=================================================*/
#vs-screen {
	height: 100%;
	width: 100%;
	background-color: black;
	z-index: 400;
	position: absolute;
}
#vs-screen-image {
	height: 100%;
	width: auto;
	display: block;
    margin-left: auto;
    margin-right: auto;
}
/*=================================================*/
/*Main screen*/
/*=================================================*/
/*Stage*/
#main-screen, #blackout { 
	position: absolute;
	background-color: black; 
	height: 100%;
	width: 100%;
}
#blackout {
	opacity: 0;
	z-index: 300;
}
.fade-in-and-out {
	-webkit-animation: fadeOut 2s ease-out;
	        animation: fadeOut 2s ease-out;
	-webkit-animation-fill-mode:forwards;
	        animation-fill-mode:forwards;
}
@-webkit-keyframes fadeOut {
	0% { opacity: 0; }
	25% { opacity: 1; }
	75% { opacity: 1; }
	100% { opacity: 0; }
}
@keyframes fadeOut {
	0% { opacity: 0; }
	25% { opacity: 1; }
	75% { opacity: 1; }
	100% { opacity: 0; }
}
#ryu-stage {
	height: 100%;
	width: 100%;
}
#round-image {
	width: 300px;
	height: auto;
	position: absolute;
	top: 30%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%) scale(.6);
	   -moz-transform: translateX(-50%) translateY(-50%) scale(.6);
	    -ms-transform: translateX(-50%) translateY(-50%) scale(.6);
	        transform: translateX(-50%) translateY(-50%) scale(.6);	
}
/*Squares*/
.char-css {
	position: absolute;
	top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
}
.board {
	zoom: 0.7;
	z-index: 300;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}
.board-row { clear: both; }
.board-square {
	float: left;
	border: 3px solid black;
	line-height: 50px;
	width: 80px;
	height: 80px;
	display: inline-block;
	text-align: center;
	overflow: hidden;
	position: relative;
}
/* Taken from https://stackoverflow.com/questions/21003535/anyway-to-prevent-the-blue-highlighting-of-elements-in-chrome-when-clicking-quic*/
.no-select {
	-webkit-tap-highlight-color: transparent;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.row-1 > :first-child  {
	border-top: none; 
	border-left: none;
}
.row-1 > :nth-child(2) { border-top: none; }
.row-1 > :last-child {
	border-top: none; 
	border-right: none;	
}
.row-2 > :first-child {	border-left: none; }
.row-2 > :last-child { border-right: none; }
.row-3 > :first-child {
	border-bottom: none; 
	border-left: none;
}
.row-3 > :nth-child(2) { border-bottom: none; }
.row-3 > :last-child {
	border-bottom: none; 
	border-right: none;	
}
/*Characters*/
#player-1-char { left: 20%; }
#player-2-char { right: 20%; }
.position {
	position: fixed;
	top: 33%;	
}
.size {
  	width: 150px;
	height: 150px;
		 -webkit-transform: scale(2.8);
		 	-moz-transform: scale(2.8);
		     -ms-transform: scale(2.8);
		         transform: scale(2.8);
}
.flipped {
		 -webkit-transform: scaleX(-1) scale(2.8);
		 	-moz-transform: scaleX(-1) scale(2.8);
		     -ms-transform: scaleX(-1) scale(2.8);
		         transform: scaleX(-1) scale(2.8);
}
/*=================================================*/
/*End screen*/
/*=================================================*/
#end-screen {
	background-color: black;
	height: 100%;
	width: 100%;
}
#end-screen-image {
	height: 100%;
	width: auto;
	display: block;
    margin-left: auto;
    margin-right: auto;		
}
/*=================================================*/
/*Character animation frames*/
/*=================================================*/
/*Ryu*/
.ryu-idle { background-image: url("../../resources/img/animated/ryu/ryu-idle.gif"); }
/*Attack frames*/
.ryu-punch-frame1 { background: url("../../resources/img/sprite-maps/ryu-map.gif") 0 0; }
.ryu-punch-frame2 { background: url("../../resources/img/sprite-maps/ryu-map.gif") -151px 0; }
.ryu-punch-frame3 { background: url("../../resources/img/sprite-maps/ryu-map.gif") -302px 0; }
.ryu-punch-frame4 { background: url("../../resources/img/sprite-maps/ryu-map.gif") -453px 0; }
.ryu-punch-frame5 { background: url("../../resources/img/sprite-maps/ryu-map.gif") -604px 0; }

.ryu-punch2-frame1{ background: url("../../resources/img/sprite-maps/ryu-map.gif") 0 -151px; }
.ryu-punch2-frame2{ background: url("../../resources/img/sprite-maps/ryu-map.gif") -151px -151px; }
.ryu-punch2-frame3{ background: url("../../resources/img/sprite-maps/ryu-map.gif") -302px -151px; }
.ryu-punch2-frame4{ background: url("../../resources/img/sprite-maps/ryu-map.gif") -453px -151px; }
.ryu-punch2-frame5{ background: url("../../resources/img/sprite-maps/ryu-map.gif") -604px -151px; }

.ryu-kick-frame1{ background: url("../../resources/img/sprite-maps/ryu-map.gif") 0 -302px; }
.ryu-kick-frame2{ background: url("../../resources/img/sprite-maps/ryu-map.gif") -151px -302px; }
.ryu-kick-frame3{ background: url("../../resources/img/sprite-maps/ryu-map.gif") -302px -302px; }
.ryu-kick-frame4{ background: url("../../resources/img/sprite-maps/ryu-map.gif") -453px -302px; }
.ryu-kick-frame5{ background: url("../../resources/img/sprite-maps/ryu-map.gif") -604px -302px; }
/*Hit frames*/
.ryu-hit-frame1{ background: url("../../resources/img/sprite-maps/ryu-map.gif") 0 -453px; }
.ryu-hit-frame2{ background: url("../../resources/img/sprite-maps/ryu-map.gif") -151px -453px; }
.ryu-hit-frame3{ background: url("../../resources/img/sprite-maps/ryu-map.gif") -302px -453px; }
.ryu-hit-frame4{ background: url("../../resources/img/sprite-maps/ryu-map.gif") -453px -453px; }
/*Guile*/
.guile-idle { background-image: url("../../resources/img/animated/guile/guile-idle.gif"); }
/*Attack frames*/
.guile-punch-frame1{ background: url("../../resources/img/sprite-maps/guile-map.gif") 0 0; }
.guile-punch-frame2{ background: url("../../resources/img/sprite-maps/guile-map.gif") -151px 0; }
.guile-punch-frame3{ background: url("../../resources/img/sprite-maps/guile-map.gif") -302px 0; }
.guile-punch-frame4{ background: url("../../resources/img/sprite-maps/guile-map.gif") -453px 0; }
.guile-punch-frame5{ background: url("../../resources/img/sprite-maps/guile-map.gif") -604px 0; }

.guile-kick-frame1{ background: url("../../resources/img/sprite-maps/guile-map.gif") 0 -151px; }
.guile-kick-frame2{ background: url("../../resources/img/sprite-maps/guile-map.gif") -151px -151px; }
.guile-kick-frame3{ background: url("../../resources/img/sprite-maps/guile-map.gif") -302px -151px; }
.guile-kick-frame4{ background: url("../../resources/img/sprite-maps/guile-map.gif") -453px -151px; }
.guile-kick-frame5{ background: url("../../resources/img/sprite-maps/guile-map.gif") -604px -151px; }
.guile-kick-frame6{ background: url("../../resources/img/sprite-maps/guile-map.gif") 0 -302px; }
.guile-kick-frame7{ background: url("../../resources/img/sprite-maps/guile-map.gif") -151px -302px; }
.guile-kick-frame8{ background: url("../../resources/img/sprite-maps/guile-map.gif") -302px -302px; }

.guile-kick2-frame1{ background: url("../../resources/img/sprite-maps/guile-map.gif") 0 -453px; }
.guile-kick2-frame2{ background: url("../../resources/img/sprite-maps/guile-map.gif") -151px -453px; }
.guile-kick2-frame3{ background: url("../../resources/img/sprite-maps/guile-map.gif") -302px -453px; }
.guile-kick2-frame4{ background: url("../../resources/img/sprite-maps/guile-map.gif") -453px -453px; }
.guile-kick2-frame5{ background: url("../../resources/img/sprite-maps/guile-map.gif") -604px -453px; }
/*Hit frames*/
.guile-hit-frame1{ background: url("../../resources/img/sprite-maps/guile-map.gif") 0 -604px; }
.guile-hit-frame2{ background: url("../../resources/img/sprite-maps/guile-map.gif") -151px -604px; }
.guile-hit-frame3{ background: url("../../resources/img/sprite-maps/guile-map.gif") -302px -604px; }