:root{
	--topbarheight:100px;
	--totalpics:4;
	font-family:Sans-Serif;
	--lettercount:18;
	user-select:none;
    --greyCOL:#777777;
    --mainCOL:#ff0000;
    --darkmainCOL:#880000;
    --highlightCOL:#ffffff;
    --sidebuttonsCOL:#FF6347;
    --unimportantCOL:#ffcccc;
    --textCOL:#000000;
    --commentshadowCOL:#ddaaaa;

    /*--greyCOL:#777777;
    --mainCOL:#00ffff;
    --darkmainCOL:#88ffff;
    --highlightCOL:#000000;
    --sidebuttonsCOL:#00acb9;
    --unimportantCOL:#003333;
    --textCOL:#ffffff;
    --commentshadowCOL:#225555;*/

    background-color:var(--highlightCOL)
}

i{
    opacity:0.5;
}

#comments i{
    opacity:1;
}

a, a:hover, a:focus, a:active {
      text-decoration: none;
      color: inherit;
    cursor:pointer;
}

#mailinglist{
	display:none;
}

#article a {
    color:#ff4444;
}
#article a:visited {
    color:#aa00aa;
}
#article a:hover {
    color:#ff4444;
    font-weight:bold;
}

#signuperror{
	font-size:2em;
	color:var(--mainCOL);
}

#text > img{
    max-width:var(--articlewidth);
    max-height:300px;
    transform:translateX(-50%) translateX( calc( var(--articlewidth)/2 ) );
}

li {
    transform:translateX(30px);
}

.side_buttons{
	--h:max(min(100px,calc((100vh - 10px - var(--topbarheight)) / 4 - 10px) ) , 60px);
	background-color:var(--mainCOL);
	width:calc(var(--h) * 2.5);
	height:var(--h);
	border-radius:calc(var(--h)/2);
	transform:translate(calc(-1.2 * var(--h)),0);

	transition: transform 0.1s;
}

.side_buttons > div{
	color:var(--highlightCOL);
    position:absolute;
	top:50%;
	left:100%;
	text-wrap: wrap;
	transform:translate(calc(-100% - 20px),-50%);
	font-size:calc(var(--h) * 0.3);
	font-style:italic;
}

.side_buttons > .preview{
	font-weight:bold;
}
.side_buttons > .text{
	opacity:0;
}
.side_buttons:hover > .preview{
	opacity:0;
}

.side_buttons:hover > .text{
	opacity:1;
}

.side_buttons:hover{
	background-color:var(--sidebuttonsCOL);
	transform:translate(calc(-0.6 * var(--h)),0);
}

.divfill{ 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;

  z-index: 1;

  /* fixes overlap error in IE7/8, 
     make sure you have an empty gif */
  background-image: url('empty.gif');
}   


#comments {

    width:calc(var(--articlewidth) - 40px);
	min-height:100px;
	box-shadow: -20px 0px var(--commentshadowCOL);
	border-radius:10px;
	padding:10px;
	transform:translate(20px);
    background-color:var(--unimportantCOL);
}

#side_wrapper{
	position: fixed;
    top:calc(var(--topbarheight) + 10px);
    display:flex;
    gap:10px;
    flex-direction:column;
    left:0px;
}

#bigflex{
	position:absolute;
	left:200px;
	display:flex;
	top:calc(var(--topbarheight) + 50px);
	flex-direction:column;
	gap:40px;
}
#article{
	position:absolute;
	--articleX:200px;
	left:var(--articleX);
	display:flex;
	top:calc(var(--topbarheight) + 50px);
	flex-direction:column;
	gap:40px;
	--articlewidth:calc(100vw - var(--articleX) - 100px);
	width:var(--articlewidth);
	user-select:text;
}
#text{
	box-shadow: -3px 0px #eeeeee;
	padding-left:10px;
    color:var(--textCOL);
}

#topbar{
	position:absolute;
	width:100%;
	background-color:var(--darkmainCOL);
	top:0px;
	left:0px;
	height:var(--topbarheight);
	text-align:center;
	color:var(--highlightCOL);
	font-size:2em;
	overflow:none;
	--nsig:100px;
	--letterspace:calc(var(--nsig) * var(--ndif));
	--timingbase:0.5s;
	--timingdif:0.15s;
	animation: 1s huddle;
	animation-delay:calc(var(--timingbase) + var(--lettercount) * var(--timingdif) + 0.5s);
	animation-fill-mode:forwards;
    --topbarwidth:600px;
	clip-path:polygon(0 0, 0 var(--topbarheight), var(--topbarwidth) var(--topbarheight), calc(var(--topbarwidth) + 100px) 0);
}
.scarypics {
	position:absolute;
	left:0px;
	top:0px;
	height:calc(var(--topbarheight) - 10px);
	width:100%;
	--hold:calc(var(--holdN) * 1s);
	--change:calc(var(--changeN) * 1s);
	--totalAnimTime:calc(var(--hold) * var(--totalpics));
	--holdN:2;
	--changeN:0.2;
	--totalAnimN:calc(var(--holdN) * var(--totalpics));
}

input{
    width:calc(100% - 10px);
    font-size:inherit;
    height:40px
}

button{
    outline: none;
    border:none;
    color:var(--highlightCOL);
    background-color:var(--mainCOL);
    font-weight:bold;
    font-size:20px;
    border-radius:20px;
    padding:10px;
    width:50%;
    text-align:center;

	cursor:pointer;
}

button:active{
    color:var(--mainCOL);
    background-color:var(--highlightCOL);
}

input::placeholder{
    font-style: italic;
}

#date{
    font-size:0.3em;
    font-weight:thin;
    font-style: italic;
}

.scarypics > div{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	opacity:0;
	animation: var(--totalAnimTime) picfade infinite linear(1 0%, 1 calc(100% * var(--holdN) / var(--totalAnimN)), 0 calc(100% * (var(--holdN) + var(--changeN)) / var(--totalAnimN)), 0 calc(100% * (1 - var(--changeN) / var(--totalAnimN)) ), 1 100%) calc(var(--hold) * var(--n)), var(--totalAnimTime) picslide infinite linear calc(var(--change) * -1);
	z-index:calc(0 - var(--n));
}
.scarypics > p{
	position:absolute;
	left:calc(50% + 250px);
	top:calc(var(--topbarheight) / 2 - 50px);
	color:var(--highlightCOL);
	font-size:2em;
	transform:translate(-50%,-10px);
	opacity:0;
	animation: var(--totalAnimTime) picfade2 infinite linear(1 0%, 1 calc(100% * var(--holdN) / var(--totalAnimN)), 0 calc(100% * (var(--holdN) + var(--changeN)) / var(--totalAnimN)), 0 calc(100% * (1 - var(--changeN) / var(--totalAnimN)) ), 1 100%) calc(var(--hold) * var(--n)), var(--totalAnimTime) picslide infinite linear calc(var(--change) * -1);
	z-index:1;
}


@font-face {
    font-family: 'Courier';
    src: url('Courier.ttf');
    font-weight: normal;
    font-style: normal;
}

@keyframes picfade{
  	from {opacity:0;}
	to {opacity:0.2;}
}
@keyframes picfade2{
  	from {opacity:0;}
	to {opacity:1;}
}
@keyframes picslide{
  	from {background-position-x: 0px; background-position-y: 0px;}
  	from {background-position-x: 200px; background-position-y: 200px;}
}


@property --t {
	syntax: '<number>';
	initial-value: 0;
	inherits: false;
}
@property --ndif {
	syntax: '<number>';
	initial-value: 0.25;
	inherits: true;
}

@keyframes slidein{
  	to {--t: 1;}
}

@keyframes huddle{
  	to {--ndif: 0.2;}
}

.title {
	position:absolute;
	--goalT:calc(var(--n) * var(--ndif));
	--T:calc(-1 + (var(--goalT) + 1) * var(--t));
	left:calc(-1 * var(--nsig) * var(--T) + var(--topbarwidth) / 2 + (var(--lettercount)) * var(--letterspace) / 2);
	--gradient:calc(cos(var(--T) * 3 )  * 1 * (1 - var(--t)));
	top:calc(sin(var(--T) * 3 ) * (1 - var(--t)) * 10px + 20px - 50px + var(--topbarheight) / 2);
	overflow:hide;
	animation: calc(var(--timingbase) + var(--n) * var(--timingdif)) slidein cubic-bezier(.83,.22,.83,.22);
	animation-fill-mode:forwards;
	transform:skewY(atan(var(--gradient))) translate(-50%, -50%);
	display:flex;
	font-family:Courier;
	font-weight:900;
    color:var(--highlightCOL);
}

#commenthide{
    width:var(--articlewidth);
}


#minitext{
    font-size:0.7em;
    font-style:italic;
}

@media (max-width:1000px){
	.scarypics {
		display:none;
	}
}
@media (min-aspect-ratio:5/4){
	#bigflex{
		flex-direction:row;
	}
	#article{
		--articlewidth:min(calc(100vw - 600px),1000px);
	}
	#previewtab{
		--previewtabwidth:min(20vw);
		grid-template-columns:100%;
		width:var(--previewtabwidth);
		position:absolute;
		top:0px;
		left:calc((100vw - var(--articleX)) / 2 + (var(--articlewidth)) / 2);
		transform: translateX(-50%);
	}
	.previewwrapper{
		width:var(--previewtabwidth);
	}
}

@media (max-aspect-ratio:3/4){
	/* all previews are fit to appear once in each row */
	.previewwrapper{
		width:var(--previewtabwidth);
	}
	#previewtab{
		grid-template-columns:var(--previewtabwidth);
	}
}

@media (max-device-aspect-ratio:2/3){
	/* mobile settings, ie move the side buttons to the top and move some other stuff to compensate */
    :root{
        --topbarheight:200px;
    }
    #side_wrapper{
	    position: absolute;
        left:5px;
        flex-direction:row;
    }
    .side_buttons{
        width:calc(25vw - 10px);
        transform:translate(0px, 0px);
        transition: height 0.1s;
    }
    .side_buttons:hover{
        height:calc(var(--h) + 30px);
        transform:translate(0px, 0px);
    }
    .side_buttons > div {
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        text-align:center;
    }
    .side_buttons > .preview{        
        font-size:5vw;
    }
    #article{
        left:40px;
        --articlewidth:calc(100vw - 100px);
        top:calc(var(--topbarheight) + 200px);
        font-size:30px;
        
    }
    button{
        font-size:40px;
    }
    #text{
	    box-shadow: -10px 0px #eeeeee;
        padding-left:20px;
        font-size:40px;
    }
    #comments{
        left:0px;
        width:calc(100% - 20px);
        padding:30px;
        font-size:30px;
        transform:none;
    }
    input{        
        font-size:30px;
    }
    .scarypics > p{
        display:none;
    }
    h1{
        font-size:80px;
    }
    #comments > h1{
        font-size:50px;
    }
    .title{
        font-size:5vw;
    }
    #topbar{
        --ndif:0.5;   
        --topbarwidth:80vw;
    }
    @keyframes huddle{
      	to {--ndif: 0.35;}
    }
}