:root {
  --border-color: #e3e5e5;
  --background-color: #c3c7ca;
  --text-color: #34444f;
}

body {
  background-image: url('../images/hk1.JPG');
  background-size: 100%;	
  min-height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  /* font-family: "Times New Roman", Times, serif;	 */
  min-width: 350px;
}

body a{
	text-decoration: none;
}

#title{
	text-shadow: 0px 3px 3px blue, 0px 3px 3px white;
}


.mainnav .active{
	color: red!important;
}

.dropdown-menu a.active{
	color: white!important;
	background: red;
}

.navbar-nav a.language{
	background: red!important;
}

.mainnav .active::after{
	content: '';
	background-color: red;
	height:2px;
	display: block;
	margin-top: 5px;
}

.draggable-list {
  border: 1px solid var(--border-color);
  color: var(--text-color);
  display: flex;
  flex-direction: row;
  padding: 0;
  list-style-type: none;
}

.draggable-list li {
  background-color: #fff;
  display: flex;
  flex: 1;
}

.draggable-list li:not(:last-of-type) {
  border: 1px solid var(--border-color);
}

.draggable-list li.right .character {
  color: blue;
  text-shadow: 0 0 1px blue;
}

.draggable-list li.wrong .character {
  color: red;
}

.draggable-list li.over .draggable {
  background-color: #eaeaea;
}

.draggable-list .character {
  font-size: 30px;
  margin: 0;
}

.draggable {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  flex: 1;
}

/* #jumpBtn {
  font-size: 0px;
  min-width: 100px;
  min-height: 40px;
}

#jumpBtn:after {
  content:"Number";
  font-size: 16px;
}

#jumpBtn:hover:after {
  content:"Jump to";
}

#jumpBtn:hover {
  background-color: green;
} */


body > footer {
  margin-top: 50px;
  background: #083353;
  background-size: 100%;

  position: flex;
  bottom: 0;
  width: 100%;
  height: 600px;
}

.container {
	background-color: #69757d;
  width: 700px;
	background: linear-gradient(90deg, rgba(0,0,4,1) 0%, rgba(24,49,82,1) 15%, rgba(25,51,83,1) 50%, rgba(0,212,255,0) 100%);
	transition: all 0.3s ease;

}



@media (max-width: 685px)
{
  .nav-spacer{
		height: 80px;
	}

}


@media (max-width: 400px)
{
	.nav-spacer{
		height: 100px;
	}
}