main.css

h1{
    text-align: center;
    font-size: 3em;
    font-family: sans-serif;
    padding: 10px 0;
    margin: 0;
}

#tiol{
    width: 15vw;
    margin: auto;
    display: block;
}

div.centem{
    text-align: center;
}

div.boxx{
    border: 3px inset gray;
    width: 72vw;
    margin: auto;
    position: relative;
    background-image: url(Sprites/bg.png);
    background-size: contain;
}

canvas#maine{
    width: 72vw;
}

.absolut{
    position: absolute;
}

/* the left bar */
.left-bar{
    height: 40vw;
    width: calc(12vw - 10px);
    top: 0;
    border: 5px outset brown;
}

#time{
    width: calc(12vw - 10px);
    height: 6vw;
    background-color: #f5d193;
    position: relative;
    color: #7d4f00;
    font-family: monospace;
    font-size: 1.4vw;
    line-height: 4vw;
}

.timeuntil{
    width: 10vw;
}

div.vict{
    font-family: monospace;
    background-color: #d6b57a;
    font-size: 1.0vw;
    height: calc(40vw - 10vw);
    padding-top: 4vw;
}

div.toto{
    float: left;
    padding: 0.7vw;
}

div.totot{
    font-size: 1.5vw;
    line-height: 12vw;
    float: left;
}

/* the factory */
.factori{
    background-image: url(Sprites/factory.png);
    width: 8vw;
    height: 8vw;
    left: calc(70vw / 2 - 2vw);
    top: calc(40.5vw / 2 - 9vw);
    background-size: contain;
}

#factori-q{
    left: calc(70vw / 2 + 6vw);
    top: calc(40.5vw / 2 - 6vw);
}

#factory-countdown{
    position: absolute;
    top: 19.25vw;
    left: 35vw;
    font-family: monospace;
    font-size: 1.8vw;
}

/* the queue items */
.queue-tbl{
    
}

.queue-itm{
    width: calc(2.6vw - 7px);
    height: 2.6vw;
    border: 2px solid brown;
    background-size: contain;
}

.queue-dir{
    color: crimson;
    text-align: center;
    font-family: monospace;
    font-size: 1.0vw;
}

/* the warehouse */
.wh{
    color: white;
    width: 8vw;
    height: 6.15625vw;
    top: 29vw;
    background-size: contain;
}

.wh1{
    left: 20vw;
    background-image: url("Sprites (UPDATED)/warehouseOne.png");
}
.wh2{
    left: 40vw;
    background-image: url("Sprites (UPDATED)/warehouseTwo.png");
}

#wh1-q{
    left: 27.5vw;
    top: 29vw;
}
#wh2-q{
    left: 47.5vw;
    top: 29vw;
}

/* the top right */
#top-right{
    top: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

.resources{
    float: right;
    
    padding: 0;
    margin: 0;
    background-color: #debf8a;
}

.material-sprite{
    float: left;
    width: 8vw;
    height: 5.25vw;
    background-size: cover;
    background-position: center;
}

.mat0{
    background-image: url(Sprites/sprite_0.png);
}
.mat1{
    background-image: url(Sprites/sprite_1.png);
}
.mat2{
    background-image: url(Sprites/sprite_2.png);
}

.clearer{
    clear: both;
}

div.countr{
    font-family: monospace;
    font-size: 1.8vw;
    width: 8vw;
    height: 3.75vw;
    float: left;
}

.estima{
    float: right;
}

.bigbox{
    width: 9vw;
    height: 8vw;
    float: left;
    text-align: center;
    padding-top: 1vw;
    background-color: #debf8a;
}

.boxe{
    width: 3vw;
    height: 3vw;
    position: relative;
    left: calc(50% - 1.5vw);
    background-size: cover;
}

.b-rifl{
    background-image: url("Sprites (UPDATED)/rifle_Crate.png");
}
.b-ammo{
    background-image: url("Sprites (UPDATED)/ammo_Crate.png");
}
.b-food{
    background-image: url("Sprites (UPDATED)/food_Crate.png");
}
.b-medi{
    background-image: url("Sprites (UPDATED)/health_Crate.png");
}

.boxe-desc{
    font-family: monospace;
    font-size: 0.75vw;
}

.produce{
    background-color: #0000;
    background-image: url(Sprites/produce.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: 2px solid #805b1c;
    color: #422d08;
    font-size: 1.05vw;
    font-family: monospace;
    width: 6vw;
    height: 2vw;
    
    transition: 0.4s ease;
}

.produce:hover{
    color: white;
    background-color: #805b1c;
}

.produce:active{
    background-color: #ba8e41;
}

/* the mode selection */
div.mode-select{
    width: 18vw;
    height: 8vw;
    top: 9vw;
    border: 2px solid black;
    background-color: #dbb97d;
    font-family: monospace;
    font-size: 1.1vw;
}

#rd0, #rd1{
    float: left;
    width: calc(7.5vw - 3px);
    margin: 0.5vw 0.75vw 0;
    font-size: 1.2vw;
}

.rd-desc{
    float: left;
    width: 7.5vw;
    margin: 0 0.75vw;
    font-size: 0.85vw;
}

.dire-selected{
    border: 1px solid red;
    color: crimson;
}

/* intro screen */
#intro{
    width: 64vw;
    height: 30vw;
    position: absolute;
    
    top: 5vw;
    left: 4vw;
    
    background-color: #e0bf84;
    border: 3px inset #9c6e1c;
    font-family: monospace;
}

#startgame{
    position: relative;
    top: 26vw;
    
    width: 12vw;
    height: 2.4vw;
    font-size: 1.6vw;
    font-family: monospace;
    
    border: 3px solid #694e1d;
    background-color: #0000;
    color: #694e1d;
    
    transition: 0.6s ease;
}

#startgame:hover{
    background-color: #694e1d;
    color: white;
}

#startgame:active{
    background-color: #9c7a3d;
}

.explain{
    font-size: 1.1vw;
}

.inl{
    height: 1vw;
}

.hiden{
    display: none;
}

/* victory screen */
.victori, .failure{
    width: 48vw;
    height: 24vw;
    position: absolute;
    
    top: 5vw;
    left: 12vw; 
    
    background-color: #e0bf84;
    border: 3px inset #9c6e1c;
    font-family: monospace;
    
    font-size: 4vw;
    color: #9c6e1c;
    ;line-height: 12vw;
}

.playagain{
    width: 12vw;
    height: 2.4vw;
    font-size: 1.6vw;
    font-family: monospace;
    
    border: 3px solid #694e1d;
    background-color: #0000;
    color: #694e1d;
    
    transition: 0.6s ease;
}
.playagain:hover{
    background-color: #694e1d;
    color: white;
}
.playagain:active{
    background-color: #9c7a3d;
}