@import './../../basicStyle.css';

.wrapper {
  margin-top: 30px;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.startMenu, .restartMenu {
  position: absolute;
  background-color: var(--light);
  opacity: 0.9;
  width: 840px;
  height: 560px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 200px;
  cursor: pointer;
  transition: font-size, opacity .5s ease;
}

.restartMenu {
  opacity: 1;
  font-size: 80px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.score {
  font-size: 50px;
}

.loser {
  font-size: 90px;
}

.hide {
  display: none;
}

.startMenu:hover {
  font-size: 250px;
  transition: all .5s ease;
  opacity: 0.3;
  background-image: url(img/thumb.png);
  background-repeat: no-repeat;
  background-size: cover;
}

#myCanvas {
  display: block;
  outline: 2px solid var(--light);
}