:root {
                --header-image: url('/images/layout_images/01_dearlybeloved/01_summertime.png');
                --body-bg-image: url('/images/fullbgs/bg_destinyisland.png');
                
                --background-color: #f8f8f8;
                --content: #fff;
                --container-bg: #fff;
                --main-font: #606060;
                --border-color: #BDE3F9;
                --link-color: #5687a8;
                --link-color-hover: #a2ffff;
                --accent-color: #5779A9;
                --accent2-color: #F9E7BE;
                --h1-shadow: #E1F1F6;
            }
            
            @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');
            }

            body {
                font-family: 'Karla', sans-serif;
                text-transform: lowercase;
                margin: 0;
                color: var(--main-font);
                background: #f8f8f8 var(--body-bg-image) fixed;
                background-size: cover;
                letter-spacing: 0.04em;
                word-spacing: 0.02em;
                line-height: calc(13px + 6px);
                text-align: justify;
            }

            * {
                box-sizing: border-box;
                scrollbar-width: auto;
                scrollbar-color: #5779a9 #ffffff;
            }
            
            a {
              -webkit-transition: all 0.3s;
              -moz-transition: all 0.3s;
              -ms-transition: all 0.3s;
              -o-transition: all 0.3s;
              transition: all 0.3s;
              text-decoration: none;
            }
            
            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;
            }
            
            main a {
              box-shadow: var(--h1-shadow) 0 -1px 0 inset;
            }
            
            main a:hover {
              box-shadow: var(--h1-shadow) 0 -17px 0 inset;
            }
            
            li, ul {
              list-style-image: url(/images/keybladebullet.gif);
            }
            
            li {
              position: relative;
              padding: 0.5em 0 .5em 5px;
              margin-left: 0;
            }
            
            ul {
              padding: 0 10px;
            }
            
            li:last-of-type {
              margin-bottom: 0px;
            }
            
            .splash img {
              margin: 30px auto;
              display: block;
              height: 600px;
            }

            #container {
              font-size: 14px;
              font-weight: 300;
              max-width: 1000px;
                /* this is the width of your layout! */
                /* if you change the above value, scroll to the bottom
      and change the media query according to the comment! */
                margin: 10px auto;
            }

            #container a {
                color: var(--link-color);
                font-weight: bold;
                letter-spacing: 0.1em;
            }
            
            #container a:hover {
              color: var(--link-hover-color);
            }

            #header {
                width: 100%;
                height: 563px;
                background: var(--header-image) no-repeat center;
                background-size: 100%;
            }

            #headerArea {
              margin-right: auto;
              margin-left: auto;
              height: 100%;
              background-color: var(--container-bg);
            }
            
            nav {
              height: 40px;
              padding-top: 35px;
              display: block;
              width: 900px;
              margin: 0 auto;
            }

            nav a {
              font-family: 'DFPW5';
              margin-right: 60px;
              counter-increment: link;    
              position: relative;
              line-height: 1.2em;
              letter-spacing: 0.1em;
              display: inline-block;   
              text-decoration: none;
              text-shadow: -1px 0 #ffecff, 0 1px #ffecff, 1px 0 #ffecff, 0 -1px #ffecff;
            }

            nav a:hover {
                color: #F3EEC3;
                text-decoration: none;
            }
            
            nav a:before {    
                content: counter(link, decimal-leading-zero);
                font-weight: bold;
                font-family: 'Broken Sega Atari';
                color: #C4A75B;
                top: calc(-100% - 5px);
                position: absolute;
            } 

            #flex {
                display: flex;
            }

            aside {
                background-color: var(--container-bg);
                box-shadow: 0px 1px 6px -1px rgba(118,118,118,.1);
                -webkit-box-shadow: 0px 1px 6px -1px rgba(118,118,118,.1);
                width: 250px;
                padding: 20px;
                font-size: smaller;
            }

            main {
                background-color: var(--container-bg);
                box-shadow: 0px 1px 6px -1px rgba(118,118,118,.1);
                -webkit-box-shadow: 0px 1px 6px -1px rgba(118,118,118,.1);
                flex: 1;
                padding: 30px;
                order: 2;
            }
            
            .info  {
              margin: 0 auto;
              border-spacing: 30px 0;
              }

            .info .innerinfo {
              width: 250px;
              }
              
            .profile  {
              margin: -20px auto 0;
              border-spacing: 30px 0;
              }

            .profile .inprofile {
              width: 300px;
              font-size: 12px;
              }
              
            .profile .myspace {
              background-color: var(--background-color);
              border: 2px ridge var(--border-color);
              padding: 20px;
              height: 400px;
              overflow: hidden;
            }
            
            .profile .myspaceimg {
              background-color: #C3D0EE;
              display: block;
              margin: 0 auto -10px;
              padding: 5px;
              border: 1px dashed #fff;
              box-shadow: 0 0 0 3px #CDD5E8;
              width: 120px;
            }
              
            .insert-box {
              height: 650px;
              width: 100%;
              overflow: auto;
              border: 3px ridge var(--border-color);
              background-color: #E1F1F6;
              padding: 10px;
              text-align: center;
            }
            
            .insert-box a {
              margin: 0 10px;
            }
            
            .insert-box a:last-of-type {
              margin: 0;
            }
            
            .webrings {
              margin: 15px auto 0;
              border-spacing: 30px 0;
              }
            
            #bottomimg img {
              height: 670px;
              position: fixed;
              z-index: 1;
              bottom: 1vh;
              left: 3vw;
            }

            #rightSidebar {
              order: 2;
            }

            footer {
                background-color: var(--container-bg);
                box-shadow: 0px 1px 6px -1px rgba(118,118,118,.1);
                -webkit-box-shadow: 0px 1px 6px -1px rgba(118,118,118,.1);
                width: 100%;
                height: 40px;
                padding: 10px;
                text-align: center;
            }

            h1,
            h2 {
              background: #f5ffed url('/images/tiles/bg_khpatternwhite.jpg') repeat;
              background-size: 50%;
              border: 3px var(--border-color) double;
              color: var(--h1-shadow);
              font-size: 20px;
              font-family: 'Broken Sega Atari';
              padding: 5px 10px;
              line-height: 30px;
              text-shadow: -1px 0  var(--accent-color), 0 1px  var(--accent-color), 1px 0  var(--accent-color), 0 -1px  var(--accent-color);
            }

            h1 {
              background: #f5ffed url(/images/layout_images/01_dearlybeloved/extra_thinbanner.png);
              font-size: 1.8em;
              font-family: 'DFPW5';
              color: rgba(87, 121, 169, 0.75);
              text-shadow: -3px 3px 0 var(--h1-shadow);
              letter-spacing: 0.2em;
              text-align: right;
              padding:10px;
              border: 3px ridge rgba(189, 227, 249, 0.6);
              outline: 5px solid rgba(189, 227, 249, 0.5);
              box-shadow: none;   
            }
            
            h1:before {
              content: url('/images/kh_seasalticecream.png');
              width: 50px;
              position: relative;
              float: left;
              left: -3%;
            }              
            
            h3 {
              color: #C4A75B;
              font-size: 20px;
              font-family: 'Broken Sega Atari';
              text-shadow: 1px 2px var(--accent2-color);
              line-height: 0;
            }
            
            h4 {
              text-transform: uppercase;
              letter-spacing: 0.5em;
              text-align: center;
              background: linear-gradient(90deg, rgba(87, 121, 169, 0) 0%, rgba(87, 121, 169, 1) 25%, rgba(87, 121, 169, 1) 75%, rgba(87, 121, 169, 0) 100%);
              font-size: 1.2em;
              padding: 1px;
              color: var(--background-color);
              text-shadow: 0 0 2px #E1F1F6;
            }

            strong, b {
                background-color: var(--accent-color);
                color: #fff;
                padding: 3px 5px;
                margin: 5px 0;
            }
            
            em, i {
              color: var(--accent-color);
              font-style: italic;
              letter-spacing: 0.2em;
            }
            
            s, strike {
              color: var(--main-font);
              letter-spacing: 0.2em;
              text-decoration: wavy line-through var(--accent-color);
            }
            
            u, underline {
              letter-spacing: 0.2em;
              text-decoration: solid underline var(--accent2-color);
            }
            
            hr {
            outline: 2px solid var(--h1-shadow);
            border: 1px solid var(--accent-color);
            margin-top: 10px;
            }
            
            *::-webkit-scrollbar {
              width: 16px;
            }

            *::-webkit-scrollbar-track {
              background: #ffffff;
            }

            *::-webkit-scrollbar-thumb {
              background-color: #5779a9;
              border-radius: 5px;
              border: 0px none #5779a9;
            }

            .box {
              background-color: #E1F1F6;
              border-width: 8px;
              border-style: solid;
              border-image: url("/images/layout_images/foollovers_boxbg.gif") 8 fill round;
              color: #fff;
              padding: 10px;
              height: 150px;
              overflow: auto;
            }
            
            .box article {
                
                width: 198px;
                height: 40px;
                border-bottom: 1px solid #e5e5e5;
                margin: 5px;
                text-align: left;
            }
            
            .box article big {
                display: block;
                float: left;
                width: 40px;
                height: 36px;
                padding-top: 4px;
                margin-right: 5px;
                text-align: center;
                font-size: 20px;
                background-color: #e5e5e5;
            }
            
            .box article big b {
                display: block;
                font-size: 12px;
                margin-bottom: 3px;
            }
            
            /* sitemap navigation */
            
            .folder {
              margin-bottom:40px;
              padding:15px;
              border-radius:6px;
            }
 
            .map {
              background-color: var(--accent-color);
              font-family: 'Broken Sega Atari';
              color: #fff;
              letter-spacing: 0.3em;
              font-size: 14px;
              padding: 10px;
              margin: 20px 0;
              border: 1px dashed var(--h1-shadow);
              box-shadow: 0 0 0 3px var(--accent-color);
            }
            
            .mappa {
              margin: 20px auto 10px;
              display: block;
              text-align: center;
              overflow: hidden;
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              align-content: center;
              
            }

            .mappa a {
              background: url('/images/tiles/bg_khpatternwhite.jpg') repeat;
              background-size: 50%;
              border: 3px double var(--border-color);
              text-shadow: -1px 0  var(--h1-shadow), 0 1px  var(--h1-shadow), 1px 0  var(--h1-shadow), 0 -1px  var(--h1-shadow);
              color: var(--accent-color);
              font-size: 12px;
              display:inline-block;
              width: 150px;
              padding: 10px 15px;
              margin-bottom: 10px;
              margin-right: 20px;
              overflow: hidden;
              white-space: nowrap;
            }
            
            .mappa-omake a {
              background: url('/images/tiles/bg_khpatternwhite.jpg') repeat;
              background-size: 50%;
              border: 3px double var(--border-color);
              text-shadow: -1px 0  var(--h1-shadow), 0 1px  var(--h1-shadow), 1px 0  var(--h1-shadow), 0 -1px  var(--h1-shadow);
              color: var(--accent-color);
              display: inline-block;
              width: 200px;
              padding: 10px 15px;
              margin-bottom: 10px;
              margin-right: 20px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            
            .mappa a:hover {
              -webkit-filter: blur(0.5px);
              filter: blur(2px);
              }
            
            .mappa a:before {
              position: relative;
              content: url('/images/bluesparklebullet.gif');
              left: -5%;
              line-height: 130%;
            }
            
            .mappa a:last-of-type {
              margin-right: 0;
            }
            
            .external {
              width: 100%;
              height: auto;
              padding: 20px;
              background-color: rgba(252, 245, 229, 0.3);
              backdrop-filter: blur(9px);
              border: 1px solid #E1F1F6;
              border-radius: 2px;
              overflow: hidden;
              display: flex;
              flex-wrap: wrap;
              justify-content: flex-start;
              align-content: flex-start;
            }
            
            .external a, .external a:visited {
              width: 13em;
              height: auto;
              margin: 15px;
              padding: 5px 10px 5px 7.5px;
              text-align: right;
              color: var(--main-font);
              background: rgba(249, 231, 190, 0.4);
              box-shadow: inset 30px 0px 0px var(--accent2-color);
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
            
            .external a:hover {
              box-shadow: inset 185px 0px 0px var(--accent2-color);
              color: #fff;
            }
            
            .external a:before {
              content: '⇱';
              color: rgba(96, 96, 96, 0.6);
              margin-right: 20px;
            }
            
            .external a:last-of-type {
              margin-right: 0;
            }
            
            /* not found page */
            
            #not-found-box {
              position: relative;
              top: 50%;
              left: 50%;
              transform: translate(-50%, 70%);
              height: 300px;
              width: 500px;
              padding: 90px;
              border: 5px inset var(--border-color);
              border-radius: 8px;
              background: rgb(255,255,255);
              background: linear-gradient(180deg, rgba(255,255,255,1) 50%, rgba(86,135,168,1) 95%, rgba(86,135,168,1) 100%); 
              font-size: 2em;
              text-align: center;
              line-height: 1.5em;
              font-variant: small-caps;
              text-shadow: -1px -1px 0 #E1F1F6, 1px -px 0 #E1F1F6, -1px 1px 0 #E1F1F6, 1px 1px 0 #E1F1F6;
              -webkit-text-stroke:2px #000;
              filter: drop-shadow(0 1px #BDE3F9) drop-shadow(0 -1px #BDE3F9) drop-shadow(1px 0 #BDE3F9) drop-shadow(-1px 0 #BDE3F9);
              overflow: hidden;
            }
            
            #nf-title {
              float: left;
              position: absolute;
              top: 30%;
              left: 40%;
              transform: translate(-50%, -60%);
              z-index: 1000;
              width: 300px;
            }
            
            #card-float {
              width: 150px;
              float: left;
              position: absolute;
              top: 30%;
              left: 33%;
              transform: translate(-50%, 70%);
              z-index: 1000;
            }
            
            #card-float2 {
              width: 90px;
              float: right;
              position: absolute;
              right: 28%;
              transform: translate(-50%, 70%);
              z-index: 1000;
            }
            
            #backbutton {
              float: right;
              position: absolute;
              right: 25%;
              top: 54%;
              transform: translate(-50%, 70%);
              z-index: 1000;
              width: 200px;
            }

            /* CSS for extras */

            #topBar {
                width: 100%;
                height: 30px;
                padding: 10px;
                font-size: smaller;
                background-color: #13092D;
            }
            
            #feed-reader {
              background-color: #E1F1F6;
              width: 209px;
              height: auto;
              overflow: hidden;
              border: 2px ridge var(--border-color);
              padding: 10px;
            }
            
            #shrinepage {
              text-align: center;
            }
            
            .fake {
              text-align: center;
            }
            
            .status-user {
              border: 2px outset var(--border-color);
              background-color: var(--accent-color);
              color: #fff;
              text-align: center;
              font-size: 0.8em;
              letter-spacing: 0.2em;
              padding: 3px 5px;
            }
            
            .status-content {
              border-bottom: 1px solid var(--border-color);
              margin: 10px;
              padding-bottom: 10px;
            }
            
            .status-content:last-of-type {
              border-bottom: none;
              margin-bottom: 0;
            }
            
            .caption, .caption a {
              display: block;
              font-size: 9px;
              text-align: right;
              color: #ccc;
              text-decoration: none;
              box-shadow: none;
            }
            
            .caption a:hover {
              box-shadow: none;
            }
            
            .tuck {
              display: block;
              padding: 5px 25px;
            }
            
            .toys {
              border-width: 8px;
              border-style: solid;
              border-image: url("/images/layout_images/foollovers_boxbg.gif") 8 fill round;
              width: 100%;
              padding: 20px;
              text-align: center;
            }
            
            .toys img {
              margin-left: 15px;
            }
            
            .toys a, a:hover {
              box-shadow: none;
            }
          
            .drop-cap:first-letter {
                float: left;
                line-height: 1;
                margin: 0 0.5rem 0 0;
                padding: 15px;
                border: 1px outset #BDE3F9;
                background: #f5ffed url('/images/tiles/bg_khpatternwhite.jpg') repeat;
                background-size: 30%;
                color: var(--accent-color);
                font-size: 2rem;
                font-weight: 700;
            }
            
            ::-moz-selection{
                background: var(--accent-color);
                color: var(--background-color);
            }
 
            ::selection{
                background: var(--accent-color);
                color: var(--background-color);
            }
            
            textarea {
                height: 50px;
                width: 100px;
                border: 1px dotted var(--border-color);
                outline: none;
                padding: 2px 3px;
                font-size: 6px;
            }
            
            html, a, a:hover { 
              cursor:url('/images/cursors/keybladeoflightcur.png'), auto; 
            }
            
            .wigheart {
              -webkit-mask-image: url(https://i.imgur.com/mgYPn13.png);
              -webkit-mask-size: 100%;
              -webkit-mask-repeat: no-repeat;
              -webkit-mask-position: center;
              width: 100px;
              height: auto;
            }
            
            .doubleh {
              -webkit-mask-image: url(https://i.imgur.com/pWGHuQ4.png);
              -webkit-mask-size: 100%;
              -webkit-mask-repeat: no-repeat;
              -webkit-mask-position: center;
              width: 100px;
              height: auto;
            }
            
            .insidetxt img {
              float: left;
              margin: 10px 20px 0;
            }
            
            .insidetxt-right img {
              float: right;
              margin: 10px 20px 0;
            }
            
            .insidetxt-right2 img {
              float: right;
              margin: 0 20px 20px;
            }
            
            .profiletxt img {
              float: left;
              margin: 5px 5px 0;
            }
 
            .rotate:hover img {
              transform: scale(1.25) rotate(10deg);
              transform-origin: 50% 50%;
              webkit-filter: blur(.5px);
              filter: blur(.5px);
            }
            
            .blurb {
              display: block;
              margin-top: 25px;
            }
            
            .blurb-title {
              display: block;
              padding: 10px 20px;
              border: 3px ridge var(--border-color);
              outline: 5px solid rgba(189, 227, 249, 0.5);
              font-size: 2em;
              color: var(--accent-color);
              -webkit-text-stroke: 1px var(--main-font);
              -webkit-text-fill-color: transparent;
              text-shadow: 2px 2px 0px var(--accent-color);
              text-align: right;
              background: #E1F1F6;
            }
            
            .blurb-text {
              display: block;
              border: 2px ridge var(--border-color);
              background: rgba(151, 202, 243, 0.2);
              margin-top: 15px;
              padding: 10px;
              height: auto;
              overflow: auto;
              text-align: center;
            }
            
            .blurb-text img {
              width: 200px;
              background: var(--accent2-color);
              padding: 5px;
              margin-right: 15px;
            }
            
            .box-fun {
              background-color: #E1F1F6;
              border-width: 8px;
              border-style: solid;
              border-image: url("/images/layout_images/foollovers_boxbg.gif") 8 fill round;
              color: #fff;
              text-align: left;
              padding: 10px;
              height: 350px;
              overflow: auto;
            }
            
            .images {
              display: flex;
              justify-content: center;
              align-items: center;
            }
            
            .images img {
              width: 180px;
              height: auto;
              margin: 0 auto;
              border: 5px double rgba(87, 121, 169, 0.5);
              padding: 5px;
            }
            
            #bisexualism .webring-info {
              display: inline-block;
              font-size: 2em;
              background: -webkit-linear-gradient(#ce1f91, #1843b5);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }

            #bisexualism .webring-prev, .webring-next {
              display: inline-block;
              font-size: 2em;
              background: -webkit-linear-gradient(#ce1f91, #1843b5);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
            
            #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: var(--accent-color);
              -webkit-text-stroke-width: 1px;
              -webkit-text-stroke-color: var(--accent-color);
              font-size: 22px;
              border-bottom: none;
            }

            .pausee {
              display:none;
            }

            /* BELOW THIS POINT IS MEDIA QUERY */

            /* so you wanna change the width of your page? 
    by default, the container width is 900px.
    in order to keep things responsive, take your new height,
    and then subtrack it by 100. use this new number as the 
    "max-width" value below
    */

            @media only screen and (max-width: 900px) {
                #flex {
                    flex-wrap: wrap;
                }

                aside {
                    width: 100%;
                }

                /* the order of the items is adjusted here for responsiveness!
      since the sidebars would be too small on a mobile device.
      feel free to play around with the order!
      */
                main {
                    order: 1;
                }

                #rightSidebar {
                    order: 2;
                }

                #navbar ul {
                    flex-wrap: wrap;
                }
            }