body{
  margin: 0;
  padding: 0;
  background-color: #2E3440;
  background-size: cover;
}
.box{
  width: 50%;
  background-color: #3B4252;
  border-radius: 10px;
  padding: 10%;
  text-align: center;
  margin: auto;
  margin-top: 3%;
  color: white;
}
.box-img{
  border-radius: 50%;
  width: 25%;
  height: 25%;
  margin-top: -10em;
}
.box h1{
  font-size: 3.4em;
  font-weight: bold;
  color: #81A1C1
}
.box h5{
  font-size: 1.6em;
  font-weight: bold;
  font-family: "Mononoki", monospace;
  color: #88C0D0
}
.box h6{
  font-size: 1.6em;
  font-weight: bold;
  font-family: "Mononoki", monospace;
  color: #88C0D0
}
.box p{
  font-size: 1.4em;
  font-weight: 100;
  font-family: "Mononoki", monospace;
}
ul{
  margin: -50px;
  padding: 0;
  margin-bottom: -10em;
}
.box li{
  display: inline-block;
  margin: 1em;
  list-style: none;
}
.box li a{
  color: #8FBCBB;
  text-decoration: none;
  transition: all ease-in-out 250ms;
}
.box li a:hover{
  color: #D8DEE9;
}

.box li a .fa{
  font-size: 4em;
}

.box li a .fa-file{
  font-size: 3.5em;
}

/* For mobile phones: */
@media only screen and (max-width: 768px) {
	.box{
	  width: 70%;
	}
	.box-img{
	  width: 50%;
	  height: 50%;
  	  margin-top: 0;
	}
	.box h1{ font-size: 2.75em; }
	.box h5{ font-size: 1.75em; }
	.box h6{ font-size: 1.75em; }
	.box p{ font-size: 1.2em; }
	.box li a{ font-size: 4em; }
	.box ul{ margin-bottom: 0; }
}