@font-face {
  font-family: 'tuskchaser';
  src: url('tuskchaser.eot?85168407');
  src: url('tuskchaser.eot?85168407#iefix') format('embedded-opentype'),
       url('tuskchaser.woff2?85168407') format('woff2'),
       url('tuskchaser.woff?85168407') format('woff'),
       url('tuskchaser.ttf?85168407') format('truetype'),
       url('tuskchaser.svg?85168407#tuskchaser') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "tuskchaser";
  font-style: normal;
  font-weight: normal;
  speak: never;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;

  font-variant: normal;
  text-transform: none;

  line-height: 1em;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}

.icon-splotch:before { content: '\e800'; } /* '' */
.icon-house:before { content: '\e801'; } /* '' */
.icon-otter:before { content: '\e802'; } /* '' */
.icon-c:before { content: '\e803'; } /* '' */
.icon-f:before { content: '\e804'; } /* '' */
.icon-i:before { content: '\e805'; } /* '' */
.icon-mattress-pillow:before { content: '\e806'; } /* '' */
.icon-twitter:before { content: '\f099'; } /* '' */
.icon-circle:before { content: '\f111'; } /* '' */
.icon-tumblr:before { content: '\f173'; } /* '' */

:root {
    --bgColor: #224430;
    --bgColor2: #090f0a;
    --accentColor: #FFF;
    --font: 'Arial', sans-serif;
    --delay: .3s;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: var(--font);
    background: radial-gradient(ellipse at bottom, var(--bgColor) 0%, var(--bgColor2) 100%);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

#profilePicture, #profilePicture img {
    position: relative;
    width: 100px;
    height: 100px;
    display: block;
    margin: 40px auto 20px;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
}

#userName {
    color: var(--accentColor);
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.25;
    display: block;
    font-family: var(--font);
    width: 100%;
    text-align: center;
    text-decoration: none;
}

#links {
    max-width: 675px;
    width: auto;
    display: block;
    margin: 27px auto;
}

.link {
    position: relative;
    background-color: transparent;
    color: var(--accentColor);
    border: solid var(--accentColor) 2px;
    border-radius: 10px;
    font-size: 1rem;
    text-align: center;
    display: block;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 10px; /* 17px */
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .link:hover {
        background-color: var(--accentColor);
        color: var(--bgColor);
    }
}

.link:active {
    background-color: var(--accentColor);
    color: var(--bgColor);
}

#hashtag {
    position: relative;
    padding-bottom: 20px;
    color: var(--accentColor);
    font-size: 1rem;
    display: block;
    font-family: var(--font);
    width: 100%;
    text-align: center;

}
