body {
    background-image: url('./tlo.png'); /* from http://subtlepatterns.com */

}
#login {
    background-color: rgba(116, 171, 237, 0.7);;
}
span.login {
    color: #0E3567;
}
span.error {
    color: red;
}
#main {
    background-color: rgba(61, 111, 177, 0.78);
    -webkit-box-shadow: 0px 0px 26px 3px rgba(16, 25, 90, 1);
-moz-box-shadow: 0px 0px 26px 3px rgba(16, 25, 90, 1);
box-shadow: 0px 0px 26px 3px rgba(16, 25, 90, 1);
}
div.menu a:link ,
 div.menu   a:visited {
    color: yellow;
}
div.menu a:hover { 
 color: #A5CE46; 
 text-decoration: none; 
} 

div.changePassword {
        background-color: rgba(61, 111, 177, 0.78);
    -webkit-box-shadow: 0px 0px 26px 3px rgba(16, 25, 90, 1);
-moz-box-shadow: 0px 0px 26px 3px rgba(16, 25, 90, 1);
box-shadow: 0px 0px 26px 3px rgba(16, 25, 90, 1);
color: white;
}
div.addTitle {                    
             background-color: rgba(61, 111, 177, 0.78);
    -webkit-box-shadow: 0px 0px 26px 3px rgba(16, 25, 90, 1);
-moz-box-shadow: 0px 0px 26px 3px rgba(16, 25, 90, 1);
box-shadow: 0px 0px 26px 3px rgba(16, 25, 90, 1);
color: white;              
}
div.loadStatistic {
         background-color: rgba(61, 111, 177, 0.78);
    -webkit-box-shadow: 0px 0px 26px 3px rgba(16, 25, 90, 1);
-moz-box-shadow: 0px 0px 26px 3px rgba(16, 25, 90, 1);
box-shadow: 0px 0px 26px 3px rgba(16, 25, 90, 1);
color: white;   
}
table.changePassword {
    color: white;
}
table.addTitle {
     color: white;
}

#page {
    background-color: rgba(178, 134, 217, 0.75);
    -webkit-box-shadow: 0px 0px 49px 2px rgba(16, 22, 95, 1);
-moz-box-shadow: 0px 0px 49px 2px rgba(16, 22, 95, 1);
box-shadow: 0px 0px 49px 2px rgba(16, 22, 95, 1);
}

#menu {
    background-color: rgba(114, 73, 160, 0.87);
-webkit-box-shadow: 0px 0px 22px 2px rgba(16, 22, 95, 1);
-moz-box-shadow: 0px 0px 22px 2px rgba(16, 22, 95, 1);
box-shadow: 0px 0px 22px 2px rgba(16, 22, 95, 1);
}

#page {
   
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 600s; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 600s;
}
span.color-1 {
    color: #10C51F;
}
span.color-2 {
    color: #E1D52A;
}
span.color-3 {
    color: #E14141;
}
span.color-4 {
    color: #161D86;
}
span.color-5 {
     color: #E14141;
}
span.color-6 {
    color: #161D86;
}
span.color-7 {
    color: #E1D52A;
}
span.color-8 {
    color: #161D86;
}
span.color-9 {
    color: #10C51F;
}
span.color-10 {
    color: #E14141;
}
span.color-11 {
    color: #E1D52A;
}
button.button-newGame {
-webkit-box-shadow: 0px 0px 15px 7px rgba(14, 21, 76, 1);
-moz-box-shadow: 0px 0px 15px 7px rgba(14, 21, 76, 1);
box-shadow: 0px 0px 15px 7px rgba(14, 21, 76, 1);
background-color: #367ED7;
border-color: blue;
color: white;
}
button.button-descriptiongame {

box-shadow: 0px 0px 18px 6px #2d530e;
background-color: #659212;
border-color: #549266;
color: white;
}
button.button-aboutautor {
    box-shadow: 0px 0px 18px 6px #7E1876;
background-color: #8b2a92;
border-color: #712D5F;
color: white;
}
div.button-selectCategory:hover { 
    -webkit-box-shadow: 0px 0px 21px 0px rgba(188, 218, 143, 1);
-moz-box-shadow: 0px 0px 21px 0px rgba(188, 218, 143, 1);
box-shadow: 0px 0px 21px 0px rgba(188, 218, 143, 1);
    background-color: #F3F1B4;
    border-color: #32A748;
    
}
div.button-selectCategory-1 {
    -webkit-box-shadow: 0px 0px 15px 7px rgba(14, 21, 76, 1);
-moz-box-shadow: 0px 0px 15px 7px rgba(14, 21, 76, 1);
box-shadow: 0px 0px 15px 7px rgba(14, 21, 76, 1);
background-color: #367ED7;
border-color: blue;
color: white;
}
div.button-selectCategory-2 {
-webkit-box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
-moz-box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
background-color: #A500EB;
border-color: black;
color: white;
}
div.button-selectCategory-3 {
-webkit-box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
-moz-box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
background-color: #1f35b6;
border-color: black;
color: white;
}
div.button-selectCategory-4 {
-webkit-box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
-moz-box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
background-color: #E6DD5C;
border-color: black;
color: white;
}
div.button-selectCategory-5 {
-webkit-box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
-moz-box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
background-color: #E63434;
border-color: black;
color: white;
}
div.button-selectCategory-6 {
-webkit-box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
-moz-box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
background-color: #E6B890;
border-color: black;
color: white;
}
div.button-selectCategory-7 {
-webkit-box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
-moz-box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
background-color: #E64FB1;
border-color: black;
color: white;
}
div.button-selectCategory-8 {
-webkit-box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
-moz-box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
background-color: #69E625;
border-color: black;
color: white;
}
div.button-selectCategory-9 {
-webkit-box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
-moz-box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
background-color: #3FE6C5;
border-color: black;
color: white;
}
div.button-selectCategory-10 {
-webkit-box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
-moz-box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
box-shadow: 0px 0px 15px 9px rgba(190, 134, 226, 1);
background-color: #E69864;
border-color: black;
color: white;
}
/* Chrome, Safari, Opera */
/*@-webkit-keyframes example {
    0% {background-color: rgba(178, 134, 217, 0.75);}
    5% {background-color: rgba(131, 82, 255, 0.35);}
    10% {background-color: rgba(178, 134, 217, 0.15);}
    15% {background-color: rgba(131, 82, 255, 0.75);}
    20% {background-color: rgba(178, 134, 217, 0.35);}
    25% {background-color: rgba(131, 82, 255, 0.15);}
    30% {background-color: rgba(178, 134, 217, 0.75);}
    35% {background-color: rgba(131, 82, 255, 0.35);}
    40% {background-color: rgba(178, 134, 217, 0.15);}
    45% {background-color: rgba(131, 82, 255, 0.35);}
    50% {background-color: rgba(178, 134, 217, 0.15);}
    55% {background-color: rgba(131, 82, 255, 0.75);}
    60% {background-color: rgba(178, 134, 217, 0.35);}
    65% {background-color: rgba(131, 82, 255, 0.15);}
    70% {background-color: rgba(178, 134, 217, 0.35);}
    75% {background-color: rgba(131, 82, 255, 0.15);}
    80% {background-color: rgba(178, 134, 217, 0.35);}
    85% {background-color: rgba(131, 82, 255, 0.15);}
    90% {background-color: rgba(178, 134, 217, 0.35);}
    95% {background-color: rgba(131, 82, 255, 0.15);}
    100% {background-color: rgba(178, 134, 217, 0.75);}
    
}*/
@keyframes mymove {
from {  background-color: #1D63D3;
        box-shadow: 0px 0px 7px 4px #124391, 0px 0px 9px 3px #16305a inset;
    }
  to {background-color: red;
      box-shadow: 0px 0px 5px 3px #8f2400 inset, 0px 0px 7px 1px #ff0000;
      border: 2px solid #620000;
      color: white;
        }
}
span.message {
    color: #4B2D75; 
}

.scroll-y::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
.scroll-y::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

div.char {
    background-color: #1D63D3;
box-shadow: 0px 0px 7px 4px #124391, 0px 0px 9px 3px #16305a inset;
    
}

div.char-select {
       
box-shadow: 0px 0px 5px 3px #8f2400 inset, 0px 0px 7px 1px #ff0000;
border: 2px solid #620000;
background-color: red;
color: white;

}
div.char-select2 {
       
box-shadow: 0px 0px 5px 3px #8f2400 inset, 0px 0px 7px 1px #ff0000;
border: 2px solid #620000;
background-color: red;
color: white;
animation: mymove 3s;
}
div.category {
    color: #652481;
    font-weight: bold;
}




button.button-one {
   
	box-shadow: 0px 0px 11px 3px #001bcc;
	background-color:#594bab;
	border-radius:18px;
	border:2px solid #1e1057;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Impact;
	
	
	
	text-decoration:none;
	text-shadow:0px 0px 19px #dbdbdb;
}
button.button-disable {
   
	box-shadow: 0px 0px 11px 3px #38494E;
	background-color:#64838C;
	border-radius:18px;
	border:2px solid #38494E;
	display:inline-block;
	cursor: not-allowed;
	color:#ffffff;
	font-family:Impact;
	
	text-decoration:none;
	text-shadow:0px 0px 19px #dbdbdb;
}
button.button-one:hover {
	background-color:#0c1061;
}
button.button-one:active {
	position:relative;
	top:1px;
}

button.button-two {
	box-shadow: 0px 0px 11px 3px #707070;
	background-color:#65c43f;
	border-radius:18px;
	border:2px solid #c2aa32;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Impact;
	
	text-decoration:none;
	text-shadow:0px 0px 19px #dbdbdb;
}
button.button-two:hover {
	background-color:#3b9449;
}
button.button-two:active {
	position:relative;
	top:1px;
}
button.button-four {
	box-shadow: 0px 0px 11px 3px #707070;
	background-color:#EEE82C;
	border-radius:18px;
	border:2px solid #c2aa32;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Impact;
	
	text-decoration:none;
	text-shadow:0px 0px 19px #dbdbdb;
}
button.button-four:hover {
	background-color:#DBBB1C;
}
button.button-four:active {
	position:relative;
	top:1px;
}
button.button-five {
        box-shadow: 0px 0px 11px 3px #7D187D;
	background-color:#F22EEF;
	border-radius:18px;
	border:2px solid #7D187D;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Impact;
	
	text-decoration:none;
	text-shadow:0px 0px 19px #dbdbdb;
}
button.button-five:hover {
	background-color:#8A0E9A;
}
button.button-five:active {
	position:relative;
	top:1px;
}
button.button-three {
	box-shadow: 0px 0px 11px 3px #dba15a;
	background-color:#c2523e;
	border-radius:18px;
	border:2px solid #eb1717;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Impact;
	
	text-decoration:none;
	text-shadow:0px 0px 19px #dbdbdb;
}
button.button-three:hover {
	background-color:#db6f34;
}
button.button-three:active {
	position:relative;
	top:1px;
}
button.button-word-three {
	box-shadow: 0px 0px 7px 4px #d96a20;
	background-color:#cc1f00;
	border-radius:21px;
	border:2px solid #db7241;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	
	
	text-decoration:none;
	text-shadow:0px 0px 0px #ad1c09;
}
button.button-word-three:hover {
	background-color:#990b0b;
}
button.button-word-three:active {
	position:relative;
	top:1px;
}

        

        
#char-one {
   background-color: rgba(57, 39, 103, 0.95);
   border-radius: 20px;
   -webkit-box-shadow: 0px 0px 9px 6px rgba(49, 106, 146, 1);
-moz-box-shadow: 0px 0px 9px 6px rgba(49, 106, 146, 1);
box-shadow: 0px 0px 9px 6px rgba(49, 106, 146, 1);
    
}

#char-four {
   background-color: rgba(219, 187, 28, 0.95);
   border-radius: 20px;
   -webkit-box-shadow: 0px 0px 9px 6px rgba(146, 123, 19, 1);
-moz-box-shadow: 0px 0px 9px 6px rgba(146, 123, 19, 1);
box-shadow: 0px 0px 9px 6px rgba(146, 123, 19, 1);
    
}

#char-two {
    
   background-color: rgba(27, 140, 97, 0.95);
   border-radius: 20px;
-webkit-box-shadow: 0px 0px 9px 6px rgba(32, 158, 79, 1);
-moz-box-shadow: 0px 0px 9px 6px rgba(32, 158, 79, 1);
box-shadow: 0px 0px 9px 6px rgba(32, 158, 79, 1);
    
}

#char-three {
    background-color: rgba(186, 87, 87, 0.95);
   border-radius: 20px;
-webkit-box-shadow: 0px 0px 9px 6px #8C1F1F;
-moz-box-shadow: 0px 0px 9px 6px #8C1F1F;
box-shadow: 0px 0px 9px 6px #8C1F1F;
}

div.char-blue {
        background-color: #1D63D3;
        border-radius: 14px;
        border: 4px solid #061d8e;
        color: #7F94CB;
 
}
div.char-blue:hover {
        background-color: #BCE2FF;
        border-radius: 14px;
        border: 4px solid #061d8e;
        cursor: pointer;
        color: #2B3467;
 
}

div.char-yellow {
        background-color: #FFE72F;
        border-radius: 14px;
        border: 4px solid #BE8B0A;
        color: #AD210E;
 
}
div.char-yellow:hover {
        background-color: #F2EFA6;
        border-radius: 14px;
        border: 4px solid #BE8B0A;
        cursor: pointer;
        color: #AD210E;
 
}

div.char-green {
        background-color: rgba(31, 140, 24, 1);;
        border-radius: 14px;
        border: 4px solid #117830;
        color: #9AB830;
 
}
div.char-green:hover {
        background-color: #BBE2AA;
        border-radius: 14px;
        border: 4px solid #57ff89;
        cursor: pointer;
        color: #0DE231;
 
}
div.char-color-off {
        background-color: silver;
        border-radius: 14px;
        border: 4px solid #707979;
        cursor: not-allowed;
        
        color: #334139;
}
div.char {
    color: white;  
    
}

div.winner {
    border-radius: 30px;
    background-color: rgba(21, 162, 21, 0.75);
    color: #2A7326;
    box-shadow: 0px 0px 25px 16px #308A4E;
    
}
div.gameOver {
    border-radius: 30px;
    background-color: rgba(204, 21, 45, 0.75);
    color: #FFD4F7;
    box-shadow: 0px 0px 25px 16px #B27D95;
}

button.categories-all {
    background-color: #438FBF;
    color: white;
}

.categories-all {
	box-shadow: 0px 0px 7px 6px #1a5799;
	background-color:#4363a3;
	border-radius:42px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:28px;
	font-weight:bold;
	padding:23px 55px;
	text-decoration:none;
	text-shadow:0px 0px 0px #2f6627;
}
.categories-all:hover {
	background-color:#3f59bf;
}
.categories-all:active {
	position:relative;
	top:1px;
}

div.new-game {
    color: white;
    font-size: 33px;
    
    background-color: rgba(26, 37, 125, 1);
    -webkit-box-shadow: 0px 0px 30px -3px rgba(101, 183, 200, 1);
-moz-box-shadow: 0px 0px 30px -3px rgba(101, 183, 200, 1);
box-shadow: 0px 0px 30px -3px rgba(101, 183, 200, 1);
}
div.new-game:hover {
    color: white;
    font-size: 33px;
    
    background-color: rgba(26, 37, 125, 1);
-webkit-box-shadow: 0px 0px 22px 8px rgba(102, 112, 214, 1);
-moz-box-shadow: 0px 0px 22px 8px rgba(102, 112, 214, 1);
box-shadow: 0px 0px 22px 8px rgba(102, 112, 214, 1);
}
a.new-game {
    text-decoration: none;
}

a.links {
    cursor: pointer;
    color: white;
    
}
div.category-title {
    color: #591D5E;
    font-weight: bold;
}
div.word3 {
    
}

span.autor {
    color: #4C1C74;
}
span.mail  {
    color: blue;
}

div.link-menu-main {
    color: white;
    font-size: 33px;
    
    background-color: rgba(26, 37, 125, 1);
    -webkit-box-shadow: 0px 0px 30px -3px rgba(101, 183, 200, 1);
-moz-box-shadow: 0px 0px 30px -3px rgba(101, 183, 200, 1);
box-shadow: 0px 0px 30px -3px rgba(101, 183, 200, 1);
border-radius: 35px;
}
div.description {
    color: #370737;
}