:root {
    --logo-w: 60%;
    --logo-font-size:48pt;
    --game-ants-h:36px;
    --game-ants-y:0px;
    --game-ants-x:0px;
}
body
{
    background-color: #010101;
    color : #fff;
    font-family: "Liter", sans-serif;
}
.logo-holder{
    width: 100%;
    height:100vh ;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;

    z-index: 1;
    display: block;
    background-color: #000000;
    margin-bottom: 20px;

}
.logo-holder-endanimate{
    height:25vh !important ;
    position:  relative !important;
  
}
.logo-holder-endanimate h1
{
    font-size: 20pt !important;
    font-weight: 500;
}
.logo-holder h1 
{
    font-size: var(--logo-font-size);
    font-weight: 900;
    display: block;
}
.logo-holder img
{
    height: var(--logo-w);
    width: auto;
    margin: auto;
    display: block;
    margin-top: 50px;
}
.logo-animate{
    animation-name: logo-keyframes;
    animation-duration: 1.5s;
}
@keyframes logo-keyframes {
    0% {
        width: 100vw;
        height:100vh ;
        --logo-font-size : 48pt;
        position: fixed;
        top: 0;
        left: 0;
    }

    100% {
        height:25vh ;
        --logo-font-size : 20pt;
        position: relative;
        font-weight: 500;

        

    }
}
.game-ant{
    height: var(--game-ants-h) ;
    width: auto;
    top:var(--game-ants-y);
    left: var(--game-ants-x);
    position: absolute;
}
#gameholder
{
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: block;
    max-height: 100vh;
}
#gameholder .tool-bar
{
    width: 100%;
    display: inline-grid
;
    font-size: 30px;
    font-weight: 900;
    grid-template-columns: 33% 33% 33%;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background-color: #000;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    padding: 10px;
}
.tool-bar img
{
    height: 32px;
    width: auto;
    margin-right: 10px;
}
.tool-bar span
{
    font-family: "Press Start 2P", system-ui;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
}
.snow-rotate {
    animation:spin-image 2s linear infinite;
}
.spray-rotate {
    animation:spin-image 1.2s linear infinite;
}
@keyframes spin-image { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}
.container
{
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.press-start-2p-regular {
    font-family: "Press Start 2P", system-ui;
    font-weight: 400;
    font-style: normal;
  }
  .sriracha-regular {
    font-family: "Sriracha", cursive;
    font-weight: 400;
    font-style: normal;
  }
  .liter-regular {
    font-family: "Liter", sans-serif;
    font-weight: 400;
    font-style: normal;
  }