*{
  transition-duration:250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  scroll-behavior: smooth;
}
body,html{
  margin:0;
  padding:0;
  font-family: 'Open Sans', sans-serif;
  height:100%;
}
.slop{position:absolute;right:0;top:0;}
.FUCKHUEG{
  font-size:24pt;
  margin:0;
}
section{
  padding: 20pt 5px;
  padding-top: 10pt;
}
flex { 
  display: flex;
  flex-wrap: wrap;
  gap: 8pt;
}
section#moar flex, section#contact flex{
  justify-content: center;
}
section#contact>flex>div{
  justify-content: center;
  max-width:262pt;
}
section#contact h3 { margin:0 }
hr{ border:none; border-bottom: 1px solid rgba(255,255,255,0.25)}
section#contact, section#var{
  background: #000;
  color: white;
  height:fit-content;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.15), 0 -1px 0 0 black, 0 -5px 5px 0 rgba(0,0,0,0.5);
}
section#var{
  background:#0a0a0a;
}
#var div{
  width:25rem;
  text-align:center;
}
#var flex{
  max-width:100rem;
  margin:auto;
  justify-content:center;
}
section#var div, section#contact div.button{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), 0 0 0 1px black, 0 5px 5px 0 rgba(0,0,0,0.5);
  background: #111;
  border-radius: 8px;
  padding: 10pt;
  font-size: 1.5rem;
  margin:4pt 0;
}
section#contact li>p{
  font-size:24pt;
}
section#gallery{
  background: url('/img/header/1-blur.png');
  background-size: cover;
  background-position: center bottom;
  background-attachment: fixed;
  color: white;
  height:25%;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.15);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-color: rgba(0,0,0,0.25) transparent;
}
section#gallery img{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), 0 0 0 1px black, 0 5px 5px 0 rgba(0,0,0,0.5);
  border-radius:8pt;
  height:100%;
  width:auto;
  margin:0 4pt;
}
section#header{
  background: url('/img/header/1-alt.webp');
  background-size: cover;
  background-position: center bottom;
  background-attachment: fixed;
  min-height:calc(100% - 24rem);
  height:fit-content;
  color:white;
}
section#header{
  padding:12rem 8rem;
}
li::marker{display:none}
section h1 {
  text-align: center;
  font-size: 4rem;
  font-weight: 300;
}
section#header > h1 {
  padding:0;margin:0;
}
section#header>h2 {
  text-align: left;
  font-size: 3rem;
  font-weight: 500;
  margin-bottom:0;
  margin-top:.5em;
}
section#header>h3 {
  text-align: left;
  font-size: 2rem;
  font-weight: 300;
  margin:0;
}
section#header div {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
  background:#fff;color:black; 
  background-size: cover;
  background-position: center bottom;
  background-attachment: fixed;
  border-radius: 20px;
  padding: 10pt;
  font-size: 1.5rem;
}
section#header div>h2{
  margin:0;
  font-size: 2rem
}
section#header div.button>h2{
  margin:0;
  font-weight:400;
  font-size: 1.5rem
}

section#moar {
  background: url('/img/header/2-blur.png');
  background-size: cover;
  background-position: center bottom;
  background-attachment: fixed;
  color: white;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.15), 0 -1px 0 0 black;
}
section#moar > flex > div {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), 0 0 0 1px black, 0 5px 5px 0 rgba(0,0,0,0.5);
  border-radius: 8px;
  padding: 10pt;
  background: rgba(0,0,0,0.75); 
}
h2{margin:0;}
a{
  color:#fff;
}
section#header div.button{background:#000;padding:5pt;}
section#header div.button>h2{font-size:1.75rem}
div.honkoloid{
  background:white !important;color:#3A4050;
  text-shadow:none!important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), 0 0 0 1px #3A4050 !important;
}
div.honkoloid a{
  color:inherit;text-shadow:none;
}
section#moar h2{font-weight:500;}
section#header div.button>h2>a{
	text-decoration:none;
}
section#header div.button:hover{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), 0 0 0 1px black, 0 0px 5px 5px rgba(42,123,222,0.75), inset 0px 0px 0px 1312px rgba(42,123,222,0.75);
}