ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
body{-webkit-text-size-adjust:none; font-family: 'Roboto Slab', serif;}
mark{background-color:transparent;color:inherit}
input::-moz-focus-inner{border:0;padding:0}
input[type="text"],input[type="email"],select,textarea{-moz-appearance:none;-webkit-appearance:none;-ms-appearance:none;appearance:none}


/* Flaired edges, by Tomas Theunissen */

hr.ends {
    overflow: visible; /* For IE */
    height: 30px;
    border-style: solid;
    border-color: black;
    border-width: 1px 0 0 0;
    border-radius: 20px;
}
hr.ends:before { /* Not really supposed to work, but does */
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: black;
    border-width: 0 0 1px 0;
    border-radius: 20px;
}




body {line-height: 1.0;min-height: var(--viewport-height);min-width: 320px;overflow-x: hidden;word-wrap: break-word; padding: 0; margin: 0;}

body:before {content: '';display: block;background-attachment: scroll;height: var(--background-height);left: 0;pointer-events: none;position: fixed;top: 0;transform: scale(1);width: 100vw;z-index: 0; background-color: #FFFFFF;}:root {--background-height: 100vh;--site-language-alignment: left;--site-language-direction: ltr;--site-language-flex-alignment: flex-start;--site-language-indent-left: 1;--site-language-indent-right: 0;--viewport-height: 100vh;}

html {font-size: 18pt;}u {text-decoration: underline;}
strong {color: inherit;font-weight: bolder;}
em {font-style: italic;}
code {background-color: rgba(144,144,144,0.25);border-radius: 0.25em;font-family: 'Lucida Console', 'Courier New', monospace;font-size: 0.9em;font-weight: normal;letter-spacing: 0;margin: 0 0.25em;padding: 0.25em 0.5em;text-indent: 0;}
mark {background-color: rgba(144,144,144,0.25);}
spoiler-text {-webkit-text-stroke: 0;background-color: rgba(32,32,32,0.75);text-shadow: none; color: transparent;cursor: pointer;transition: color 0.1s ease-in-out;}
spoiler-text.active {color: #FFFFFF;cursor: text;}
s {text-decoration: line-through;}
sub {font-size: smaller;vertical-align: sub;}
sup {font-size: smaller;vertical-align: super;}
a {color: inherit;text-decoration: underline;transition: color 0.25s ease;}
a[onclick]:not([href]) {cursor: pointer;}



#main {--alignment: center;--flex-alignment: center;--indent-left: 1;--indent-right: 1;--border-radius-tl: 0;--border-radius-tr: 0;--border-radius-br: 0;--border-radius-bl: 0;align-items: center;display: flex;flex-grow: 0;flex-shrink: 0;justify-content: center;max-width: 100%;position: relative;text-align: var(--alignment);z-index: 1;transition: opacity 1s ease 0s,transform 1s ease 0s;}

.image {display: block;line-height: 0;max-width: 100%;position: relative;}
.image .frame {-webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);display: inline-block;max-width: 100%;overflow: hidden;vertical-align: top;width: 100%;}
.image .frame img {border-radius: 0 !important;max-width: 100%;vertical-align: top;width: inherit;}
.image.full .frame {display: block;}
.image.full:first-child .frame {border-top-left-radius: inherit;border-top-right-radius: inherit;}
.image.full:last-child .frame {border-bottom-left-radius: inherit;border-bottom-right-radius: inherit;}

#image01 {width: 100%;}

#image372 .frame {max-width: 100%;width: auto;transition: transform 0.25s ease, z-index 0.25s ease;}
#image372 .frame:hover {transform: scale(1.1125);z-index: 1;}






/** Navigation Bar **/
.nav {
  z-index: 3;
  position: fixed;
  right: 2rem;
  top: 2rem;
  width: 2rem;
}

.close {
  font-size: 2rem;
  border-radius: 100%;
  right: 0;
  position: absolute;
  width: 2rem;
  height: 2rem;
  opacity: 0.7;
  transition: all 0.5s ease-out;
}

.close:hover {
  opacity: 1;
}

.next {
  right: 0;
  position: absolute;
  top: 3.5rem;
  width: 50px;
  height: 50px;
}

.next:hover {
  opacity: 1;
}

.prev {
  right: 0;
  position: absolute;
  top: 5.5rem;
  width: 50px;
  height: 50px;
}

.button {
	display: flex;
	flex-direction: row;
	align-items: center;
  justify-content: center;
  text-decoration: none;
  opacity: 0.7;
  font-size: 1.2rem;
  transition: all 0.5s ease-out;
}

.prev:hover {
  opacity: 1;
}


/* Thumbnails */
.thumb-cont {
  max-width: 300px;
  width: 10rem;
  height: 10rem;
  display: block;
  position: relative;
  text-align: center;
  color: white;
  background-color: white;
  background-size: 110%;
  margin: 5px;
  padding: 5px;
  border-radius: 100%;
  -webkit-box-shadow: 8px 8px 25px -14px rgba(141, 140, 140, 1);
  -moz-box-shadow: 8px 8px 25px -14px rgba(141, 140, 140, 1);
  box-shadow: 8px 8px 25px -14px rgba(141, 140, 140, 1);
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
  background-color: #ececec;
  background-position: center;
  display: block;
}

.thumb-cont:hover {
  background-size: 120% auto;
}

.name-caption {
  display: block;
  position: relative;
  background-color: #115ff5;
  padding: 0.2em;
  border-radius: 1em;
}

@media screen and (max-width: 300px) {
  .name-caption{
    font-size: 8vw;
  }

  .thumb-cont {
    width: 50vw;
    height: 50vw;
  }
}


#gallery02 {width: 100%;}
#gallery02 ul {
  width: 100%; 
  display: flex; 
  flex-wrap: wrap;
  justify-content: center; 
  padding: 0; 
  list-style-type: none;
}
#gallery02 li {
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

/** Vtubers pages **/
.page {
  background-color: #ffcc1e;
  display:block;
  width: 50%;
  height: 10%;
  margin: auto auto;
}
.icons {display: flex;flex-wrap: wrap;justify-content: var(--flex-alignment);letter-spacing: 0;padding: 0;}
.icons li {position: relative;z-index: 1;}
.icons li a {align-items: center;display: flex;justify-content: center;}
.icons li a svg {display: block;position: relative;}
.icons li a + svg {display: block;height: 100%;left: 0;pointer-events: none;position: absolute;top: 0;width: 100%;z-index: -1;}
.icons li a .label {display: none;}

.image-vtuber {
  z-index: -1;
  top: 0;
  left:0;
  margin-left: auto;
  position: absolute;
  width: 70%; 
  height: 100vh;
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: contain;
}


.description {
  min-width: 15vw;
  top:0;
  margin-top: 10%;
  float: right;
  z-index: 1; 
  width: 40%;
  background-color: rgba(236,236,236, 0.8); 
  font-size: 0.7rem; 
  border-radius: 10%; 
  border: 2px solid white; 
  padding: 1em;
}

.img-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 40%; 
  z-index: -2;
  height: 100vh;
  background-color: rgba(236,236,236, 0.8); 
  transition: all 0.5s ease-out;
}

.bg-full {
  background-position: 100% 100%;
}

.vtname {text-transform: uppercase; font-size:2em; background-color: black; color: white; padding: 5px 0 5px; white-space: nowrap;}

.icons-desc {
  display: flex;
  margin: 0;
  flex-wrap: wrap;
  justify-content: center;
  letter-spacing: 0;
  font-size: small;
  gap: 0.5rem;
}

.icons-desc {
  list-style: none;
  padding-left: 0;
}

.icons-desc svg {
  width: 3vw;
  height: 3vw;

}

.icons-desc li a .label {display: none;}

.small-icons svg {
  width: 2vw;
  height: 2vw;
}

@media screen and (max-width: 1700px) {
  .description {
    font-size: 1vw;
  }

  .image-vtuber {
      background-position: center;
  }
}
@media screen and (max-width: 800px) {
  .description {
    font-size: 2vw;
    position: relative;
    left:0;
    width: 100%;
    margin-top: 60vh;
  }
  .image-vtuber {
    margin: 0;
    width:100%;
    background-position-x: center;
    background-position-y: 0;
    background-size: cover;
    background-color: transparent;
    height:120vh;
  }

  .img-bg {
    bottom: 0;
    width: 100%;
    height: 40%;
  }

  .icons-desc svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .small-icons svg {
    width: 1rem;
    height: 1rem;
  }

  .lift-img {
    margin-top: -200px;
  }

  .lift-img-s {
    margin-top: -100px;
  }
}



/** Main page **/
#divider03 {
  margin-top: 100px;
}

#image01 {
  margin: 0;
  width: 100%;
  background-color: #ececec;
}

#image01 img {
  width: 30rem;
}

#main-inner {
  margin: auto;
  width: 80%;
  padding-bottom: 10rem;
}

#text153 {
  margin-top: 2rem;
}

#text149 {
  margin-bottom: 2rem;
}

#icons50 {font-size: 1.875em;gap: 0.75rem;}
#icons50 li a {height: 1em;width: 1em;transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;}
#icons50 li a svg {height: 100%;width: 100%;transition: fill 0.25s ease;}
#icons50 a svg {fill: #115ff5;}
#icons50 a:hover svg {fill: #ffcc1e !important;}
#icons50 li a + svg {transition: fill 0.25s ease, stroke 0.25s ease;}

@media screen and (max-width: 630px) {
  #image01 img {
    width: 50vw;
  }
  #text153 {
    font-size: 3vw;
  }
  #text149 {
    margin-bottom: 2rem;
  }
  #icons50 li a {height: 5vw;width: 5vw;}
}

/** Preloader **/
#preloader {
  background-color: #115ff5;
  height: 100vh;
  width: 100%;
  position: fixed;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: auto;
}

#preloader img {
  width: 20vh;
  height: 20vh;
  max-width: 300px;
  border-radius: 100%;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	transform: scale(1);
	animation: pulse 2s infinite;
}

.animOut {
  animation: slideshow-background-left 0.5s;
  animation-iteration-count: 1;
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}

@keyframes slideshow-background-left {from {transform: translateX(0);}to {transform: translateX(-100%);}}
@keyframes slideshow-background-right {from {transform: translateX(-25%);}to {transform: translateX(0);}}
@keyframes slideshow-background-up {from {transform: translateY(0);}to {transform: translateY(-25%);}}
@keyframes slideshow-background-down {from {transform: translateY(-25%);}to {transform: translateY(0);}}
@keyframes slideshow-background-in {from {transform: scale(1);}to {transform: scale(2);}}
@keyframes slideshow-background-out {from {transform: scale(2);}to {transform: scale(1);}}


.bgup {
  animation: bgup 1s 1;
}

@keyframes bgup{
  from{
    background-position-y:0% 0%;
  }
  to{
    background-position-y:100% 100%;
  }
};
@-webkit-keyframes bgup{
  from{
    background-position-y:0% 0%;
  }
  to{
    background-position-y:100% 100%;
  }
};