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

html, body {
  min-height: 100vh;
  background: #555555;
  background: linear-gradient(135deg, #555555 0%, #646464 100%);
}

.container {
  min-height: 100vh;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item {
  margin: 15px;
  text-align: center;
}

img {
  margin: 15px;
  max-width: 120px;
}

h1, h2 {
  text-shadow: 1px 1px #000000;
}

h1, h2, p {
  text-align: center;
  max-width: 280px;
  margin: 15px;
  font-family: 'Roboto', sans-serif;
}

h1 {
  color: #FFFFFF;
}

h2 {
  color: #FFFFFF;
}

p {
  color: #FFFFFF;
}

.social {
  padding: 0;
  margin: 15px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  list-style: none;
}

.social li {
  margin: 15px;
}

.social li a {
  display: block;
  color: #FFFFFF;
  font-size: 30px;
}

.social li a:hover {
  text-shadow: 1px 1px #000000;
}

#title{
	margin-left: 15%;
	padding: 15px;
	border-radius: 10px;
}

input[type=text] {
	width: 30%;
	-webkit-transition: width 0.15s ease-in-out;
	transition: width 0.15s ease-in-out;
}

/* When the input field gets focus,
change its width to 100% */
input[type=text]:focus {
	width: 40%;
}

/* unvisited link */
a:link {
	color: #ffffffff;
}

/* visited link */
a:visited {
	color: #ffffffff;
}

/* mouse over link */
a:hover {
	color: #ffffffff;
}

/* selected link */
a:active {
	color: #ffff00ff;
}

ul li {
	color: #ffffffff;
	margin: 5px;
}