body {
  width: 100%;
text-align: center;
  background-image: url('/images/transparency-grid-bg.png') ;

}


.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  width: 330px;
}


@font-face {
  font-family: "PolySans-Neutral";
  src: url("/fonts/PolySans-Neutral.ttf") format("truetype");
}

@font-face {
  font-family: "PolySans-Bulky";
  src: url("/fonts/PolySans-Bulky.ttf") format("truetype");
}

.wrapper {
  display: inline-block;
  margin: 0 auto;
  border-left: 6px solid #ff4d5e;

}

.menu {
  margin: 0 auto;
  width: 330px;
  padding: 40px 0px 0 40px;
  text-align: left;
font-family:PolySans-Neutral;
font-size: 2.3em;
line-height: 1.5em;
}


.header {
    margin: 0 auto;
  width: 330px;
  padding: 0 0 40px 0;
  text-align: left;
}

.shake {
  display: inline-block;
  padding-bottom: 25px;
}
.shake a:hover{ 
  animation: shake 100ms infinite;
  animation-timing-function: linear;   
}

@keyframes shake {
  0% { transform: rotate(1.2deg); }
  50% { transform: rotate(-1.2deg); }
  100% { transform: rotate(1.2deg); }
}

span {
  text-align: left;
}
a{
font-family:PolySans-Neutral;
float: left;
  margin: auto;
 text-align: center;
  display: block;
  text-decoration: none;
  font-weight: bold;
}

.link1 a{
  color: #ff4d5e;
}

.link2 a{
  color: #004bfb;
}


.hello img{
  width: 320px;
  padding-left: 15px;
}


.social {
  margin-bottom: -8px;
}

.social img {
  height: 20px;
  width: 20px;
  padding-right: 8px;
    opacity: 1;
transition: opacity .1s ease-in-out;
-moz-transition: opacity .1s ease-in-out;
-webkit-transition: opacity .1s ease-in-out; 
}

.social img:hover {
opacity: 0.7;
}

.footer {
  font-family:PolySans-Bulky;
font-size: .4em;
line-height: 1.3em;
  color: #004bfb;
}


.wavy {
 margin-left: 40px;
position: relative;
width:310px;
height:50px;
overflow: hidden;
}

.wavy::before {
content: 'ilovechocolateilovechocolateilovechocolateilovechocolateilovechocolateilovechocolateilovechocolateilovechocolate';
position: absolute;
top: -42px;
left: 0;
font-size: 4em;
color:transparent;
text-decoration-style: wavy;
text-decoration-color: #004bfb;
text-decoration-line: underline;
animation: animate 20s linear infinite;
}

@keyframes animate
{
0%
{
transform: translateX(-5px);
}
100%
{
transform: translateX(-600px);
}
}




@media only screen and (max-width: 600px) {

.menu {
  margin: 0 auto;
  width: 300px;
  padding: 40px 0px 0 40px;
  text-align: left;
font-family:PolySans-Neutral;
font-size: 2em;
line-height: 1.5em;
}

.hello img{
  width: 270px;
  padding-left: 25px;
}



.wavy {
 margin-left: 40px;
position: relative;
width:250px;
height:50px;
overflow: hidden;
}

.wavy::before {
content: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa';
position: absolute;
top: -42px;
left: 0;
font-size: 4em;
color:transparent;
text-decoration-style: wavy;
text-decoration-color: #004bfb;
text-decoration-line: underline;
animation: animate 20s linear infinite;
}

@keyframes animate
{
0%
{
transform: translateX(-5px);
}
100%
{
transform: translateX(-600px);
}
}

}

