:root {
    --textcolor: #fff;
    --bgcolor0: #021c1e;
    --bgcolor1: #004445;
    --bgcolor2: #2c7873;
    --bgcolor3: #6fb98f;
}
    
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

body {
  font-family: sans-serif;
  background-color: #FFFFE0
}

header {
    display: flex;
    justify-content:space-between;
}

main {
    display: flex;
    justify-content:space-between;
}

h1 {
  text-align: center;
  margin-top: 40px auto;
  letter-spacing: 0.25em;
  color: #001b44;
}

footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  padding: 10px;
  text-align: center;
  background:var(--bgcolor1);
  color:white;
  margin-top: auto;
  left: 0;
}

.container {
  width: 80vw;
  margin: 25px auto;
}
.box {
  display: block;
  float: left;
  width: 50%;
  height: 200px;
  margin: 1%;
  cursor: pointer;
  object-fit: cover;
  border-radius: 8px;
  background-color: #093145;
  text-align: center;
  line-height: 200px;
  font-size: 20px;
  color: whitesmoke;
}

.highscore {
  display: block;
  float: right;
  width: 200px;
  height: 50px;
  cursor: pointer;
  object-fit: cover;
  border-radius: 8px;
  background-color: var(--bgcolor2);
  text-align: center;
  line-height: 50px;
  font-size: 25px;
  color: whitesmoke;
}

.start {
    display: block;
    margin: 0 auto;
    float: center; 
    width: 200px;
    height: 50px;
    cursor: pointer;
    object-fit: cover;
    border-radius: 8px;
    background-color: #093145;
    text-align: center;
    line-height: 50px;
    font-size: 25px;
    color: whitesmoke;
  }

  
.timer {
    display: block;
    float: right;
    width: 200px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    text-align: center;
    line-height: 50px;
    font-size: 25px;
    color: black;
  }

.start:hover {
  color: salmon;
}

.highscore:hover {
    color: salmon;
  }

.card {
    background-color: hsl(0, 0%, 100%);
    border-width: 1px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px 0px;
    color: hsl(206, 17%, 28%);
    font-size: 18px;
    margin: 0 auto;
    max-width: 300px;
    padding: 30px 40px;
    position:absolute;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-direction:column;
    flex-direction:column;
    width:300;
    word-wrap:break-word;
    background-clip:border-box;
    border:1px solid rgba(0,0,0,.125);
    border-radius:.25rem;
    margin-bottom:.75rem;
}

.card-header {
    padding:.75rem 1.25rem;
    margin-bottom:0;
    background-color:rgba(0,0,0,.03);
    border-bottom:1px solid rgba(0,0,0,.125)
}

.card-body {
    -ms-flex:1 1 auto;
    flex:1 1 auto;
    min-height:1px;
    padding:1.25rem
}
.card-title {
    margin-bottom:.75rem
}

.choice {
  width:300px;
  border-radius: 8px;
  /* text-align:center; */
  /* align-items: center; */
}

.choice:hover {
    background: var(--bgcolor0);
    color: salmon;
    cursor: pointer;
}

#scores {
    display: block;
    float: right;
    width: 200px;
    height: 0px;
    cursor: pointer;
    object-fit: cover;
    border-radius: 8px;
    background-color: var(--bgcolor2);
    opacity:90%;
    text-align: left;
    line-height: 50px;
    font-size: 15px;
    color:black;
    z-index: 1;
    overflow:unset;
    padding: 0px 25px;
}

#mainscreen {
    display: block;
    float: center;
    margin: 10px;
    padding: 25px;
    height: 300px;
    max-width: 800px;
    object-fit: cover;
    border-radius: 8px;
    background-color: lightblue;
    text-align: center;
    /* font-size: 15px; */
    color:black;
}

#currentScoreTitle {
    position: fixed;
    right:0;
    text-align: right;
    display: none;
    float: right;
    width: 200px;
    height: 40px;
    object-fit: cover;
    border-radius: 8px;
    background-color: var(--bgcolor2);
    opacity:80%;
    text-align: center;
    font-size: 15px;
    color:black;
    padding: 10px 0;
    z-index: 1;
}

.currentscore {
    display: none;
    overflow:unset;
    float: right;
    width: 200px;
    object-fit: cover;
    border-radius: 8px;
    background-color: var(--bgcolor3);
    text-align: left;
    font-size: 15px;
    color:black;
    padding: 0px 25px;
    z-index: 1;
}

/* took this progress bar color scheme from w3, will modify if time */
.w3-light-grey
{color:#000!important;background-color:#f1f1f1!important}
.w3-round {border-radius:4px}
.w3-container{padding:0.01em 16px}
.w3-blue {color:#fff!important;background-color:#2196F3!important}

@media (max-width: 740px) {
  .box {
    width: 48%;
  }
}