*{
    font-family:Arial, sans-serif;
}   

body{
    background-color:#111111;
}

#game{
    /*
    transform-origin:top left;
    transform:scale(150%, 150%);*/
    position:fixed;
    top:0;
    left:0;
    width:960px;
    height:540px;
    display:grid;
    grid-template-columns: calc(350%/16) calc(900%/16) calc(350%/16);
    gap:0;
}

#left_panel, #right_panel{
    background-color:green;
    font-size:12px;
    color:white;
}

#right_panel{
    color:white;
}

#score{
    font-size:36px;
}

#button{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:calc(900%/32);
    height:calc(100%/6);
    background-color:white;
    font-size:36px;
    color:black;
    border: 4px solid black;
    border-radius:10px;
    text-align:center;
}

#button p{
    position:absolute;
    margin:0;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

#button:hover{
    background-color:#eeeeee;
    border-color:yellow;
}

#lose_notice{
    position:absolute;
    bottom:50%;
    left:50%;
    transform: translate(-50%, -50%);
    color:white;
    font-size:64px;
}

.hidden{
    display:none;
}

#scream_cooldown_outer{
    position:relative;
    width:100%;
    height:25px;
    background-color:#888888;
}
#scream_cooldown{
    background-color:#00ff00;
    position:absolute;
    top:0;
    left:0;
    height:100%;
}
#powerups_active{
    width:100%;
    display:grid;
    grid-template-columns: 33% 33% 33%;
}

.powerup_indicator{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:32px;
    height:32px;
}

.disabled_indicator{
    filter:brightness(25%);
}

.powerup_indicator_container{
    width:100%;
    height:32px;
    position:relative;
}

#powerup_list{
    display:grid;
    grid-template-columns:100%;
}

.powerup_listentry{
    width:100%;
    display:grid;
    grid-template-columns: 20% 80%;
}
.powerup_listentry canvas{
    width:32px;
    height:32px;
}
.powerup_listentry p{
    font-size:10px;
}