body {
    background-color: #1E5694;
    font-family: Barlow, sans-serif;
    font-size: 16px;
}

#header {
    background-color: #1E5694;
    color:white;
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height:30px;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px;
}

#logo {
    background-image: url("./img/CzechSpaceTeam.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 180px;
    height: 180px;
    position: absolute;
    top:0px;
    left:0px;
}

#answButtons .answButton {
    /*width:125px;
    height:60px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    float:left;
    text-align: center;
    /*border: 3px solid green;*/
    margin:2px;
    cursor: pointer;
    position: absolute;
    
    background-image: url("./qImg/00_01.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80px 80px;

    box-sizing: border-box;
    /*word-wrap: break-word;*/
    padding-left: 4px;
    padding-right: 4px;

    &.wide {
        padding-left: 5px;
        padding-right: 7px;
    }

    /*&.bottom {
        padding-left: 4px;
        padding-right: 4px;
    }*/
    
    &.answHidden {
        opacity: 0;
        cursor: auto;
        pointer-events: none;
    }

    &.answVisible {
        opacity: .4;
        cursor: auto;
        pointer-events: none;
    }
}

#myConsole {
    display: none;
    margin-top: 25px;
    clear: both;
}

#container {
    transform: scale(1);
    background-image: url("./img/bg.jpg");
    background-size: contain;
    width: 1280px;
    height: 960px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    align-self: center;
    margin: 0px auto;
}

#player, #infoBox {
    position: absolute;
    top: 285px;
    left: 400px;
    pointer-events: none;
}
#player.hidden {
    opacity: .0;
}

#infoBox {
    background-color: black;
    color: white;
    padding: 25px;
    height: 240px;
    width: 430px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#infoBox.hidden {
    opacity: 0;
}

#infoBox div {
    padding: 5px;
    display: flex;
    flex-grow: 1;
    text-align: center;
}
#startBtn {
    width: 150px;
    height: 75px;
    border: 2px solid magenta;
    background-color: #1E5694;
    pointer-events: initial;
    align-items: center;
    justify-content: center;
}

#progress {
    position:absolute;
    left:400px;
    top:580px;
    width:480px;
}
progress[value]::-webkit-progress-bar {
    background-color: #5ac45d;
}
progress[value]::-webkit-progress-value {
    background-color: red;
}

#myTime {
    position: absolute;
    display: flex;
    top:760px;
    left:1012px;
    width: 54px;
    height: 58px;
    color:white;
    justify-content: center;
    text-align: center;
    align-items: center;
}

/* buttons */
#b01, #b02, #b03, #b04, #b05 {
    top: 713px;
    width:100px;
    height:105px;
}
#b01 { left: 335px; }
#b02 { left: 465px; }
#b03 { left: 594px; }
#b04 { left: 720px; }
#b05 { left: 850px; }

#b10, #b08 {
    left:198px;
}
#b06 {left:222px}

#b11, #b09 {
    left:938px; 
}
#b07 {left:952px}

#b11, #b10 {
    top: 242px;
    width:140px;
    height: 85px;
}
#b10 {top: 245px;}

#b08, #b09 {
    top: 354px;
    width:140px;
    height: 85px;
}
#b08 {top: 354px;}

#b06, #b07 {
    top: 490px;
    width:100px;
    height: 95px;
}