/*body{
  background-color: black;
}

.header-background{
  background-image: linear-gradient(to bottom right, #1380BF 0%, #501C73 100%);
}*/

body {
  background-color: white;
  font-family: "Poiret One", cursive;
  font-weight: 300;
  height: 100%;
}

html{
  height:100%;
}

.header-background {
  font-family: "Modak", cursive;
	z-index: 0;
  font-weight: 400;
  font-family: "Modak",cursive;
  font-size: 180px;
	/*background: url("https://media.giphy.com/media/d2Z7wetTpiqlmjq8/giphy.gif") center center;*/
	background-size: cover;
	height: 100%;
	/*filter: blur(6.3px);*/
  /*overflow: hidden;*/

}

.background-zzz {
  z-index: -1;
  position: absolute;
  /*top: -50%;*/
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 100px;
  opacity: 0.2;
  /*transform: rotate(-45deg);*/
  overflow: hidden;
}

.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  background-color: rgba(0,0,0,0.7);
}

header {
	width: 100%;
	position: absolute;
  height:100%;
	z-index: 2;
  background-image: linear-gradient(to top left, rgba(86,12,135,0.8) 0%, rgba(10,98,125,0.8) 100%);

}

#win-screen {
  position: absolute;
  height: 100%;
  width: 100%;
  display:none;
  background-color: rgba(0,0,0,0.7);
  z-index: 4;
  /*this is highest level z-index*/
  padding-top: 100px;
  box-sizing: border-box;
}

.win-screen-text {
  color: rgba(43, 113, 226, 1);
  text-align: center;
  font-family: "Modak",cursive;
  font-size: 50px;
  padding-top: 70px;
  animation-delay: 1s;
  /*text-shadow: 2px 1px white;*/
}

#lose-screen {
  position: absolute;
  height: 100%;
  width: 100%;
  display:none;
  background-color: rgba(0,0,0,0.9);
  z-index: 4;
  /*this is highest level z-index*/
  padding-top: 100px;
  box-sizing: border-box;
}

.lose-screen-text {
  color: rgb(244, 215, 66);
  text-align: center;
  font-family: "Modak",cursive;
  font-size: 50px;
  padding-top: 70px;
  animation-delay: 1s;
  /*text-shadow: 2px 1px white;*/
}


#wait-screen {
  position: absolute;
  height: 100%;
  width: 100%;
  display:none;
  background-color: rgba(0,0,0,0.6);
  z-index: 3;
  /*this is second highest level z-index*/
  padding-top: 100px;
  box-sizing: border-box;
  animation-delay: .4s;
}

.wait-screen-text {
  color: rgba(43, 113, 226, 1);
  text-align: center;
  font-family: "Modak",cursive;
  font-size: 50px;
  padding-top: 25vh;
  animation-delay: .3s;
  /*text-shadow: 2px 1px white;*/
}


#no-input-screen {
  position: absolute;
  height: 100%;
  width: 100%;
  display:none;
  background-color: rgba(0,0,0,0.6);
  /*box-shadow: inset 26px 0px 20px 0px rgba(0,0,0,0.6);*/
  z-index: 3;
  /*this is second highest level z-index*/
  padding-top: 100px;
  box-sizing: border-box;
}

.no-input-screen-text {
  color: rgb(255, 113, 38);
  text-align: center;
  font-family: "Modak",cursive;
  font-size: 50px;
  padding-top: 25vh;
  /*animation-delay: 0.3s;*/
  /*text-shadow: 2px 1px white;*/
}

.title {
  color: white;
  font-size:60px;
  text-align: center;
  margin-top: 1.5em;
  margin-left: auto;
  margin-right: auto;
  padding-top: 80px;
  font-weight: 400;
  font-family: "Modak",cursive;

  background-image: linear-gradient(to top left, rgba(194,83,250,1) 0%, rgba(235,206,92,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.circle {
  text-align: center;
  width: 220px;
  height: 220px;
  vertical-align: middle;
	/*transition: all 0.35s ease;*/
  background-image: linear-gradient(to top left, rgba(82,171,209,0.1) 0%, rgba(31,235,146,0.6) 100%);
  border-radius: 50%;
  margin: 0 auto;
  transform: rotate(-20deg);
  box-shadow: 0px 2px 12px 2px rgba(0,0,0,0.4);
}

.start-button {
  font-size: 30px;
  height: 50px;
  width: 150px;
  color: white;
  margin: 0 auto;
  text-align: center;
  margin-top: 170px;
  padding-top:15px;
  border-radius: 40px;
  background-image: linear-gradient(to top left, rgba(82,171,209,0.8) 0%, rgba(31,235,146,0.6) 100%);
  box-shadow: 0px 2px 12px 2px rgba(0,0,0,0.6);
  transition: 0.2s;
  animation-delay: 1s;
}

a {
  text-decoration: none;
  color: white;
}

.start-button:hover{
  cursor: pointer;
  transform: scale(1.1);
  transition: 0.2s;
  box-shadow: 0px 6px 32px 2px rgba(0,0,0,0.4);

}

#word-list-container {
  padding-top: 5%;
  /*margin: 0 auto;*/
  text-align: center;
  width: 100%;
  overflow: hidden;
  padding: 0px 20px 0px 20px;
  box-sizing: border-box;
}

.word-list{
  text-align: center;
  font-size: 40px;
  color: rgba(183, 255, 215,1);
  line-height: 80px;
  width: inherit;
  margin: 0 auto;

}

.word-list:hover{
  cursor: pointer;
  filter: brightness(1.1);
  transform: scaleY(1.1);
  transition: 0.2s;

}


#game-board{
  display: none;
  transition: 1s;
  /*text-align: center;*/
  min-height: 100%;
  width:100%;
  animation-delay: 0.2s;
  height: 100%;
  padding: 20px 20px 40px 20px;
  box-sizing: border-box;
}

#letter-stack{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;


}

.letter-box{
  flex: 1;
  color: rgba(183, 255, 215,1);
  /*border: 1px solid white;*/
  align-items: center;
  justify-content: center;
  align-content: center;
  vertical-align: top;
}

.letter {
  font-size: 5vh;
  width: 60px;
  margin-left: 10px;
  display: inline-block;
  text-align: center;
  align-self: flex-start;
  border: 3px solid rgba(0,0,0,0.7);
  /*border-radius: 5px;*/
  /*box-shadow: 2px 2px 3px 1px rgba(0,0,0,0.4)*/
}

.letter-box form:focus{
  outline: none;
  /*border-bottom: 3px solid white;*/
  /*box-shadow: 1px 0px 3px 2px rgba(183, 255, 215, 0.7);*/
  /*border-radius: 8px;*/
}

.letter-box input:focus{
  outline: none;
  border-bottom: 3px solid white;
  /*box-shadow: 1px 0px 3px 2px rgba(183, 255, 215, 0.7);*/
  border-radius: 8px;
}


.letter-box form{
  display: inline-block;
  /*margin-left: 30px;
  width: 150px;
  height: 30px;
  vertical-align: bottom;
  background-color: rgba(0,0,0,0.0);
  border: none;
  border-bottom: 3px solid rgba(183, 255, 215,1);
  font-size: 20px;
  color: rgb(86, 201, 255);
  color: white;*/
}

.letter-box input{
  display: inline-block;
  margin-left: 20px;
  width: 150px;
  height: 30px;
  vertical-align: bottom;
  background-color: rgba(0,0,0,0.0);
  border: none;
  border-bottom: 3px solid rgba(183, 255, 215,1);
  font-size: 20px;
  color: rgb(86, 201, 255);
  color: white;
}

.submit-word{
  text-align: center;
  display: inline-block;
  font-size:20px;
  height: 28px;
  width: 28px;
  border-radius: 50%;
  margin-left: 10px;
  border: 1px solid rgba(183, 255, 215,1);
  /*background-image: linear-gradient(to top left, rgba(194,83,250,0.9) 0%, rgba(235,206,92,0.9) 100%);*/
  /*box-shadow: 0px 2px 3px 1px rgba(0,0,0,1);*/
  line-height: 30px;
  color: rgba(183, 255, 215,1);
  font-size: 25px;
  font-weight: bold;
}

.submit-word:hover{
  cursor: pointer;
}

#new-list-button {
  text-align: center;
  display: block;
  font-size: 20px;
  line-height: 35px;
  color: white;
  border: 1px solid rgba(183, 255, 215,1);
  height: 37px;
  width: 90px;
  border-radius: 10px;
  /*margin: 0 auto;*/
  position: absolute;
  bottom: 20px;
  transition: 1s;
}

#new-list-button:hover{
  cursor:pointer;
}






/*@media only screen and (max-width: 1166px){



}*/