.wrappper{
  @include clear;
  width:100%;
  margin:0 auto;
}


canvas{
  color:white;
  border: white dashed 2px;
  padding:15px;
}


#alphabet {
  margin:15px auto;
  padding:0;
  max-width:900px;
}

#alphabet li {
  float:left;
  margin: 0 10px 10px 0;
  list-style:none;
  width:35px;
  height:30px;
  padding-top:10px;
  background:white;
  color:#2c3e50;
  cursor:pointer;
  border: solid 1px white;
  
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  
}

    #alphabet li:hover{
      background:#7638a5;
      border: solid 1px white;
      color:white;
    }

#my-word {
  margin: 15px auto;
  display: block;
  padding: 0;
  display:block;
}

#my-word li {
  position: relative;
  list-style: none;
  margin: 15px auto;
  display: inline-block;
  padding: 0 10px;
  font-size:1.6em;
  color: white;
}

.alphactive {
  opacity:0.5;
  color:#7638a5;
  cursor:default;
    
}

#mylives{
  font-size:1.6em;
  text-align:center;
  display:block;
}



@media (max-width: 767px) {
  #alphabet {
  padding:0 0 0 15px;
}
  }

  @media (max-width: 480px) {
  #alphabet {
  padding:0 0 0 25px;
  }
  }
  
  
  
  /*------------------------------------------------------------------------------- You Win ---------------------------------------------------------------------------------------------*/
  
  
  /* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #2c3e50;
    margin: auto;
    padding: 20px;
    border: 5px solid #7638a5;
    width: 80%;
}


#title {
	font-size: 88px;
	text-align: center;

	z-index: 2;
}
.firstrow {
	font-family: Palatino Linotype;
	color: #ed8f47;
	text-shadow: 0 0 0.1em rgb(248, 48, 32);
}

.confetti {
	position: absolute;
	width: 2px;
	height: 10px;
	top: -11px;
	z-index: 1;
}
.i1 {
	background-color: rgb(232, 48, 24);
	animation: red 9s linear;
}
.i2 {
	background-color: rgb(24, 232, 48);
	animation: green 8s linear;
}
.i3 {
	background-color: rgb(24, 48, 232);
	animation: blue 7s linear;
}

@keyframes red {
	0% {
		top: -8px;
		transform: rotate(-360deg) rotateX(-270deg) rotateY(-180deg);
	}
	100% {
		top: 101%;
		transform: rotate(180deg) rotateX(270deg) rotateY(360deg);
	}
}
@keyframes green {
	0% {
		top: -8px;
		transform: rotate(-270deg) rotateX(-180deg) rotateY(0deg);
	}
	100% {
		top: 101%;
		transform: rotate(0deg) rotateX(180deg) rotateY(270deg);
	}
}
@keyframes blue {
	0% {
		top: -8px;
		transform: rotate(-180deg) rotateX(-90deg) rotateY(0deg);
	}
	100% {
		top: 101%;
		transform: rotate(0deg) rotateX(900deg) rotateY(180deg);
	}
}