*, *:after, *:before {
  box-sizing: border-box; }

body {
  background: black;
  color: white;
  padding: 0;
  margin: 0;
  background-image: url(images/background.gif); }

main {
  margin: 0 auto;
  width: calc(100vw - 32px); }
  @media (min-width: 768px) {
    main {
      width: 468px; } }
  @media (min-width: 734px) {
    main {
      width: 702px; } }
  @media (min-width: 968px) {
    main {
      width: 936px; } }

header {
  position: relative; }
  header img {
    display: block;
    margin: 0 auto; }

.spacer {
  width: 100%;
  height: 3px; }

.world {
  margin-left: 1rem;
  min-width: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.dulnan {
  margin: 0 auto;
  position: relative;
  z-index: 2; }
  .dulnan img {
    max-width: 100%; }

h1 {
  font-size: 1.75rem; }
  @media (min-width: 768px) {
    h1 {
      font-size: 3rem; } }

h2 {
  font-size: 1.75rem; }

.link-heading:before {
  content: "";
  display: inline-block;
  width: 74px;
  height: 30px;
  margin-right: 1rem;
  margin-top: 0.25rem;
  margin-bottom: -0.25rem;
  background-image: url(images/link.gif); }

.title {
  display: flex;
  align-items: center; }
  .title h1 {
    flex: 1;
    text-align: center; }
  .title img {
    display: block; }

@keyframes portfolio-border {
  0% {
    border-style: solid; }
  50% {
    border-style: dotted; }
  100% {
    border-style: dashed; } }

.about {
  font-size: 1.25rem; }
  @media (min-width: 768px) {
    .about {
      font-size: 1.5rem; } }

.portfolio {
  font-family: "Comic Sans", "Comic Sans MS", "Marker Felt";
  font-size: 1rem;
  padding: 1em 0.75em;
  position: relative;
  overflow: hidden;
  border: 4px solid red;
  animation: 0.6s portfolio-border infinite;
  display: flex;
  color: white;
  text-decoration: none;
  line-height: 1.1;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  align-items: center;
  flex-direction: column; }
  @media (min-width: 768px) {
    .portfolio {
      font-size: 1.5rem;
      text-align: left;
      flex-direction: row; } }
  .portfolio .url {
    margin-top: 0.5em;
    font-size: 1.3em; }
  .portfolio .image {
    flex: 0 0 auto;
    order: -1;
    padding: 0 3rem 0.4em; }
    .portfolio .image img {
      width: 100%;
      max-width: 250px; }
      @media (min-width: 768px) {
        .portfolio .image img {
          max-width: 350px; } }
    @media (min-width: 768px) {
      .portfolio .image {
        padding: 0;
        margin-left: 2rem;
        order: 4; } }

.banner {
  width: 1em;
  height: 0.12821em;
  position: relative;
  margin: 0.03419em 0;
  display: flex;
  align-items: center;
  padding: 0.03419em;
  overflow: hidden;
  font-size: calc(100vw - 32px);
  border: 1px solid rgba(255, 255, 255, 0.3); }
  .banner:hover {
    border-color: white; }
  @media (min-width: 768px) {
    .banner {
      font-size: 468px; } }
  @media (min-width: 734px) {
    .banner {
      font-size: 702px; } }
  @media (min-width: 968px) {
    .banner {
      font-size: 936px; } }
  .banner img {
    display: block;
    image-rendering: pixelated; }

@keyframes github-logo {
  0% {
    transform: rotate(15deg); }
  100% {
    transform: rotate(-15deg); } }

@keyframes github-button {
  90% {
    transform: scale(1); }
  100% {
    transform: scale(1.1); } }

.banner--github {
  background: midnightblue; }
  .banner--github .button {
    background: #ffcc00;
    padding: 0.01709em;
    border-radius: 4rem;
    margin-left: auto;
    box-shadow: 0 2px 1px 0px #816700, inset 0 2px 1px white;
    animation: 4s github-button steps(8, end) infinite; }
    .banner--github .button img {
      width: 0.36111em; }
  .banner--github .text img {
    width: 0.28205em; }
  .banner--github .logo {
    margin-right: 1rem;
    animation: 0.5s github-logo steps(4, end) infinite alternate; }
    .banner--github .logo img {
      width: 0.08974em; }

@keyframes github-logo {
  0% {
    transform: rotate(15deg); }
  100% {
    transform: rotate(-15deg); } }

@keyframes twitter-text {
  0% {
    transform: translateX(-100%); }
  20% {
    transform: translateX(0); } }

.banner--twitter {
  background: white;
  padding: 0; }
  .banner--twitter .text {
    background: #ffcc00;
    padding: 0.03419em;
    padding-right: 0.13675em;
    height: 100%;
    display: flex;
    align-items: center;
    clip-path: polygon(0 0, 100% 0%, 80% 100%, 0% 100%);
    animation: 8s twitter-text steps(8) infinite; }
    .banner--twitter .text img {
      width: 0.25641em; }
  .banner--twitter .bird {
    height: 100%;
    margin-left: auto;
    margin-right: 0.01709em;
    margin-left: -0.03419em; }
    .banner--twitter .bird img {
      width: 0.17521em; }
  .banner--twitter .logo {
    padding-right: 0.05128em;
    margin-left: auto; }
    .banner--twitter .logo img {
      width: 0.36111em; }

@keyframes instagram-logo {
  90% {
    transform: scale(1); }
  100% {
    transform: scale(1.1); } }

.banner--instagram {
  background: white;
  padding-right: 0; }
  .banner--instagram .text img {
    width: 0.2906em; }
  .banner--instagram .slideshow {
    margin-left: auto; }
    .banner--instagram .slideshow img {
      width: 0.21368em; }
  .banner--instagram .logo {
    margin-right: 1rem;
    animation: 0.7s instagram-logo steps(2, end) infinite alternate; }
    .banner--instagram .logo img {
      width: 0.43376em; }

@keyframes codepen-logo {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; } }

@keyframes codepen-code {
  0% {
    transform: translateX(-20%);
    opacity: 0; }
  20% {
    transform: translateX(0);
    opacity: 1; } }

@keyframes codepen-pen {
  0% {
    transform: translateX(20%);
    opacity: 0; }
  10% {
    transform: translateX(0);
    opacity: 1; } }

@keyframes codepen-button {
  0% {
    transform: rotate(-10deg); }
  100% {
    transform: rotate(10deg); } }

.banner--codepen {
  background: black; }
  .banner--codepen:before, .banner--codepen:after {
    content: "";
    width: 77%;
    height: 300%;
    background: rgba(102, 51, 153, 0.8);
    position: absolute;
    top: 0;
    right: -10%;
    z-index: 0; }
  .banner--codepen:before {
    transform: rotate(15deg); }
  .banner--codepen:after {
    transform: rotate(-10deg); }
  .banner--codepen .logo,
  .banner--codepen .logo-text,
  .banner--codepen .text,
  .banner--codepen .button {
    position: relative;
    z-index: 1; }
  .banner--codepen .button {
    animation: 1s codepen-button steps(4, end) infinite alternate;
    margin-left: auto; }
    .banner--codepen .button img {
      width: 0.24573em; }
  .banner--codepen .logo {
    animation: 6s codepen-logo steps(4, end) infinite; }
    .banner--codepen .logo img {
      width: 0.09402em; }
  .banner--codepen .logo-text {
    margin-left: 0.01709em; }
    .banner--codepen .logo-text img:first-child {
      animation: 6s codepen-code steps(4, end) infinite;
      width: 0.14957em; }
    .banner--codepen .logo-text img:last-child {
      animation: 6s codepen-pen steps(4, end) infinite;
      width: 0.11752em; }
  .banner--codepen .text {
    margin-left: 0.10256em; }
    .banner--codepen .text img {
      width: 0.2735em; }

@keyframes lastfm-free {
  0% {
    opacity: 0.8; }
  100% {
    opacity: 1; } }

@keyframes lastfm-button {
  0% {
    transform: scale(1); }
  20% {
    transform: scale(1.1); }
  40% {
    transform: scale(1.02); }
  80% {
    transform: scale(1.12); } }

.banner--lastfm {
  background: red; }
  .banner--lastfm .free {
    animation: 0.5s lastfm-free steps(3) infinite alternate; }
    .banner--lastfm .free img {
      width: 0.20085em; }
  .banner--lastfm .text {
    position: relative;
    z-index: 2; }
    .banner--lastfm .text img {
      width: 0.25641em; }
  .banner--lastfm .logo {
    display: flex;
    align-items: center;
    margin-left: -0.03419em; }
    .banner--lastfm .logo > div:first-child img {
      width: 0.15598em; }
    .banner--lastfm .logo > div:last-child {
      margin-left: -0.08547em; }
      .banner--lastfm .logo > div:last-child img {
        width: 0.25427em; }
  .banner--lastfm .button {
    margin-left: auto;
    margin-top: 0.00855em;
    animation: 1s lastfm-button steps(2) infinite alternate; }
    .banner--lastfm .button img {
      width: 0.1453em; }