@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


.container {
	max-width: 100%;
}
.container-main,
body {
	display: flex;
	justify-content: center;
    height: 100vh;
    width: 100%;
	background-color: #ededed;
	font-family: 'Montserrat', sans-serif;
	background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}
#logo:nth-child(1) {
	background-color: 
}

#logo path:nth-child(1) {
	stroke-dasharray: 706;
	stroke-dashoffset: 706;
	animation:  fillRed 0.5s ease forwards 2.5s, line-animation 2s ease forwards;
	
}

#logo path:nth-child(2) {
	stroke-dasharray: 607;
	stroke-dashoffset: 607;
	animation: fillYellow 0.5s ease forwards 2.5s, line-animation 2s ease forwards;
}	
#logo path:nth-child(3) {
	stroke-dasharray: 345.54;
	stroke-dashoffset: 345.54;
	animation:  fillGreen 0.5s ease forwards 2.5s,line-animation 2s ease forwards;
}
#logo path:nth-child(4) {
	stroke-dasharray: 558;
	stroke-dashoffset: 558;
	animation: fillOrange 0.5s ease forwards 2.5s,line-animation 2s ease forwards;
}
#logo path:nth-child(5) {
	stroke-dasharray: 350.71;
	stroke-dashoffset: 350.71;
	animation: fillPurple 0.5s ease forwards 2.5s,line-animation 2s ease forwards;
}
#logo path:nth-child(6) {
	stroke-dasharray: 1085;
	stroke-dashoffset: 1085;
	animation: fillTurq 0.5s ease forwards 2.5s,line-animation 2s ease forwards;
}
#logo path:nth-child(7) {
	stroke-dasharray: 659.5;
	stroke-dashoffset: 659.5;
	animation: fillOlive 0.5s ease forwards 2.5s, line-animation 2s ease forwards;
}
#logo path:nth-child(8) {
	stroke-dasharray: 444.04;
	stroke-dashoffset: 444.04;
	animation: fillDeepPink 0.5s ease forwards 2.5s, line-animation 2s ease forwards;
}
#logo path:nth-child(9) {
	stroke-dasharray: 554;
	stroke-dashoffset: 554;
	animation: fillBlue 0.5s ease forwards 2.5s,line-animation 2s ease forwards;
}
#logo path:nth-child(10) {
	stroke-dasharray: 681;
	stroke-dashoffset: 681;
	animation: fillPink 0.5s ease forwards 2.5s,line-animation 2s ease forwards;
}

@keyframes line-animation {
	to{
		stroke-dashoffset: 0;
	}
}
@keyframes fillRed {
	from {
		fill: transparent;
	}
	to {
		fill: red;
	}
}
@keyframes fillYellow {
	from {
		fill: transparent;
	}
	to {
		fill: Yellow;
	}
}
@keyframes fillGreen {
	from {
		fill: transparent;
	}
	to {
		fill: green;
	}
}
@keyframes fillOrange {
	from {
		fill: transparent;
	}
	to {
		fill: orange;
	}
}
@keyframes fillPurple {
	from {
		fill: transparent;
	}
	to {
		fill: purple;
	}
}
@keyframes fillTurq {
	from {
		fill: transparent;
	}
	to {
		fill: turquoise;
	}
}
@keyframes fillBlue {
	from {
		fill: transparent;
	}
	to {
		fill: blue;
	}
}
@keyframes fillOlive {
	from {
		fill: transparent;
	}
	to {
		fill: olive;
	}
}
@keyframes fillDeepPink {
	from {
		fill: transparent;
	}
	to {
		fill: deeppink;
	}
}
@keyframes fillPink {
	from {
		fill: transparent;
	}
	to {
		fill: pink;
	}
}


.startDiv {
	display: inline-block;
	margin: auto;
	transition: 0.3s all ease-in-out
	
}
.starterTitle {
	font-size: 10rem;
	text-align: center;
	margin-bottom: 10px;
	
}
.word {
	border-bottom: 5px solid black;
}
button {
	font-size: 1.6rem;
	padding: 5px 20px;
}
.starterbuttons {
	text-align: center;
	border: none;
	
	
}
.instruction-section {
	font-size: 3rem;
	text-align: center;
}
.instructions {
	margin-left: 40px;
	transition: 0.3s all ease;
	font-style: oblique;

}
 
#start {
	cursor: pointer;
	transition: 0.3s all ease;
	font-style: oblique;
}
#start:hover,
.instructions:hover {
	background-color: #C1E8E8 ;
	transition: 0.4s ease-in-out;

}
.title {
	text-align: center;
	margin: 20px 0;
    font-size: 1.5rem;

}

.central-color {
	height: 100px;
	width: 300px;
	text-align: center;
	transition: 0.3s ease-in-out;

}

.game-container {
	width: 100%;
    height: 100%;
    text-align: center;
	margin: 0 auto;
	border: 1px solid black;
	padding: 0 20px;
	transition: 0.3s ease-in-out;
	background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}

.main-container {
    top: 50px;
    width: 100%;;
	

}

.main-box {
	display: flex;
    justify-content: center;
    width: 100%;
}

.left {
    display: flex;
}
.right {
    display: flex;
}
.keyboard {
	padding-top: 70px;
	display: flex;
	width: 100%;
	justify-content: center;
    position: relative;
    margin-top: 50px;
	transition: 0.4s ease-in-out;
	transition: 0.3s fade
}
.last1 {
	animation: moveX1 3.9s linear 0s infinite alternate, 
	moveY1 4s linear 0s infinite alternate;
}
.last2{
	animation: moveX2 3s linear 0s infinite alternate, 
	moveY2 4.4s linear 0s infinite alternate;
}
.last3{
	animation: moveX3 3.2s linear 0s infinite alternate, 
	moveY3 4s linear 0s infinite alternate;
}
.last4{
	animation: moveX4 3.3s linear 0s infinite alternate, 
	moveY4 3s linear 0s infinite alternate;
}

.key {
	height: 190px;
	width: 190px;
	margin-bottom: 10px;
	transition: 0.3s ease-in-out;
	cursor: pointer;
	overflow: hidden;
	/* animation: moveX 3.05s linear 0s infinite alternate, 
	moveY 3.4s linear 0s infinite alternate; */
}

.hover:hover {
	opacity: 0.7;
	animation: shake 0.5s;
	animation-iteration-count: infinite;
    
}

.askName {
	text-align: center;
	font-size: 2rem;
	margin-top: 100px;
}

#name {
font-size: 3rem;
text-align: center;
margin-top: 20px;
}
#score,
#timer {
	font-size: 3rem;
	margin-top: 10px;
	border: 1px solid black;
	padding: 10px;
}

.top {
	display: flex;
	justify-content: space-evenly;
	margin-top: 20px;

}

.disappear {
	display: none;
}

#endScreen {
	font-size: 10rem;
	text-align: center;
	margin-top: 100px;
}
#nameholder {
	font-size: 2rem;
}
.name-container {
	font-size: 2rem;
}

.plusscore {
    background-color: green;
	transition: 0.3s ease-in-out;
	color: lightgreen;

}

.minusscore {
    background-color: red;
	transition: 0.3s ease-in-out;
	color: lightpink;

}
#res
#reset:hover {
	background-color: #C1E8E8;
	transition: 0.5s ease-in-out;
}


@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
  }



.pulse {
	animation: pulse 0.2s 1 ease-out;
}


  
  @keyframes moveX1 {
	from { left: -30px; } to { left: 1100px; }
  }
  @keyframes moveY1 {
	from { top: -10px; } to { top: 280px; }
  }

  @keyframes moveX2 {
	from { left: -10px; } to { left: 1200px; }
  }
  @keyframes moveY2 {
	from { top: -5px; } to { top: 243px; }
  }
  @keyframes moveX3 {
	from { left: -25px; } to { left: 1320px; }
  }
  @keyframes moveY3 {
	from { top: -15px; } to { top: 200px; }
  }
  @keyframes moveX4 {
	from { left: -10px; } to { left: 1000px; }
  }
  @keyframes moveY4 {
	from { top: -5px; } to { top: 290px; }
  }