project1.css

body {
  background-color: #000;
}

.big {
  display: flex;
}
.big > div {
  width: 40%;
}

.upper-col {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.upper-col button {
  display: flex;
  flex-direction:row;
  align-items: center;
  justify-content: center;
  background-color:white;
  border: none;
  color:black;
  padding: 6px 10px;
  border-radius: 7px;
  cursor: pointer;
  margin: 5px;
}

.problem {
  display: grid;
  grid-template-columns: 30px 30px 30px;
  grid-gap: 2px 10px;
  justify-content: center;
  margin: auto;
}
.question {
  height: 30px;
  width: 30px;
  margin: 3px;
  border: solid white;
  /* background-color: blue; */
  border-radius: 10px;
}
.workspace {
  display: none;
  grid-template-columns: 55px 55px 55px 55px 55px;
  grid-gap: 10px 15px;
  justify-content: center;
  width: 410px;
  border-radius: 10px;
  background-color: bisque;
  margin: 10px auto;
  padding: 25px 0;
}
.work {
  height: 60px;
  width: 60px;
  margin: auto;
  /* background-color:red; */
  border-radius: 1px;
  /* border: solid white; */
  border-radius: 10px;
}
#moves{
  /* copied from inspect element */
  font-size: 1.3em;
  margin-block-start: 0.3em;
  margin-block-end: 0.3em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold
}

#Timer{
    /* copied from inspect element */
  font-size: 1.3em;
  margin-block-start: 0.3em;
  margin-block-end: 0.3em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold
}
#hiscore{
    /* copied from inspect element */
    font-size: 1.3em;
    margin-block-start: 0.3em;
    margin-block-end: 0.3em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold
}
#besttime{/* copied from inspect element */
  font-size: 1.3em;
  margin-block-start: 0.3em;
  margin-block-end: 0.3em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold

}

@media only screen and (max-width: 600px) {
  .big {
    flex-direction: column;
}
}