/*
@font-face {
    font-family: supermolot;
    src: url('../fonts/supermolot-light.otf');
    font-weight: bold;
}
*/

* {
    margin: 0;
    padding: 0;
    font-family: supermolot;
    font-size: 15px;
    color: #fff;
    -webkit-user-select: none;
    -moz-user-select: none;     
    -ms-user-select: none;  
    user-select: none;  
}

body {
    overflow: hidden;
}
canvas {
    width: 100vw;
    height: 100vh;
}

h1 {
    font-size: 2rem;
}
h2 {
    font-size: 1.5rem;
}


#menu {
    position: fixed;
    left: -100vw;
    bottom: 3vh;
    padding: 2vh;
    background-color: rgba(0,0,0,0.4);
    box-shadow: 0 0 15px rgba(0,0,0,.4);
    border: 1px solid #222;
    margin-left: 3vh;
    transition: all 1s ease-in-out;
}

.button {
    width: 25px;
    height: 25px;
    z-index: 999;
    background-size: cover;
    display: inline-block;
    margin-right: 4vh;
}

#settingsButtonIn  {
    margin-right: 0;
    position: fixed;
    left: 5vh;
    bottom: 5vh;
    transition: all 1s ease-in-out;
}

#infoButton {
    background-image: url('../gfx/info.png');
}

#tooltipButton {
    background-image: url('../gfx/tooltip.png');
}

#fsButton {
    background-image: url('../gfx/fsOut.png');
}

#settingsButtonIn, #settingsButtonOut {
    background-image: url('../gfx/settings.png');
    margin-right: 0;
}

#loadScreen {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,1);
    z-index: 99999;
    position: fixed;
    transition: opacity 3s ease-in-out;
}

#loadScreenSize {
    width: 20vw;
    position: fixed;
    top: 40vh;
    left: 40vw;
    padding: 15px;
}

#loadScreenText {
    min-height: 18px;
    text-align: right;
    margin-bottom: 5px;
    margin-right: 10%;
    transition: opacity 1.5s ease-in-out;
}

#loadScreenBalkenFrame {
    width: 80%;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    transition: opacity 1.5s ease-in-out;
}
#loadScreenBalken {
    height: 20px;
    width: 0%;
    background-image: url('../gfx/loader.jpg');
    background-position: left;
}

#loadScreenText2 {
    min-height: 18px;
    text-align: center;
    margin-top: 30px;
    transition: opacity 3s ease-in-out;
}




#hoverText {
    position: absolute;
    visibility: hidden;
    background-color: rgba(0,0,0,0.4);
    padding: 15px;
    box-shadow: 0 0 15px rgba(0,0,0,.4);
    border: 1px solid #222;
    z-index: 1000;
    transition: all .05s ease-in-out;
}


#planFrame {
    width: 80vw;
    height: 80vh;
    position: fixed;
    top: 0vh;
    left: -200%;
    transition: all 1s ease-in-out;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    z-index: 1001;
    background-color: rgba(0,0,0,0.4);
    padding: 10vh 10vw;
}

.planSpacer {
    max-width: 59vw;
    display: inline-block;
    vertical-align: top;
}

#planImage {
    max-width: inherit;
}

#planText { 
    max-width: 15vw;
    margin-left: 0;
    padding-left: 5vw;
}

/*
@keyframes infoIn {
    from {left: -200%}
    to {left: 0}
}

@keyframes infoOut {
    from {left: 0}
    to {left: -200%}
}
*/
@keyframes infoIn {
    from {top: -200%}
    to {top: 0}
}

@keyframes infoOut {
    from {top: 0}
    to {top: -200%}
}



.zstFrei {
    color: #8f0;
}

.zstbelegt {
    color: #f00;
}

.hidden {
    display: none;
}





#information {
    width: 50vw;
    height: 50vh;
    position: fixed;
    left: -100vw;
    top: 25vh;
    background-color: rgba(0,0,0,0.4);
    padding: 15px;
    box-shadow: 0 0 15px rgba(0,0,0,.4);
    border: 1px solid #222;
    z-index: 1000000;
    transition: all 1s ease-in-out;
}