body{
  font-family: 'Open Sans', sans-serif;
  background-color: #303239;
}

.wrapper {
  margin: auto;
  height: 100vh;
  border-top: 15px solid #5A5AE6;
  border-bottom: 15px solid #FF4444;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  -webkit-background-size: 15px 100%;
  -moz-background-size: 15px 100%;
  background-size: 15px 100%;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzYWNmZDUiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNhNGVkNSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2xlc3NoYXQtZ2VuZXJhdGVkKSIgLz48L3N2Zz4=);
  background-image: -webkit-linear-gradient(top, #5A5AE6 0%, #FF4444 100%), -webkit-linear-gradient(top, #5A5AE6 0%, #FF4444 100%);
  background-image: -moz-linear-gradient(top, #5A5AE6 0%, #FF4444 100%), -moz-linear-gradient(top, #5A5AE6 0%, #FF4444 100%);
  background-image: -o-linear-gradient(top, #5A5AE6 0%, #FF4444 100%), -o-linear-gradient(top, #5A5AE6 0%, #FF4444 100%);
  background-image: linear-gradient(to bottom, #5A5AE6 0%, #FF4444 100%), linear-gradient(to bottom, #5A5AE6 0%, #FF4444 100%);
}

.info{
  width: 80%;
  margin: 150px auto 0px auto;
  text-align: center;
  transform: rotate(-9deg);
  text-transform: uppercase;
  letter-spacing: 0.25vw;
  font-style: italic;
  color: #d5d8e3;
}

.info h1{
  font-size: 88px;
  font-weight: 700;
}

.info ul{
  list-style: none;
  animation-delay: 0.25s;
  -webkit-animation-delay: 0.25s;
}

.info ul li{
  display: inline;
  margin-left: 5px;
  font-size: 20px;
  font-weight: 600;
}

.info ul li a:hover{
  text-decoration: none;
  opacity: .75;
}

.title{
  opacity: .25;
}