:root{
    --font-family: "Lato", Arial, Helvetica, sans-serif;
    --wave-speed: .75s;
    --wave-left: "(ό‿ὸ)ﾉ゛";
    --wave-right: "(ό‿ὸ)ノ";
}
  
@keyframes wave-animation {
    0%, 100% {
        content: var(--wave-left);
    }
    50% {
        content: var(--wave-right);
    }
}
@property --bensblue {
    syntax: "<color>";
    inherits: false;
    initial-value: #7289da;
}
.waver:after {
    margin-left:.25em;
    content: var(--wave-left);
    font-size: .5em;
    font-weight:700;
    animation: wave-animation var(--wave-speed) infinite;
    -webkit-animation: wave-animation var(--wave-speed) infinite;
    -o-animation: wave-animation var(--wave-speed) infinite;
    -moz-animation: wave-animation var(--wave-speed) infinite;
}
body{
    padding: 20px;
}
body, p, h1{
    font-family: var(--font-family);
    font-size:2em;
    font-weight: 100;
}
a{ 
    color: var(--bensblue);
    padding:0 .15em;
}
a:hover{
    color:#fff;
    background-color:var(--bensblue);
}
.sub-text{
    font-size:.5em;
}
footer p{
    font-size:.35em;
}
.content-wrapper p{
    margin:0;
}
.content-wrapper{
    display:block;
}
footer{
    position:absolute;
    bottom:0;
}
@media screen and (max-width: 600px) {
    body, p, h1{
        font-size:1.5em;
        font-weight:300;
    }
    .waver:after {
        font-size:1em;
        font-weight:700;
    }
    .sub-text{
        font-size:.75em;
    }
    footer p{
        font-size:.5em;
    }
}