*{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	box-sizing:border-box;
	cursor:default;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
	-webkit-appearance: none;
	margin: 0;
}

input[type=number]{
  -moz-appearance: textfield;
}

html, body{
    min-height:100%;
	overflow:clip;
}

body{
	background:linear-gradient(-45deg, #25bb2f, #0197f6, #7A65CD);
	background-size:400% 400%;
	animation:gradient 34s ease infinite;
	height:100vh;
	font-family:'Helvetica', sans-serif;
	color:white;
}

@keyframes gradient{
	0%{
		background-position: 0% 50%;
	}
	50%{
		background-position: 100% 50%;
	}
	100%{
		background-position: 0% 50%;
	}
}

#startLottie{
	width:740px;
	height:auto;
	margin:0 auto;
	position:relative;
	top:-500px;
}

#startBtn{
	border:5px solid white;
	font-weight:bold;
	text-transform:uppercase;
	letter-spacing:5px;
	color:white;
	padding:10px 20px;
	font-family:'Helvetica', sans-serif;
	cursor:pointer;
	font-size:30px;
	margin:0 auto;
	display:block;
	position:relative;
	bottom:600px;
}

#questionNum{
	text-align:center;
	opacity:0;
	transition: 0.5s ease;
	font-size:60px;
}

.content{
	transition:opacity 0.6s ease;
}

.question, .answer{
	font-size:50px;
	opacity:0;
	transition:0.6s ease;
	position:absolute;
	top:160px;
	transform:translate(-50%, -50%);
	width:100%;
	text-align:center;
}

.question{
	left:0;
}

.answer{
	left:100%;
}

.underlined{
  position:relative;
  text-decoration:none;
}

.underlined::before{
  content:"";
  position:absolute;
  display:block;
  width:100%;
  height:4px;
  bottom:-4px;
  left:0;
  background-color:#fff;
  z-index:-1;
  transform:scaleX(0);
  transform-origin:top left;
  transition:transform 0.6s ease;
}

.underlined.active::before {
  transform:scaleX(1);
}

.interface, .answerInterface{
	opacity:0;
	transition:0.6s ease;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	font-size:30px;
}

.selected{
	background-color:black!important;
	fill:black!important;
}

.correctState{
	fill:#42a342!important;
	transition:fill 0.6s ease;
}

.incorrectState{
	fill:#CF4141!important;
	transition:fill 0.6s ease;
}

button, input{
	border:5px solid white;
	padding:20px 40px;
	color:white;
	font-size:30px;
	font-weight:bold;	
	font-family:'Helvetica', sans-serif;
}

button:hover, #spellAudio:hover{
	background-color:rgba(0,0,0,0.2);
}

button{
	cursor:pointer;
	transition:background-color 0.4s ease;
}

input{
	cursor:text;	
	display:block;
}

.nextBtn, .submitBtn{
	position:absolute;
	bottom:100px;
	left:50%;
	transform:translateX(-50%);	
	opacity:0;
	transition:opacity 0.6s ease, background-color 0.4s ease;
}

#spellAudio{
	height:80px;
	border:2px solid white;
	padding:10px;
	display:inline-block;
	cursor:pointer;
	border-radius:50px;
	position:relative;
	left:10px;
	top:24px;
	transition:background-color 0.4s ease;
}

#spellInput{
	text-transform:uppercase;
	letter-spacing:5px;
	text-align:center;
	width:400px;
}

#cupsInput{
	text-align:center;
	width:160px;
}

#bloodTypesContainer, #burjContainer, #leftInterface, #browserInterface{
	display:flex;
	flex-wrap:wrap;
	width:800px;
	height:400px;
	justify-content:space-around;
	align-items:center;
	align-content:center;
}

#bloodTypesContainer button{
	margin:30px;
	position:relative;
}

#genusInterface{
	width:1300px;
	height:550px;
	text-align:center;
	padding-top:15px;
}

#draggables{
	width:900px;
	margin:0 auto 30px auto;
}

.draggable{
	background-color:black;
	display:inline-block;
	border:2px solid white;
	padding:10px 20px;
	border-radius:50px;
	cursor:pointer;
	margin:10px;
	transition:background-color 0.6s ease;
}

.droppable{
	display:inline-block;
	border:2px solid white;
	margin:10px;
	width:300px;
	height:300px;
	padding:10px;
}

.incorrectlyPlaced{
	background-color:#cf4141;
}

.correctlyPlaced{
	background-color:#42a342;
}

#slider{
	width:900px;
}

#handle{
    width: 3em;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
	background-color:black;
	color:white;
	border:none;
	border-radius:50px;
}

#spellingLottie{
	text-align:center;
	width:1200px;
	height:600px;
}

.switch-field {
	display: flex;
}

.switch-field input {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
}

.switch-field label {
	background-color: #fff;
	color: black;
	font-size: 20px;
	line-height: 1;
	text-align: center;
	padding: 8px 16px;
	margin-right: -1px;
	border: 1px solid black;
	transition: all 0.1s ease-in-out;
	width:110px;
}

.switch-field label:hover {
	cursor: pointer;
	background-color: rgba(255,255,255,0.8);
}

.switch-field input:checked + label {
	background-color: rgba(255,255,255,0.6);
}

.switch-field label:first-of-type {
	border-radius: 10px 0 0 10px;
}

.switch-field label:last-of-type {
	border-radius: 0 10px 10px 0;
}

#viewsBox{
	width:440px;
	height:440px;
	margin-top:30px;
	display:flex;
	flex-wrap:wrap;
	outline:1px solid black;
}

.cupBox{
	flex-shrink:0;
	width:110px;
	height:110px;
	background-color:rgba(255,255,255,0.6);
	border:1px solid black;
	display:flex;
	justify-content:center;
	align-items:center;
	color:black;
}

.pintBox{
	flex-shrink:0;
	width:220px;
	height:110px;
	background-color:rgba(255,255,255,0.6);
	border:1px solid black;
	display:flex;
	justify-content:center;
	align-items:center;
	color:black;
}

.quartBox{
	flex-shrink:0;
	width:220px;
	height:220px;
	background-color:rgba(255,255,255,0.6);
	border:1px solid black;
	display:flex;
	justify-content:center;
	align-items:center;
	color:black;
}

.gallonBox{
	flex-shrink:0;
	width:440px;
	height:440px;
	background-color:rgba(255,255,255,0.6);
	border:1px solid black;
	display:flex;
	justify-content:center;
	align-items:center;
	color:black;
}

#everestLottie{
	width:800px;
	height:500px;
}

#leftInterface{
	width:870px;
	height:400px;
}

.guy{
	width:22px;
	margin:5px 10px;
}

.guy path{
	transition:fill 1s ease;
}

#potatoLottie{
	width:600px;
	height:600px;
}

#bloodTypeChart{
	display:block;
	margin:0 auto;
}

#bloodTypeChart text{
	font-family:Helvetica, sans-serif;
	fill:white;
	pointer-events:none;
	opacity:0;
	transition:opacity 0.5s ease;
}

.tooltip {
	position: absolute;
	display: none;
	min-width: 80px;
	max-width:200px;
	height: auto;
	background-color: #fff;
	border: 1px solid #6F257F;
	padding: 14px;
	text-align: center;
	pointer-events: none;
	color:#000;
	z-index:99;
	font-family:Helvetica, sans-serif;
}

#matchingContainer{
	display:flex;
	width:1000px;
	height:600px;
	justify-content:space-between;
}

#countries, #capitals{
	display:flex;
	flex-flow:column;
	justify-content:space-around;
}

.country, .capital{
	padding:10px;
	width:300px;
	position:relative;
}

.circle{
	border:2px solid white;
	background-color:black;
	width:50px;
	height:50px;
	border-radius:25px;
	position:absolute;
	bottom:2px;
	cursor:pointer;
	transition:background-color 0.4s ease;
}

.country .circle{
	right:-25px;
}

.capital .circle{
	left:-25px;
}

#countries p{
	display:inline-block;
	margin-right:20px;
}

select{
	background-color:white;
	padding:5px 10px;
	border-radius:5px;
	transition:background-color 1s ease;
}

#legend{
	position:absolute;
	top:50%;
	left:75%;
	transform:translate(-50%,-50%);
	display:flex;
	width:250px;
	flex-wrap:wrap;
	height:100px;
	opacity:0;
	transition:0.6s ease;
}

#whiteBox{
	width:50px;
	height:20px;
	background-color:white;
	flex-shrink:0;
	margin-right:20px;
}

#blackBox{
	width:50px;
	height:20px;
	background-color:black;
	flex-shrink:0;
	margin-right:20px;
}

#finishText{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	height:100px;
	opacity:0;
	transition:1s ease;
	font-size:50px;
	text-align:center;
}