:root {
    --primary:      #3F51B5;
    --dark-primary: #3F51B5;
}

canvas {

    background:    #eee;
    border:        1px solid #eeeeeedd;
    border-radius: 2px;
    box-shadow:    0px 1px 2px #222;
    display:       block;
    margin:        80px auto 0px auto;
    z-index:       99;
}

#controls button {
    margin-right: 0px !important;
    text-align:   center;
    text-shadow:  0px 1px 0px black;
    width:        55px;
}

#controls {
    bottom:      30px;
    box-shadow:  0px 0px 0px black !important;
    left:        0px;
    margin-left: 0px !important;
    position:    fixed;
    right:       0px;
    text-align:  center;
}

[box] {
    background:    white;
    border-radius: 2px;
    box-shadow:    0px 1px 2px #111;
    font-family:   'Montserrat';
    font-size:     21px;
    left:          20px;
    margin-top:    170px;
    padding:       15px 25px;
    position:      fixed;
}

#move {
    left:  inherit;
    right: 20px;
}

#powerup {
    bottom:     37px;
    box-shadow: 0px 1px 2px #999 !important;
    left:       inherit;
    left:       inherit;
    padding:    0px !important;
    right:      calc(50% - 126px);
}

#powerup button {
    background: white;
    color:      #444;
    padding:    10px 5px;
}

#reload {
    bottom:      -40px;
    margin-left: calc(50% - 120px);
    opacity:     0;
    position:    fixed;
    transition:  all .2s;
    width:       240px;
}

#reload.on {
    bottom:  60px;
    opacity: 1;
}

selector span.on {
    box-shadow: 0 1px 2px #222;
}

#pageTitle {
    background:    transparent;
    border-radius: 4px;
    color:         white;
    font-weight:   bold;

    margin-left:   calc(50% - 177px);
    margin-top:    -20px;
    padding:       15px 0;
    width:         353px;
}

body:not(.started) #pageTitle {

    margin-top: -10px;
}

body h2:first-child {
    margin-bottom: 10px;
}

h2 {
    font-weight: 400;
    margin:      0px;
    padding:     10px 0px;
    text-align:  center;
}

#power_selection button {
    height:     20px;
    margin:     auto auto auto calc(50% - 50px);
    position:   absolute;

    transition: .7s;
    width:      100px;
}

#power_selection.on button {
    height:      46px;
    margin-left: calc(50% - 125px);
    margin-top:  -24px !important;
    width:       250px;
}

#power_selection.on button:hover {
    background: #eee;
    color:      var(--bg);
    transition: .2s;
}

#power_selection {
    background:  var(--primary);
    bottom:      -180px;
    box-shadow:  0 -1px 1px #999;
    height:      180px;
    margin-left: calc(50% - 352px / 2);
    position:    fixed;
    transition:  .5s;
    width:       352px;
    z-index:     2;
}

#power_selection.on {
    bottom: 0;
}

#power_text {
    color:   white;
    padding: 20px 60px 20px 120px;
}

#power_icon, #upgradeIcon {
    border-radius: 100%;
    color:         white;
    cursor:        none;
    font-size:     32px;
    margin:        30px;
    position:      absolute;
    /* background: rgba(255,255,255,.5); */
}

#power_text b {
    font-family:    'Montserrat';
    text-transform: uppercase;
}

#pageTitle {
    margin:     0 auto;
    text-align: center;
}

.started #evolveBtn {
    display: none;
}

/*mode : time attack*/
#timeAttackBar {
    right: 100%;
}

.started #timeAttackBar {
    position:   fixed;
    left:       0;
    z-index:    99;
    bottom:     56px;
    height:     6px;
    background: #4CAF50;

}

.started #timeAttackBar.warn {
    background: #FF9800 !important;
}