<style>
* {
	margin:0;
	padding:0;
	display:inline-block;
}
body {
	font-family:"Arial", sans-serif;
	font-size:1.1em;
    color:#191919;
	background-color:#2993FB;
    box-sizing:border-box;
    margin:0;
    padding:0;
}
img {
    max-width:100%;
}
a {
    color:white;
}
a, a:hover {
    text-decoration:none;
}
a:hover {
    color:#191919;
}
h1 {
    padding-top:100px;
}
#wrapper {
    width:700px;
    max-width:100%;
	margin:20px auto;
	text-align:center;
}
p {
    width:60%;
    display:block;
    margin:0 auto;
}
footer {
    bottom:0;
    left:0;
    position:fixed;
    padding-left:1%;
}
footer #dylan {
    transition:margin-bottom 0.2s ease-out;
    width:50%;
    display:inline-block;
    vertical-align:bottom;
    margin-bottom:-5px;
}
footer:hover #dylan {
    margin-bottom:0;
}
footer #follow {
    background-color:white;
    display:inline-block;
    padding:15px 12px 10px;
    margin-bottom:35px;
    border-radius:7px;
    position:relative;
    vertical-align:bottom;
    box-shadow:5px 5px 10px rgba(0, 0, 0, 0.2)
}
footer #follow:before {
    content:"";
    border-top:transparent 15px solid;
    border-bottom:transparent 15px solid;
    border-right:white 15px solid;
    display:inline-block;
    position:absolute;
    left:-12px;
    bottom:4px;
    width:0;
    height:0;
    transition:bottom 0.5s ease-out;
}
footer:hover #follow:before {
    bottom:7px;
}
#follow ul {
    list-style:none;
    padding:0;
    margin:0;
    display:block;
}
#follow ul li {
    display:inline-block;
    padding:0 5px;
}
#follow ul li a {
    display:block;
}
#square-logo {
    padding:50px;
    padding-bottom:100px;
    width:70px;
}

@media screen and (max-width: 767px) {
    h1 {
        padding-top:20px;
    }
    p {
        width:90%;
    }
    footer {
        position:static;
        display:block;
    }
    #square-logo {
        width:80px;
        padding-bottom:50px;
    }
}
</style>