body {
    width: 100%; height: 100%;
    padding: 0; margin: 0;
    background-color: black;
    font-family: Arial, Helvetica, sans-serif; 
}

#main { 
    position: absolute; 
    left:50%; transform:translateX(-50%);
    background-color: green; 
}

.boldText {
    /* size will be adjusted by JS*/
    font-weight: bold;
}

.normText {
    /* size will be adjusted by JS*/
    font-weight: normal;
}

.normTextSmall {
    /* size will be adjusted by JS*/
    font-weight: normal;
}

.normTextLarge {
    /* size will be adjusted by JS*/
    font-weight: normal;
}

.left {
    text-align: left;
}

.center {
    text-align: center;    
}

#bg { 
    position: absolute; 
    top: 0px; left: 0px;
    width: 100%; height: auto;
}

.absHeightAuto {
    position: absolute; 
    height: auto;
}

#biermedaille {
    position: absolute;
    top:8%; left: 2%;
    width: 14%; height: auto; 
}      

#wurstorden {
    position: absolute;
    top:8%; left: 18%;
    width:14%; height: auto; 
}      

.abs {
    position: absolute;
}

.hoverPointer:hover {
    cursor:pointer;
}

.boxshadow {
     box-shadow: 4px 4px 5px #000000; 
    }

.rounded1 {
    border-radius: 10px ; /* will be adjusted by JS*/
}

.rounded2 {
    border-radius: 16px; /* will be adjusted by JS*/
}

.padded4 {
    padding-left: 4%;
    padding-right: 4%;
}

.padded6 {
    padding: 6%;
}

.padded10 {
    padding-left: 10%;
    padding-right: 10%;
}

button {
    background-color: #975B02; border: none; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block;
    transition-duration: 0.3s; 
    color: #FFF1DC; 
}

button:hover { 
    background-color: #FFFFFF; 
    color: #342309; 
}

.msgButton { 
    position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%);
    width: 50%; height: 15%;
}

.msgButton:hover { 
    background-color: #FFF1DC; 
    color: #342309; 
}

#startButton {
    position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%);
    width: 50%; height: 15%;
}

#startButton:hover { 
    background-color: #FFF1DC; 
    color: #342309; 
}

#aboutclose_button { 
    position: absolute; bottom: 3%; left: 50%; transform: translateX(-50%);
    width: 40%; height: 8%;
}

#aboutclose_button:hover { 
    background-color: #FFFFFF; 
    color: #342309; 
}

#aboutButton { 
    border: 1px solid #FFFFFF;
    width: 8%; height: 8%;
    position: absolute; top: 1%; right: 1%;
} 

#aboutButton:hover { 
    background-color: #FFFFFF; 
    color: #342309; 
} 

#heimgehButton { 
    border: 1px solid #FFFFFF;
    width: 24%; height: 10%;
    position: absolute; top: 11%; left: 50%; transform: translateX(-50%);
} 

#heimgehButton:hover { 
    background-color: #FFFFFF; 
    color: #342309; 
} 

#counter_window { 
    position: absolute; 
    top: 2%; left: 25%; 
    width:50%; height: 4.8%;
    border: 1px solid #342309; 
    background-color: #975B02;
    color:#FFF1DC;   
}

.window {
    color: #342309;
    border: 2px solid #342309; 
    background-color: #FDC168; 
}

#welcome_window { 
    position: absolute; 
    top: 15%; left: 25%; 
    width:50%; height: 70%;
} 

#about_window { 
    position: absolute; 
    top: 2%; left: 4%; 
    width:92%; height: 96%;
} 

.msg_window { 
    position: absolute; 
    top: 25%; left: 25%; 
    width:50%; height: 50%;
    color: #342309;
    border: 2px solid #342309; 
    background-color: #FDC168; 
}