@import url('https://fonts.googleapis.com/css?family=Quicksand');

hr {
    background:#DDD;
    border:none;
    height:2px;
}
.main_header {
    margin:-10px auto;
    width:calc( 600px - 30px );
    box-shadow: 0px 2px 4px #666;
    background: white;
    padding:15px 30px;
    font-weight: bold;
    font-size: 25px;
    text-align: center;
    
}

.header_click {
    cursor: pointer;
}

.header_click:hover {
    background-color: red;
    font-size: 26px;
    transition: all .5s;
}

body {
    font-family: 'Quicksand', sans-serif;
    margin:0px;
}

container {
    text-align: center;
    display: block;
    margin:20px auto;
    width:570px;
    background: white;
    padding: 15px;
    z-index: 9;
    position:fixed;
    left: calc( 50% - 300px );
    bottom:-400px;
    transition:.4s;
}
container.on {
    bottom:40px;
}
.ingame container.on {
    bottom:0px;
}

button {
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    font-weight: 400;
    border: 1px solid #888 ;
    border-radius: 2px;
    padding: 8px 16px;
    cursor: pointer;
    margin: 5px;
}
#difficulty_selector button[disabled] {
   border: 1px solid #888 !important;
}

/*powerups*/

div.pwr {
    padding:13px;
    margin:7px;
    border-radius:50%;
    background:#48F;
    width: 20px;
    color:white;
    cursor: pointer;
    transition: .3s;
}
div.pwr:nth-child(1) { background:#66BB6A; }
div.pwr:nth-child(2) { background:#4CAF50; }
div.pwr:nth-child(3) { background:#43A047; }
div.pwr:nth-child(4) { background:#00BCD4; }
div.pwr:nth-child(5) { background:#00ACC1; }

div.pwr:nth-child(7) { background:#673AB7; }
div.pwr:nth-child(8) { background:#512DA8; }
div.pwr:nth-child(9) { background:#FF9800; }
div.pwr:nth-child(10) { background:#F44336; }
div.pwr:nth-child(11) { background:#607D8B; }


div.pwr[disabled] ,div.pwr[disabled]:hover{
    background:#999;
    color:#FEFEFE;
}
div.pwr:hover {
    background: #254b8d;
}
div.pwr[disabled]:hover::after {
     border:1px solid #999;
}
div.pwr:hover::after , div.pwr.active::after {
    content:'';
    position: absolute;
    width:50px;
    height:50px;
    border:1px solid #254b8d;
    border-radius: 50%;
    margin-top: -36px;
    margin-left: -26px;
}
div.pwr.active::after {
    border:1px solid #222;
    box-shadow: 0px 0px 4px #444;
    transition:all .2s;
}
div.pwr:nth-child(1)::after  {
       margin-top: -16px;
    margin-left: -31px;
}
div.pwr:nth-child(3)::after,div.pwr:nth-child(9)::after,div.pwr:nth-child(5)::after,div.pwr:nth-child(8)::after {
       margin-top: -16px;
    margin-left: -33px;
}
div.pwr:nth-child(10)::after  {
    margin-top: -16px;
    margin-left: -32px;
}
#currSelAchievement b i {
    font-style: normal;
    color:#444;
}
#currSelAchievement b s {
    font-style: normal;
    text-decoration: none;
    color:#48F;
}
#achievementHolder div {
    display:inline-block;
}

a {
    text-decoration: none;
    color: black;
}

/*new menu design*/

#container_holder_selector {
    position: fixed;
    width:600px;
    bottom:0;
    left:calc( 50% - 300px );
    background: white;
    z-index: 99;
}
.ingame #container_holder_selector {
    bottom:-50px;
    transition:all .4s;
}
#container_holder_selector span {
    display: inline-block;
    width: calc( 25% - 30px );
    padding: 10px 15px;
    border-top:0px solid transparent;
    transition: all .4s;
    text-align: center;
}
footer span {
    border-radius: 0px;
    cursor:pointer;
}/*
footer span:first-child {
    border-radius: 8px 0px 0px 0px;
}
footer span:last-child {
   border-radius: 0px 8px 0px 0px; 
}
*/
#container_holder_selector span.on {
    border-top:4px solid #48F;
    background:#DDD;
}

#left, #right {
    position: fixed;
    top:0;
    bottom:0;
   z-index: -1;
}
#left {
  left:0;
  right:50%;    
}
#right {
  left:50%;
  right:0;    
}

holder {
        position: fixed;
        top: 350px;
        left: calc(50% - 32px);  
        z-index:10;
        display:none;
}
fab {
        display: block;
        border-radius: 100%;
        padding:15px;
        box-shadow: 0px 0px 4px #444;
        background:white;
        margin-top:20px;
        text-align: center;
        width: 32px;
        transition:all .4s;
        opacity:1;
        
}

fab.hidden {
     transition:all .4s;
       opacity:0;
       box-shadow: none;
}
/*points statistic*/
#pointsStatistic {
    position: fixed; top:0; left:0; right:0; bottom:0;
    background:#FEFEFE;
   
    z-index: -2;
}
#pointsStatistic.on {
    z-index: 90;
    bottom:100;
}
#pointsStatistic div {
    position: fixed;
    bottom: 0;
    background:#444;
    color:transparent;  
}
#pointsStatistic div:hover {
    color:white;
    text-align:center;
    animation: glowYourAss .3s  alternate infinite; 
    cursor: n-resize;
}
@keyframes glowYourAss {
    0% { background:#444; }
    100% { background:#888; }
}

#trump {
    display: none;
    transition:.5s opacity;
     width: 80px;
    height: 80px;
    position: fixed;
}

#additional_info {
  text-align:left !important;
}
#additional_info span {
    display:block;
    margin-top:10px;
    margin-bottom:15px;
}

#returnHome {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 99;
    display: none;
}
   
#succes_notification {
    position:fixed;
    bottom:110px;
    width:100px;
    left:calc( 50% - 65px );
    opacity:0;
    
}
#succes_notification.toast {
    animation: toastNotification 1.7s;
}
#succes_notificationColor {
   height: 20px;
    width: 130px;
    margin: -15px -15px 10px -15px;
    
}
.succ_Good { background:#4CAF50; }
.succ_Combo { background:#00BCD4; }
.succ_Meh { background:#607D8B; }
.succ_Bad { background:#FF9800; }
.succ_Awful { background:#F44336; }
       
@keyframes toastNotification {
    0% { bottom:30px; opacity:0; }
    10% { opacity:1; }
    30% { bottom:50px; }
    85% { opacity:1; bottom:50px; }
    100% { bottom:30px; opacity:0; }
}        
/*DOOM 1 turning*/
.doom1 span>div#left , .doom1 span>div#right {
    animation: rotateYourAss 1.5s linear;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    border:5px;
}
.doom1 #trump {
    left: calc( 50% - 40px );
    top: calc( 50% - 40px );
    display: block;
    animation: rotateYourAss 2s linear;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}


@keyframes rotateYourAss {
    0% { transform:rotate(0deg); }
    100% { transform:rotate(180deg); }
}


/*DOOM 2 distance*/
.doom2 span>div#left  {
    transition:right .2s;
    right:80%;
}
.doom2 span>div#right  {
    transition:left .2s;
    left:80%;
}