body, html {margin: 0; padding: 0; min-width: 60vh;}

.splash {max-width: 300vh; margin: 0 auto; width:100%; height:100vh; overflow:hidden; position: relative;}
.highlight {text-shadow: 1px 1px .15em #fff, 1px -1px .15em #fff, -1px 1px .15em #fff, -1px -1px .15em #fff;}
.fadeout {opacity: 0; transition-duration: .5s;}
.fadein {transition-duration: .5s;}

#ksplash {}
#ksplash .character {height:50%; display: block; margin: 0 auto; position: absolute; bottom: 0; left: 60%;}
#ksplash .concert {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -99; transition-duration: .5s; background-size: cover; background-position: center;}
#ksplash .concert.big {left: -30%; top: -30%; width: 160%; height: 160%;}
#ksplash .speaker {height: 100vmin; position: absolute; transition-duration: 1s; opacity: .6; bottom: 0}
#ksplash .speaker.l {left: -27vh;}
#ksplash .speaker.r {right: -27vh;}
#ksplash blockquote {position: absolute; right: 40%; bottom: 40%; padding: .5em;}
#ksplash p {font-size: 5vh; padding: 1em;}

#rsplash {position: relative}
#rsplash.activated::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .001; z-index: -1; background-size: cover; background-image: url(img/city-scenery.jpg); transition-duration: 2s}
#rsplash.showImage::before {opacity: 1 !important}
#rsplash img {height:50%; display: block; margin: 0 auto; position: absolute; bottom: 0; right: 70%;}
#rsplash blockquote {position: absolute; left: 40%; bottom: 30%; padding: .5em;}
#rsplash p {color: #a8f; font-size: 10vmin; padding: .5em; margin: 25vh 0 0 30%; text-align: center; overflow: hidden; text-overflow: ellipsis;}

#bsplash {position: relative}
#bsplash.activated::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .001; z-index: -1; background-size: cover; background-image: url(img/planets.jpg); transition-duration: 2s}
#bsplash.showImage::before {opacity: 1 !important}
#bsplash img {height:80%; display: block; margin: 0 auto; position: absolute; bottom: 0; right: 20%;}
#bsplash .spaceship {right: 200%;}
#bsplash.showImage .spaceship {transition-duration: 2s; right: 20%;}
#bsplash blockquote {position: absolute; left: 40%; bottom: 30%; padding: .5em;}
#bsplash p {color: #51f82a; font-size: 10vmin; padding: .5em; margin: 15vh 50% 0 10%; text-align: center; overflow: hidden; position: absolute; z-index: 1; text-shadow: none}

#living {position: relative}
#living.activated::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .001; z-index: -1; background-size: cover; background-image: url(img/sky.jpg); transition-duration: 2s}
#living.showImage::before {opacity: 1 !important}
#living img {height: 100vmin; display: block; position: absolute; bottom: 0; right: 0;}
#living p {color: orange; text-align: center; font-size: 10vmin; padding: .5em; margin: 0; position: absolute; top: 10vh;}

footer {text-align: center;}
footer ul {list-style-type: none; position: absolute; width: 100%; padding: 0; margin: 0; top: 35vh;}
footer li {display: inline-block; padding: 0; margin: 0;}
footer a {outline: 0;}
footer img {width: 25vmin;}

.oval-thought-border {position:relative; padding:7vh 3vh; margin:1em auto 8vh; border:1vh solid #2b1ec8; text-align:center; color:#333; background:#fff;
  /* css3 */ -webkit-border-top-left-radius:24vh 14vh; -webkit-border-top-right-radius:24vh 14vh; -webkit-border-bottom-right-radius:24vh 14vh;
  -webkit-border-bottom-left-radius:24vh 14vh; -moz-border-radius:24vh / 14vh; border-radius:24vh / 14vh;}
/* creates the larger circle */
.oval-thought-border:before {content:""; position:absolute; z-index:10; bottom:-4vh; right:10vh; width:5vh; height:5vh; border:1vh solid #2b1ec8; background:#fff;
  /* css3 */ -webkit-border-radius:5vh; -moz-border-radius:5vh; border-radius:5vh; display:block;}
.oval-thought-border.reversed:before {left:10vh;}
/* creates the smaller circle */
.oval-thought-border:after {content:""; position:absolute; z-index:10; bottom:-6vh; right:5vh; width:2.5vh; height:2.5vh; border:1vh solid #2b1ec8; background:#fff;
  /* css3 */ -webkit-border-radius:2.5vh; -moz-border-radius:2.5vh; border-radius:2.5vh; display:block;}
.oval-thought-border.reversed:after {left: 5vh;}