div {
    position:absolute;
    text-align: center;
    font-size: 1.2rem;
}
#base, #cover {
    width: 100vw;
    height: 100vh;
    left:0;
    top:0;
}
#base {
    background-color: green;
}
#cover {
    display: none;
    background-color: red;
    z-index: 100;
}
#timer {
    width: 20%;
    height: 10%;
    font-size: 8vh;
    color: red;
    background-color: black;
    border-radius: 20px;
    left: 40%;
    top: 2%;
    border: beige outset 2px;
    font-family: Impact;
    font-weight: bolder;
}
#title1, #title2 {
    width: 40%;
    height: 10%;
    background-clip: padding-box;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    top: 2%;
}
#title1 {
    left: 0%;
    background-image: url("trivial.png");
}
#title2 {
    right: 0%;
    background-image: url("bets.png");
}
.nameplates {
    font-size: 7vh;
    height: 10%;
    margin: auto;
    top: 14%;
    left: 0;
    right: 0;
}
.bank {
    font-size: 6vh;
    height: 8%;
    margin: auto;
    top: 24%;
    left: 0;
    right: 0;
    z-index: 5;
}
#p1name, #p1bank {
    background-color: yellowgreen;
}
#p2name, #p2bank {
    background-color: yellowgreen;
}
#questionarea {
    font-size: 6vh;
    width: 60%;
    height: 20%;
    background-color: yellow;
    left: 20%;
    top: 13%;
    z-index: 10;
    border-radius: 5px;
}
#answerarea {
    width: 60%;
    height: 70%;
    /*background-color: grey;*/
    left: 20%;
    top: 25%;
}
.answerslot {
    width: 90%;
    height: 10%;
    left: 0%;
    right: 0;
    margin: auto;
    border: 1px solid white;
    color: white;
    background-color: black;
    font-size: 5vh;
    border-radius: 10px;
}
#answerslot1 {
    top: 20%;
}
#answerslot2 {
    top: 40%;
}
#answerslot3 {
    top: 60%;
}
#answerslot4 {
    top: 80%;
}
#p1area {
    width: 20%;
    height: 100%;
    left: 0%;
    top: 0%
}
#p2area {
    width: 20%;
    height: 100%;
    right: 0%;
    top: 0%;
}
.answerselectarea {
    width: 50%;
    height: 60%;
    /*background-color: pink;*/
    top: 34%;
    border-bottom: seashell groove 2px;
    border-top: seashell groove 2px;
}
#p1answerselectarea {
    right: 0%;
    border-right: seashell groove 2px;
}
#p2answerselectarea {
    border-left: seashell groove 2px;
}
.p1answeroption, .p2answeroption {
    width: 78%;
    height: 19%;
    left: 0%;
    right: 0;
    margin: auto;
    border: 1px black solid;
    border-radius: 50%;
    box-shadow: inset 0 0 0 50px rgba(255, 50, 50, 0.0);
    background-color: wheat;
    background-size: contain;
    background-clip: padding-box;
    background-repeat: no-repeat;
    background-position: center;
    border: beige outset 2px;
}
#p1answer1, #p2answer1 {
    top: 4%;
    background-image: url("sel1.png");
}
#p1answer2, #p2answer2 {
    top: 28%;
    background-image: url("sel2.png");
}
#p1answer3, #p2answer3 {
    top: 52%;
    background-image: url("sel3.png");
}
#p1answer4, #p2answer4 {
    top: 76%;
    background-image: url("sel4.png");
}
.betarea {
    width: 50%;
    height: 60%;
    /*background-color: lightgreen;*/
    top: 34%;
    border-bottom: seashell groove 2px;
    border-top: seashell groove 2px;
}
#p2betarea {
    right: 0%;
}
.p1betoption, .p2betoption {
    width: 84%;
    height: 12%;
    left: 5%;
    box-shadow: inset 0 0 0 50px rgba(255, 50, 50, 0.0);
    background-size: contain;
    border-radius: 5px;
    background-clip: padding-box;
    background-repeat: no-repeat;
    background-position: center;
    border: beige outset 2px;
}
#p1bet1, #p2bet1 {
    top: 7.5%;
    background-image: url("note50.png");
}
#p1bet2, #p2bet2 {
    top: 31.5%;
    background-image: url("note100.png");
}
#p1bet3, #p2bet3 {
    top: 54.5%;
    background-image: url("note200.png");
}
#p1bet4, #p2bet4 {
    top: 78.5%;
    background-image: url("note500.png");
}

#menu {
    width: 94vw;
    height: 94vh;
    left:3vw;
    top:3vh;
    border-radius: 20px;
    border: scrollbar outset 2px;
    background-color: blueviolet;
    background-clip: padding-box;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url("menu.png");
    z-index: 20;
}
#menutitle {
    width: 90%;
    height: 15%;
    left:5%;
    top:5%;
    background-clip: padding-box;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("trivialbets.png");
}
#name1, #name2 {
    position: absolute;
    width: 25%;
    height: 8%;
    top:30%;
    font-size: 5vh;
    text-align: center;
    border-radius: 5px;
    background-color: scrollbar;
}
#name1 {
    left:20%;
}
#name2 {
    right:20%;
}
#gamelength {
    position: absolute;
    width: 5%;
    height: 5%;
    top: 50%;
    left: 47.5%;
    font-size: 4vh;
    border-radius: 5px;
    background-color: scrollbar;
}
#roundslbl {
    top: 50%;
    left: 32.5%;
    font-size: 4vh;
    font-weight: bolder;
}
#playbutton, #resumebutton, #donebutton {
    position: absolute;
    width: 20%;
    height: 15%;
    top: 70%;
    font-size: 6vh;
    border-radius: 5px;
    background-color: scrollbar;
    background-size: cover;
    border-radius: 15px;
    background-clip: padding-box;
    background-repeat: no-repeat;
    background-position: center;
    border: beige outset 2px;
}
#playbutton {
    left: 25%;
    background-image: url("newgame.png");
}
#resumebutton {
    right: 25%;
    background-image: url("resumegame.png");
}
#winscreen {
    width: 98vw;
    height: 98vh;
    left:1vw;
    top:1vh;
    border-radius: 20px;
    border: scrollbar outset 2px;
    background-clip: padding-box;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url("gameover.png");
    z-index: 20;
    display: none;
}
#gameover {
    width: 60%;
    height: 25%;
    top:0;
    left:20%;
    background-clip: padding-box;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("gameovertext.png");
}
#winnername, #losername {
    width: 30%;
    height: 10%;
    top:20%;
    font-size: 8vh;
    /*background-color: blue;*/
}
#winnername {
    left:5%;
}
#losername {
    right:5%;
}
#winwords {
    width: 20%;
    height: 15%;
    top:25%;
    left:40%;
    font-size: 6vh;
    font-family: arial black;
    /*background-color: blue;*/
}
#winnerstats, #loserstats {
    top: 35%;
    width: 30%;
    height: 40%;
    font-size: 6vh;
    /*background-color: blue;*/
}
#winnerstats {
    left:5%;
}
#loserstats {
    right:5%;
}
#donebutton {
    right: 40%;
    background-image: url("done.png");
}