
body{
  background-color:#307D5B
}
.container {
  display: inline-grid;
  grid-template-columns: repeat(15, 40px);
  grid-template-rows: repeat(15, 40px);
  background-color: #172049;
  padding: 10px;
}
.container .letter{
  background-color: #a2c3ca;
  border: 3px solid #172049;
  border-right: 0;
  border-bottom: 0;
  padding: 0;
  font-size: 15px;
  text-align: center;
  color: #172049;
}
.container .wordendacross{
  background-color: #a2c3ca;
  border: 3px solid #172049;
  border-bottom: 0;
  border-right: 4px;
  padding: 0;
  font-size: 15px;
  text-align: center;
  color: #172049;
}

.container .wordenddown{
  background-color: rgba(162, 195, 202, 0.0);
  border: 3px solid #172049;
  border-right: 0;
  border-bottom: 4px;
  padding: 0;
  font-size: 15px;
  text-align: center;
  color: #172049;
}

.container .empty{
  background-color: #172049;
  border: 3px solid #172049;
  padding: 0;
  font-size: 15px;
  text-align: center;
  color: #172049;
}

input {
  width: 35px;
  border: 0px;
  margin: 0;
  background-color: #a2c3ca;
  height: 35px;
  font-size: 28px;
  text-align: center;
}
input[type=text]:focus {
  background-color: #a2c3ca;
  outline: none;
}
span {
    position: relative;
    font-weight: bolder;
    color: #172049;
    bottom: 40px;
    font-size: 8px;
    left: -13px;
    z-index: 10;
    font-family: helvetica;
}
.textbutton2{ 
  font-family: helvetica;
  font-size: 15px;
  font-weight: bolder;
  color: #172D49;
  background-color: #A2C3CA;
  border: 10px solid #A2C3CA;
  border-left-width:40px;
  border-right-width:40px;
  border-bottom-left-radius: 70px 40px;
  border-bottom-right-radius: 70px 40px;
  border-top-left-radius: 70px 40px;
  border-top-right-radius: 70px 40px;
  position: fixed;
  top:10px;
  left:600px;
  z-index: 11;
}
a{
  color:#307D5B
}
.disclaimer{
  color: #A2C3CA;
  position: fixed;
  left: 730px;
  text-align: right;
}
.otherbit{
  color: #A2C3CA;
  position: fixed;
  left: 770px;
  top: 23px;
  text-align: right;
}
.clues-across{
  position: fixed;
  left: 655px;
  top: 130px;
  z-index: 11;
  font-family: helvetica;
  background-color: #E4E5BB;
  color: #172D49;
  border: 12px solid #E4E5BB;
  font-size: 18px;
}
.h4{
  font-weight: bolder;
  font-size: 30px;
}
.clues-down{
  position: fixed;
  left: 992px;
  top: 130px;
  z-index: 11;
  font-family: helvetica;
  background-color: #E4E5BB;
  color: #172D49;
  border: 12px solid #E4E5BB;
  font-size: 18px;
}  
.answers{ 
  font-family: helvetica;
  font-size: 16px;
  font-weight: bolder;
  color: #172D49;
  background-color: #E4E5BB;
  border: 14px solid #E4E5BB;
  border-left-width:60px;
  border-right-width:60px;
  border-bottom-left-radius: 140px 35px;
  border-bottom-right-radius: 140px 35px;
  border-top-left-radius: 140px 35px;
  border-top-right-radius: 140px 35px;
  position: fixed;
  top:50px;
  left:670px;
  text-align: center;
} 
.main {
  font-family: helvetica, "times new roman";
  font-size:45px;
  font-weight: bolder;
  color: #172D49;
  transform: scale(2 ,0.5) rotate(90deg);
  position: fixed;
  left:1184px;
  top:-5px;
  z-index:11;
}
.wiggle{
  transform: scale(3,0.8)rotate(90deg);
  position:fixed;
  left:850px;
  top:620px;
}  
.word{
  font-size: 15px;
  text-align: center;
  color: #172049;
}
  
  
  