::-webkit-scrollbar {
  width: 0px;
}

*{
  margin: 0px;
  padding: 0px;
  transition-duration: 0.5s;
}

body {
  background-color: #2c3347;
  color: #d1d1d1;
  box-sizing: border-box;
  height: 100vh;
  width: 100vw;
  overscroll-behavior: none;
 
}

/* outer divs */
.watch{
  display: flex;
  flex-direction:row;
  justify-content: space-around;
  height: 100vh;
  width: 100vw;
  align-items:center;
}


.stopwatch {
  display:flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 60vw;
  height: 80vh;
}
.progression{
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: space-around;
  width: 20vw;
  height:80vh;
}

/* header */
.gold {
  font-weight: 1000;
  color: #1b3fdf;
  font-size: 6vh;
  text-shadow: 0 0 0px #fff, 0 0 50px #cfcc0d;
}
/* watch */
.circle {
  background-color: #cfcc0d62;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30vw;
  width:  30vw;
  border: 1vh solid;
  border-radius: 50%;
  box-shadow:  0 0 0px #fff, 0 0 50px #ebb401;
  background: url(circle.jpg);
  background-size: cover;
}
#display{
  display: flex;
  flex-direction: row;
  justify-content: center;
}


.time {
  font-family: "Roboto Mono", monospace;
  font-weight: 300; 
  font-size: 5vw;
}

.controls {
  display: flex;
  justify-content: space-between;
  width:10vw;
}

button {
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
}
button img{
  width:3vw;
  padding:1vw;
  border-radius:50%;
}
button img:hover{
  transition-duration: 0.2s;
  width:3.5vw;
  padding:0.5vw;
  background-color:rgb(10, 1, 83);
}

#playButton {
  display: block;
}

#pauseButton {
  display: none;
}

/* side bar */

.trimg{
  height:8vh ;
  width: 8vh;
  margin-top: 3vh;
  margin-right: 3vw;
  background-color: #1c1f29;
  border-radius: 50%;
  opacity:.5; 
}

@media screen and (max-width: 600px) {
  .watch{
    display: flex;
    flex-direction:column;
  }
  .stopwatch {
    grid-row-gap:1%;
    width: 100vw;
    padding-top: 1%;
    height: 60vh;
  }
  .circle {
    height: 70vw;
    width:  70vw;
  }
  .progression{
    display: flex;
    flex-direction:row;
    width: 100vw;
    height:20vh;
    overflow: scroll;
  }
  button img{
  width:3vh;
  }
  .trimg{
   height:5vh;
   width: 5vh;
  }
}