/*Written by LinkGoesBowling with assistance from StackOverflow
/*
Source - https://stackoverflow.com/a/79972465
Posted by omidhldn, modified by community. See post 'Timeline' for change history
Retrieved 2026-07-02, License - CC BY-SA 4.0
*/

.page {
  text-align: center;
  background: #4d4d4d;
  margin-left: 50px;
  margin-right: 50px;
  margin-top: -21px;
  margin-bottom: 21px;
}
.title{
  color: lightgreen;
  font-family: sans-serif;
}
.subtitle{
  color: lightgreen;
  font-family: sans-serif;
}
button {
  width: 100px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid white;
  background-color: #4d4d4d;
  color: white;
}
html{
  background-color: #4d4d4d
}
background{
  color: #4d4d4d
}
body {
  margin: auto;
}
.buttons {
  text-align: center;
}
.parent{
  text-align: center;
  position: relative;
  width: 850px;
  height: 100px;
  overflow: hidden;
}
.parent .shots{
  position: absolute;
  width: calc(1.6vw + 10px);
  height: calc(1.6vw + 10px);
}
.restart-game {
  text-align: center;
  width: 300px;
  height: 100px;
}
.score {
  text-align: center;
  position: absolute;
  top: 70%;
  right: 23%;
}
.shot1{
  text-align: center;
  position: absolute;
  top: 58%;
  left: 21%
}
.shot2 {
  text-align: center;
  position: absolute;
  top: 58%;
  left: 23%;
}
.shot3{
  text-align: center;
  position: absolute;
  top: 58%;
  left: 25%;
}
.shot4{
  text-align: center;
  position: absolute;
  top: 58%;
  left: 27.5%;
}
.shot5{
  text-align: center;
  position: absolute;
  top: 58%;
  left: 30%;
}
.shot6{
  text-align: center;
  position: absolute;
  top: 58%;
  left: 32.5%;
}
.shot7{
  text-align: center;
  position: absolute;
  top: 58%;
  left: 35.5%;
}
.shot8{
  text-align: center;
  position: absolute;
  top: 58%;
  left: 37.5%;
}
.shot9{
  text-align: center;
  position: absolute;
  top: 58%;
  left: 40.5%;
}
.shot10{
  text-align: center;
  position: absolute;
  top: 58%;
  left: 42.5%;
}
.shot11{
  text-align: center;
  position: absolute;
  top: 58%;
  left: 45.5%;
}
.shot12{
  text-align: center;
  position: absolute;
  top: 58%;
  left: 48%;
}
.shot13{
  text-align: center;
  position: absolute;
  top: 58%;
  left: 50.5%;
}
.shot14{
  text-align: center;
  position: absolute;
  top: 58%;
  left: 53%;
}
.shot15{
  text-align: center;
  position: absolute;
  top: 58%;
  left: 55.5%;
}
.shot16{
  text-align: center;
  position: absolute;
  top: 58%;
  left: 57%;
}
.shot17{
  text-align: center;
  position: absolute;
  top: 58%;
  left: 60%;
}
.shot18{
  text-align: center;
  position: absolute;
  top: 58%;
  left: 62%;
}
.shot20{
  text-align: center;
  position: absolute;
  top: 58%;
  left: 65%;
}
.shot21{
  text-align: center;
  position: absolute;
  top: 58%;
  left: 67%;
}
.shot22{
  text-align: center;
  position: absolute;
  top: 58%;
  left: 69%;
}
.frameboxes{
  text-align: center;
  position: absolute;
  bottom: 29px;
  left: 21px;
  height: 20px;
  width: 17px;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
}
.shots{
  text-align: center;
  position: absolute;
  top: 1px;
  left: 7px;
  height: 20px;
  width: 17px;
}
.frame1{
  text-align: center;
  position: relative;
  background-color: white;
  height: 50px;
  width: 40px;
  border: 2px solid black;
}
.frame2{
  text-align: center;
  position: relative;
  background-color: white;
  height: 50px;
  width: 40px;
  border: 2px solid black;
}
.frame3{
  text-align: center;
  position: relative;
  background-color: white;
  height: 50px;
  width: 40px;
  border: 2px solid black;
}
.frame4{
  text-align: center;
  position: relative;
  background-color: white;
  height: 50px;
  width: 40px;
  border: 2px solid black;
}
.frame5{
  text-align: center;
  position: relative;
  background-color: white;
  height: 50px;
  width: 40px;
  border: 2px solid black;
}
.frame6{
  text-align: center;
  position: relative;
  background-color: white;
  height: 50px;
  width: 40px;
  border: 2px solid black;
}
.frame7{
  text-align: center;
  position: relative;
  background-color: white;
  height: 50px;
  width: 40px;
  border: 2px solid black;
}
.frame8{
  text-align: center;
  position: relative;
  background-color: white;
  height: 50px;
  width: 40px;
  border: 2px solid black;
}
.frame9{
  text-align: center;
  position: relative;
  background-color: white;
  height: 50px;
  width: 40px;
  border: 2px solid black;
}
.frame10{
  text-align: center;
  position: relative;
  background-color: white;
  height: 50px;
  width: 70px;
  border: 2px solid black;
}
.frame10box1{
  text-align: center;
  position: absolute;
  height: 20px;
  width: 17px;
  bottom: 29px;
  left: 32px;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
}
.frame10box2{
  text-align: center;
  position: absolute;
  height: 20px;
  width: 17px;
  bottom: 29px;
  left: 51px;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
}
.sidenav{
  height: stretch;
  width: 0px;
  top: 0;
  left: 0;
  background-color: gray;
}
.scoresheet {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: flex-end;
  position: relative;
}
.framescores{
  text-align: center;
  position: absolute;
  bottom: 2px;
  left: 15px;
}