body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #013249;
    background-size: 100%;
    margin: auto;
    text-align: center;
    user-select: none;
}


#layer, #menu, #rulesBox, #colorSelector {
    position:absolute;
    left:50%;
    top: 50%;
    transform:translate(-50%, -50%);
    border-radius: 4px;
    visibility:hidden;
    z-index:1;
}

#main-container {
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    width: 90%;
    height:98%;
    margin: auto;
    overflow: hidden;
    margin-top: 5px;
}

#content {
    background-color: #024b6dd0;
    background-image: url("images/background.jpg");
    width: 99.8%;
    float: left;
    height: 99%;
    font-size: 25px;
    text-align: center;
    overflow: hidden;
    border: 1px solid black;
    border-radius: 50px;
}

.middle-container {
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    width:820px;
    height:476px;
    clear:right;
    z-index:0;
}

.card-container {
    height: 156px;
    border-radius: 5px;
    z-index:3;
}

.card-container-top {     
    position:absolute;
    width:1348px;
    left:50%;
    top:90px;
    transform:translate(-50%, -50%);
    z-index:3;
}

.card-container-bottom {
    position:absolute;
    width:1348px;
    left:50%;
    bottom:-60px;
    transform:translate(-50%, -50%);
    z-index:3;
}

.card-container-left {
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%);
    left: 110px;
    width: 156px;
    height:910px;
    z-index:3;
}

.card-container-right {
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%);
    right:-66px;
    width: 156px;
    height:910px;
    z-index:3;
}

#layer {
    position:absolute;
    background-color:transparent;
    width:970px;
    height:573px;
    margin-top:1px;
    z-index:0;
}


#logo{
    position:absolute;
    left:50%;
    top:40%;
    transform:translate(-50%, -50%);
    z-index:1;
}

#titleScreen {
    position:absolute;
    left:50%;
    top:60%;
    transform:translate(-50%, -50%);
    background-color: transparent;
    text-align:center;
    padding:5px;
    z-index:1;
}

#dialogTitle {
    margin: 0 0 20px 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: white;
}


#colorSelector {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:276px;
    height:170px;
    background-color:#013249;
    border:none;
}


#menu {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:470px;
    height:300px;
    color:white;
    background-color:#013249;
    border:none;
    border-bottom-left-radius: 50% 50%;
    border-bottom-right-radius: 50% 50%;
    border-top-left-radius: 50% 50%;
    border-top-right-radius: 50% 50%;
}

#menu h1 {
    margin: 60px 0;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}


#rulesBox {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:400px;
    height:350px;
    color:white;
    background-color:#013249;
    font-size:14px;
    font-weight:lighter;
    text-align:justify;
    z-index:3;
}

#rulesBox h4 {
    margin: 5px 0;
    text-align:left;
}

.score {
    position:absolute;
    float:left;
    color: rgba(255, 255, 255, 0.63);
    font-size:14px;
    font-weight:lighter;
    margin: 295px 0 0 10px;
    user-select:none;
    text-align:center;
    opacity:0;
    transition: opacity 0.5s;
}

.score img{
    width:45px;
    height:45px;
    border: 3px solid;
    border-radius:6px;
    box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.8);
}

#playerBottomScore{
    margin: 388px 0px 0px 382px;
    z-index:0;
}

#playerRightScore{
    margin: 202px 0px 0px 758px;
    z-index:0;
}

#playerLeftScore{
    margin: 202px 0px 0px 10px;
    z-index:0;
}

#playerTopScore{
    margin: 32px 0px 0px 382px;
    z-index:0;
}

#playerTopImg{z-index:0;}
#playerLeftImg{z-index:0;}
#playerRightImg{z-index:0;}
#playerBottomImg{z-index:0;}


#label{
    position:absolute;
    float:left;
    width:750px;
    font-size:60px;
    margin-top:190px;
    margin-left:35px;
    color:white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    visibility:hidden;
}

#hint {
    position:absolute;
    width:820px;
    float:left;
    clear:left;
    margin: 300px 0 0 -2px;
    bottom:0;
    font-size:11px;
    color: rgba(255, 255, 255, 0.63);
    visibility:hidden;
}

.flow-indicator {
    float:left;
    height:286px;
    width:130px;
    margin-top:90px;
    margin-left:30px;
    margin-right:30px;
    opacity:0;
    background-size:100%;
    transition: opacity 0.15s, transform 0.5s;
}

#arrow-left {
    margin-left:114px;
}

#action-player1 {   /*Player4*/
    margin-top: 374px;
    margin-left: 368px;
}

#action-player2 {   /*Player1*/
    margin-top:186px;
    margin-left: -6px;
}

#action-player3 {   /*Player2*/
    margin-top: 18px;
    margin-left: 366px;
}

#action-player4 {   /*Player3*/
    margin-top:188px;
    margin-left: 744px;
}

.action-player {
    position:absolute;
    float:left;
    width:80px;
    height:80px;
    font-size:50px;
    color:white;
    font-weight:bold;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.player-indicator{
    position: absolute;
    float: left;
    width: 35px;
    height: 35px;
    background-size: 100%;
    visibility: hidden;
}

#player1-indicator {   /*Player4*/
    height: 30px;
    margin-top: 350px;
    margin-left: 390px;
}

#player2-indicator {   /*Player1*/
    width: 30px;
    margin-top: 210px;
    margin-left: 70px;
}

#player3-indicator {   /*Player2*/
    height: 30px;
    margin-top: 90px;
    margin-left: 390px;
}

#player4-indicator {   /*Player3*/
    width: 30px;
    margin-top: 210px;
    margin-left: 720px;
}



/* BUTTONS */

button {
    margin: 5px 0px;
    font-size: 20px;
    border-radius: 4px;
    font-weight: lighter;
    background-color: rgb(212, 0, 0);
    border: 1px solid white;
    color: white;
    padding: 5px;
    width: 250px;
    box-shadow: 1px 9px 11px rgba(0, 0, 0, 1);
    transition: transform 0.15s;
}

.commonButton:hover {
    background-color: rgb(255, 204, 0);
    transform: scale(1.1);
}

.commonButton:active {
    background-color: rgb(204, 164, 2);
}

button:focus {
    outline: 0;
}

#btnCloseRules {
    float: left;
    border: none;
    padding: 0px;
    margin: 3px;
    background-color: transparent;
    box-shadow: none;
    width: 14px;
}

#btnCloseRules:hover {
    color: red;
}

#btnPlayAgain {
    width: 200px;
    background-color: rgb(212, 0, 0);
    border: 2px solid white;
    font-size: 25px;
    transition: transform 0.15s;
}

#btnPlayAgain:hover {
    transform: scale(1.1);
}

#btnPlayAgain:active {
    background-color: rgb(168, 3, 3);
}

#colorSelector button {
    width:50px;
    height:50px;
    margin: 0;
    font-size: 0;
}

#btnBlue {
    background-color: rgb(42, 127, 255);
}

#btnBlue:hover {
    background-color: rgb(98, 161, 255);
}

#btnBlue:active {
    background-color: rgb(32, 92, 184);
}

#btnGreen {
    background-color: rgb(44, 160, 90);
}

#btnGreen:hover {
    background-color: rgb(70, 196, 120);
}

#btnGreen:active {
    background-color: rgb(31, 122, 67);
}

#btnRed {
    background-color: rgb(212, 0, 0);
}

#btnRed:hover {
    background-color: rgb(247, 40, 40);
}

#btnRed:active {
    background-color: rgb(168, 3, 3);
}

#btnYellow {
    background-color: rgb(255, 204, 0);
}

#btnYellow:hover {
    background-color: rgb(255, 224, 100);
}

#btnYellow:active {
    background-color: rgb(204, 164, 2);
}




.unoButton{
    position:absolute;
    left:75%;
    top:75%;
    transform:translate(-50%, -50%);
    width:65px;
    height:65px;
    border-radius:33px;
    background-color:#ed151f;
    opacity:0;
    transition: opacity 0.15s, transform 0.15s;
}

.unoButton:hover{
    background-color: #f0303a;
}

.unoButton:active{
    background-color: #b10e16;
}

#btnPass{
    float: left;
    position: absolute;
    margin: 403px 0px 0px -510px;
    width: 70px;
    font-size: 15px;
    background-color: rgb(212, 0, 0);
    border: 1px solid rgb(255, 98, 98);
    opacity: 0;
    transition: opacity 0.15s;
}

#btnPass:hover{
    filter: brightness(200%);
}

#btnPass:active{
    filter: initial;
    background-color: rgb(148, 1, 1);
}


.btnFullscreen{
    position:absolute;
    top:10px;
    right: 40px; 

    
    font-size: 14px;
    width: 120px;
    background-color: transparent;
    border: none;
    box-shadow: none;
    z-index:4;
}

.btnFullscreen:hover{
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

#exitFullscreen{visibility:hidden;}

@media screen and (max-width:1610px)
{   
	#main-container {width:98%;}
}
	
@media screen and (max-width:1470px)
{   
	.card-container-top {width:1210px;}
	.card-container-bottom {width:1210px;}
	.card-container-left {height:910px;}
	.card-container-right {height:910px;}
}

@media screen and (max-width:1270px)
{   
	.card-container-top {width:1000px;}
	.card-container-bottom {width:1000px;}
	.card-container-left {height:834px;}
	.card-container-right {height:834px;}
}