*,:after,:before{
	box-sizing:border-box}

:root{
	--color-text:#fff;
	--color-bg:#000;
	--color-link:#5d9b8e;
	--color-link-hover:#ebf4f0;
	font-size:18px}

body{
	color:var(--color-text);
	background-color:var(--color-bg);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	text-transform:uppercase;
	margin:0;
	padding: 0;
	font-family:ballinger-mono,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}.js .loading:before,.js .loading:after{content:"";
	z-index:1000;
	position:fixed}
	
.js .loading:before{
	width:100%;
	height:100%;
	background:var(--color-bg);
	top:0;
	left:0}

.js .loading:after{
	width:60px;
	height:60px;
	opacity:.94;
	background:var(--color-link);
	border-radius:50%;
	margin:-30px 0 0 -30px;
	animation:.7s linear infinite alternate forwards loaderAnim;
	top:50%;
	left:50%}
	
@keyframes loaderAnim{
	to{opacity:1;
	transform:scale(.5)}}
	
a{color:var(--color-link);
	cursor:pointer;
	outline:none;
	text-decoration:none}a:not(.frame__title-back){white-space:nowrap;
	position:relative;
	overflow:hidden}

a:hover{
	color:var(--color-link-hover);
	outline:none}

a:focus{
	background:#d3d3d3;
	outline:none}

a:focus:not(:focus-visible){
	background:0 0}

	a:focus-visible{background:0 0;
	outline:2px solid red}

.unbutton{font:inherit;
	cursor:pointer;
	background:0 0;
	border:0;
	margin:0;
	padding:0}

.unbutton:focus{
	outline:none}

main{
	height:100vh;
	flex-direction:column;
	display:flex}

.frame{
	color:var(--color-title);
	grid-gap:2rem;
	text-transform:lowercase;
	align-items:start;
	margin-bottom:1rem;
	padding:1rem 2rem;
	font-size:.75rem}
	
.frame a:not(.frame__title-back):before{
	content:"";
	height:1px;
	width:100%;
	transform-origin:0%;
	background:currentColor;
	transition:transform .3s;
	position:absolute;
	top:90%}

.frame a:not(.frame__title-back):hover:before{
	transform-origin:100%;
	transform:scaleX(0)}

.frame__title{
	grid-area:title;
	display:flex}

.frame__title-main{
	font-size:inherit;
	font-weight:inherit;
	margin:0}

.frame__title-back{
	align-items:flex-end;
	display:flex;
	position:relative}

.frame__title-back span{
	display:none}

.frame__title-back svg{
	fill:currentColor}

.frame__prev{
	grid-area:prev;
	align-self:start}

.ascii{
	color:var(--color-link);
	pointer-events:none;
	position:fixed;
	top:-1rem;
	right:0}
	
.content{
	max-width:870px;
	gap:1rem;
	padding:2vh 2rem 0 4vh;
	display:grid}

dt{
	font-weight:700;
	color:#fff !important} 

dd{
	margin:0}

.effects{
	color:#8dcded;
	flex-wrap:wrap;
	gap:1rem;
	margin-top:auto;
	padding:0;
	display:flex}

.effects button{
	color:#61b3dc; 
	white-space:nowrap;
	text-transform:inherit;
	font:inherit;
	cursor:pointer;
	color:var(--color-link);
	text-transform:lowercase;
	background:0 0;
	padding: 0;
	margin: 0 -0.85rem 0 0;
	border:0;
	gap:0;
	font-size: 1rem;
	-webkit-text-size-adjust: 150%;
	text-size-adjust: 150%;
}

.effects  button:hover{
	color:var(--color-link-hover)}

.splitting .words .word{
	white-space:nowrap}

@media screen and (min-width:53em){
	.frame{
	grid-template:"title prev sponsor"/auto auto 1fr;
	justify-content:start;
	display:grid}

.content{
	grid-template-columns:11ch 1fr}}
	
.splitting .word, .splitting .char{
	display:inline-block}

.splitting .char{
	position:relative}

.splitting .char:before, .splitting .char:after{
	content:attr(data-char);
	visibility:hidden;
	-webkit-user-select:none;
	user-select:none;
	transition:inherit;
	position:absolute;
	top:0;
	left:0}

.splitting{
	--word-center:calc((var(--word-total) - 1)/2);
	--char-center:calc((var(--char-total) - 1)/2);
	--line-center:calc((var(--line-total) - 1)/2)}

.splitting .word{
	--word-percent:calc(var(--word-index)/var(--word-total));
	--line-percent:calc(var(--line-index)/var(--line-total))}

.splitting .char{
	--char-percent:calc(var(--char-index)/var(--char-total));
	--char-offset:calc(var(--char-index) - var(--char-center));
	--distance:calc((var(--char-offset)*var(--char-offset))/var(--char-center));
	--distance-sine:calc(var(--char-offset)/var(--char-center));
	--distance-percent:calc((var(--distance)/var(--char-center)))}

.splitting .cells img{
	width:100%;
	display:block}

@supports (display:grid ){
	.splitting .cells{
	visibility:hidden;
	background-size:cover;
	position:relative;
	overflow:hidden}

.splitting .cell-grid{
	background:inherit;
	width:100%;
	height:100%;
	grid-template:repeat(var(--row-total),1fr)/repeat(var(--col-total),1fr);
	display:grid;
	position:absolute;
	top:0;
	left:0}

.splitting .cell{
	background:inherit;
	position:relative;
	overflow:hidden}

.splitting .cell-inner{
	background:inherit;
	visibility:visible;
	width:calc(100%*var(--col-total));
	height:calc(100%*var(--row-total));
	left:calc(-100%*var(--col-index));
	top:calc(-100%*var(--row-index));
	position:absolute}

.splitting .cell{
	--center-x:calc((var(--col-total) - 1)/2);
	--center-y:calc((var(--row-total) - 1)/2);
	--offset-x:calc(var(--col-index) - var(--center-x));
	--offset-y:calc(var(--row-index) - var(--center-y));
	--distance-x:calc((var(--offset-x)*var(--offset-x))/var(--center-x));
	--distance-y:calc((var(--offset-y)*var(--offset-y))/var(--center-y))
  }
}
/* Eigene Modifikationen */
body, html{
    height: 100vh;}

h1 {
    font-size:1.5rem; 
	color:#61b3dc;}

main {
    filter: blur(5px);
    -webkit-filter: blur(5px);
	margin: 0;
	padding: 0;}
        
.ascii {
    opacity: 0.4;
    filter: blur(3px);
    -webkit-filter: blur(3px);}
        
#cont {
      margin: 5em 0 3em 0;}
        
#im {
    position:relative;
    height: 80vh;
    object-fit: fill; 
    margin-right: 0px;}
        
button, a {
	color:#61b3dc; 
    padding:0px;
    margin: 0 0 0 -4px;
	filter:brightness(1);}
        
.bg-text {
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0, 0.75); 
    color: white;
    font-weight: normal;
    border: 3px solid #f1f1f1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 85%;
    letter-spacing: 0.15em;
    padding: 20px;
    text-align: center;}     
.flag {
     filter: brightness(0.75);}
.flag:hover, button:hover {
     filter: brightness(1);} 
#navi {
	white-space:nowrap;
    z-index: 100;
    width: 120px;
    position: absolute;
    left: 0.6vh;
    top: 2vh;
    display: block;}
#aninav {
	color:#fff; 
	padding:0px;
	margin: 0 0 0 4vh;
	font-size: 0.8rem;
	line-height: 1rem;
	text-transform: none;}
.c11{
	font-size: 0.8rem;
	line-height: 1rem;
	margin:  0.5rem 0 0 4vh;
	text-transform: none;}
.c11 a {
	padding: 10px 0 0 0;
	color: #5d9b8e;
	text-shadow: none;}
.c11 a::before {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	padding: 10px 0 0 0 ;
	max-width: 0;
	border-bottom: 2px solid #fff;
	color: #fff;
	content: attr(data-hover);
	-webkit-transition: max-width 0.65s;
	-moz-transition: max-width 0.65s;
	transition: max-width 0.65s;
	white-space: nowrap;}
.c11 a:hover::before,
.c11 a:focus::before {
	max-width: 100%;}