body {
  background: url('/images/fullbgs/bg_traversetown.png') fixed;
  background-size: cover;
  font-family: 'Karla', sans-serif;
  font-size: 0.9em;
}

html, a, a:hover { 
  cursor:url(/images/cursors/keybladeoflightcur.png), auto; 
}

@font-face {
  font-family: Broken Sega Atari;
  src: url('/fonts/brokensegaatari.ttf');
}
  
@font-face {
  font-family: DFPW5;
  src: url('/fonts/DFPW5_EUR.ttf');
}

@font-face {
  font-family: Karla;
  src: url('/fonts/Karla-Regular.ttf');
}

.title {
  display: block;
  font-size: 30px;
  color: #E3C061;
  text-align: left;
  margin: 12px 0 0 250px;
  -webkit-text-stroke: 1px #2F100C;
}

aside {
  background: url('/images/tiles/bg_card1.png') repeat;
  border-right: 5px double #93543A;
  position: fixed;
  width: 150px;
  height: 100%;
  left: 0;
  top: 0;
  padding: 100px 40px 0 40px;
}

aside a, aside a:visited {
  text-decoration: none;
  display: block;
  font-family: 'DFPW5';
  color: #4D3233;
  border-bottom: 5px double #A73A25;
  padding-bottom: 5px;
  margin-bottom: 15px;
}

aside a:last-of-type {
  margin-bottom: 0;
}

aside a:hover {
  color: #A73A25;
}

aside a:before {
  content: '►';
  margin-right: 5px;
}

aside a:hover:before {
  content: '►';
  margin-left: 5px;
}

main {
  max-width: 1000px;
  margin: 0 0 0 300px;
}

section {
  position: absolute;
  margin: 10px 0;
  padding: 35px;
  width: 50%;
  height: auto;
  background: url('/images/tiles/bg_card1.png') repeat;
  border: 5px double #93543A;
  box-sizing: border-box;
}

.inner {
  background: url('/images/tiles/bg_card2.png') repeat;
  padding: 20px;
  border: 1px dashed #93543A;
}

a, a:visited {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

a:hover {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

h1 {
  background: rgba(99, 85, 45, 0.8);
  outline: 5px solid rgba(99, 85, 45, 0.5);
  color: #fefefe;
  font-size: 1.2em;
  text-shadow: -2px 0  #4D3233, 0 2px  #4D3233, 2px 0  #4D3233, 0 -2px  #4D3233;
  letter-spacing: 0.2em;
  text-align: center;
  padding: 4px;
  margin: 20px 0;
}

h3 {
  color: #C4A75B;
  font-size: 2em;
  font-family: 'Broken Sega Atari';
  line-height: 0;
}

.saturate {
  display: block;
  margin: 0 auto;
  text-align: center;
}

.saturate img {
  display: inline-block;
  border: 5px double #B6622F;
  outline: 5px solid rgba(182, 98, 47, 0.5);
  width: 250px;
  margin: 10px;
}

.saturate a:hover img { 
  border: 5px double #B6622F;
  filter: saturate(0);
  -webkit-transition: .5s ease-in; 
} 

.saturate a img, .saturate a:visited img {
  filter: saturate(100%);
  -webkit-transition: .5s ease-in; 
}

.keyblade img {
  height: 470px;
  position: fixed;
  z-index: 1;
  bottom: 3%;
  left: 66%;
  transform: rotate(9deg);
}

/* music player */
  
  #glenplayer02 {
    position:fixed;
    bottom: 0;
    margin-bottom:10px;
    margin-left:10px;
    display:flex;
    z-index:99;
  }
            
  #glenplayer02 a {
    text-decoration:none;
  }

  #glenplayer02 > div {
    align-self:center;
    -webkit-align-self:center;
  }

  .music-controls {
    user-select:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    width:22px;
    font-size:16px;
    cursor:pointer;
  }

  .playy, .pausee {
    -webkit-background-clip: text;
    -webkit-text-fill-color: #A73A25;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #A73A25;
    font-size: 22px;
    border-bottom: none;
  }

  .pausee {
    display:none;
  }