.fulltop{
  display: grid;
  color: White;
  grid-template-columns: auto 200px 85px auto;
  font-size: 20px;
  grid-template-rows: 30px;
  font-family: sans-serif;
  background-color: #FFFFFF;
}
.bodyz{
  z-index: -5;
  margin:auto;
  position: relative;
  width: 100%;
  height: 75px;
  text-align: left;
  color: white;
  font-size: 15px;
  font-family: 'Merriweather', serif;
}
h4{
  font-size:15px;
  font-family: 'Work Sans', sans-serif;
  color: black;
  margin: 0px;
}
h3{
  font-size:15px;
  font-family: 'Work Sans', sans-serif;
  color: grey;
  margin: 0px;
}

.Instructions{
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;

}

h1{
  text-align: left;
  font-size: 25px;
  font-family: 'Work Sans', sans-serif;
  color: #505050;
  padding-top: 20px;
  margin-left: 5%;
  margin-right: 5%;
}
.blur{
  z-index: 1;
  position: absolute;
  margin-left: 5%;
  margin-right: 20%;
  border-color: black;
  border: 1px solid grey;
  border-width: 1px;
  border-radius: 5px;
  background-image: url("blur.png");
  width: 85%;
  height: 90%;
}

.body6{
  z-index: 1;
  font-size: 15px;
  font-family: 'Work Sans', sans-serif;
  text-align: left;
  margin-top: 5%;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 5%;
  width: 500px;
  border-color: black;
  border-width: 1px;
}
.form-control{
  width: 71%;
  background-color: #f5f5f5;
  border: none;
  outline: none;
  border-bottom: 1px solid grey;
  color: Black;
  font-size: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.startbutton {
  background:#0067ac;
  border-color: transparent;
  color: white;
  width: 30%;
  font-size: 16px;
  border-radius: 2px;
  text-align: center;
  letter-spacing: 2px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 10px;
}
.plus:hover{
  cursor: pointer;
}
.shrink:hover{
  cursor: pointer;
}
.start2:hover{
    background-color: Grey;
}
.minus{
  height: 600px;
  margin-left: 10%;
  margin-right: 10%;
  background-image: url("example instructions.png");
  background-size: contain;
  background-repeat:no-repeat;
}
.startbutton:hover
{
background: grey;
cursor: pointer;
}


.submitbutton{
  display: grid;
  color: White;
  padding-top: 25px;
  padding-bottom: 25px;
  grid-template-columns: auto 85px auto;
  grid-template-Rows: 30px;
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  font-size: 12px;
  font-family: sans-serif;
}

.timediv{
  text-align: center;
  vertical-align: middle;
  padding-top: 50px;
  border: grey;
  border-width: 2px;
  display: grid;
  font-family: sans-serif;
  grid-template-columns: auto 200px auto;
  font-size: 20px;
}

.loaddiv{
  text-align: center;
  vertical-align: middle;
  padding-top: 25px;
  display: grid;
  font-family: sans-serif;
  grid-template-columns: auto 200px auto;
  font-size: 12px;
}

.end1{
  display: grid;
  grid-template-columns: auto 40px auto;
  border-radius: 0%;
  font-size: 12px;
  font-family: sans-serif;
  background-color: #C5C5C5;
  grid-template-rows: 20px;
}

.PreviousNext{
background-color: #FFFFFF;
border-color: #FFFFFF;
}
.start1{
  text-align: center;
  color: White;
  border-radius: 3px;
  font-size: 12px;
  font-family: sans-serif;
  background-color: #0067ac;
}
.start3{
  text-align: center;
  color: White;
  border-radius: 3px;
  font-size: 12px;
  font-family: sans-serif;
  background-color: #0067ac;
}

.start2{
  text-align: center;
  color: White;
  border-radius: 3px;
  font-size: 12px;
  font-family: sans-serif;
  background-color: #eb4d68;
}


.menu{
  display: grid;
  color: White;
  padding-top: 20px;
  padding-bottom: 25px;
  text-align: center;
  font-size: 20px;
  font-family: sans-serif;
  grid-template-columns: auto 85px 98px 30px 30px 98px 85px auto;
  grid-template-rows: 30px;
  background-color: #FFFFFF;
}
.gridcenter1{
  display: grid;
  grid-template-columns: auto 598px auto;
  grid-template-rows: auto;
  border-color: #FFFFFF;
}
.gridcenter2{
  display: grid;
  grid-template-columns: auto 278px auto;
  grid-template-rows: auto;
  border-color: #FFFFFF;
}
.grid {
  display: grid;
  grid-template-columns: 4px 43px 2px 43px 2px 43px 2px 43px 2px 43px 2px 43px 4px;
  grid-template-rows: 4px 43px 2px 43px 2px 43px 2px 43px 2px 43px 2px 43px 4px;
  border-color: #FFFFFF;
}
.grid2 {
  -webkit-apperance: none;
  display: grid;
  grid-template-columns: 2px 20px 1px 20px 1px 20px 1px 20px 1px 20px 1px 20px 2px 20px 2px 20px 1px 20px 1px 20px 1px 20px 1px 20px 1px 20px 2px 20px 2px 20px 1px 20px 1px 20px 1px 20px 1px 20px 1px 20px 2px 20px 2px 20px 1px 20px 1px 20px 1px 20px 1px 20px 1px 20px 2px;
  grid-template-rows: 2px 20px 1px 20px 1px 20px 1px 20px 1px 20px 1px 20px 2px;
  border-color: #FFFFFF;
  padding: 10px;
}
Button {
  -webkit-apperance: none;
  background-color: white;
  border-color: White;
  border-collapse: collapse;
  border-radius: 50%;
  border-style: solid;
  border-width: .05px;

}
Button:hover {
  border-color: #F2F3F3;
  border-width: small;
}
button:active {
  outline: none;
  border: none;
}
button:focus {outline:0;}

.realgrey {
  background-color: #C5C5C5;
}

.grey {
  background-color: #C5C5C5;
}
.black {
    background-color: #000000;
}
.white{
  background-color: #FFFFFF;
}
.controlbutton {
  font-size: 100px;
}
.bord{
    background-color: #D1D1D1;
}
.puzzleselect{
    background-color: #FFFFFF;
    font-family: sans-serif;
}
.puzzleselect:hover{
  background-color: #FFFFFF;
}

h5{
  font-size:10vw;
  font-family: 'Work Sans', sans-serif;
  color: white;
  padding: 0px;
  margin: 0px;
}
h5{
  font-size:3vw;
  font-family: 'Work Sans', sans-serif;
  color: white;
  padding: 0px;
  margin: 0px;
}

a:visited{
  color:white;
}

.body7{
  padding-top: 30px;
  padding-bottom: 10px;
  color: White;
  font-size: 15px;
  font-family: 'Work Sans', sans-serif;
  text-align: center;
  border-radius: 10px;
  margin-left: 5%;
  margin-right: 5%;
  width: 90%;
  border-bottom-color: white;
  background-color: #0067ac;
}