:root {
	--bg-size-half: 798px 478px; /*6384px 3824px; /*calc(1596*4)px calc(956*4)px;*/
	--bg-size-double: 3192px 1912px; /*6384px 3824px; /*calc(1596*4)px calc(956*4)px;*/
	/*--my-gradient: linear-gradient(to bottom, #ff8a00, #da1b60); /* define gradient variable */
	--header-height: 40px;
	--page-width: 963px;
	--footer-height: 32px;
	
	--color-black:						rgb(  0,  0,  0);
	--color-light-black: 				rgb( 32, 32, 32);
	--color-dark-gray: 					rgb( 64, 64, 64);
	--color-medium-gray: 				rgb(128,128,128);
	--color-light-gray: 				rgb(192,192,192);
	--color-dark-white: 				rgb(224,224,224);
	--color-white: 						rgb(255,255,255);
			
	--color-red: 						rgb(220,160,192);
	--color-green: 						rgb(160,220,192);
	--color-blue: 						rgb(160,192,220);
	--color-gray: 						rgb(192,192,192);
	
	--color-transparent-black:			rgba(  0,  0,  0,0.5);
	--color-transparent-light-black: 	rgba( 32, 32, 32,0.5);
	--color-transparent-dark-gray: 		rgba( 64, 64, 64,0.5);
	--color-transparent-medium-gray: 	rgba(128,128,128,0.5);
	--color-transparent-light-gray: 	rgba(192,192,192,0.5);
	--color-transparent-dark-white: 	rgba(224,224,224,0.5);
	--color-transparent-white: 			rgba(255,255,255,0.5);
	
	--color-transparent-red: 			rgba(220,160,192,0.5);
	--color-transparent-green: 			rgba(160,220,192,0.5);
	--color-transparent-blue: 			rgba(160,192,220,0.5);
	--color-transparent-gray: 			rgba(192,192,192,0.5);
}

@font-face { font-family: custom-font; src: url('/font.ttf'); } 


/*
html, body
{
	margin: 0;
	padding: 0;
	
	font-family: courier new, verdana, tahoma, arial;
	
	width: 100%;
	height: 100%;
	
	overflow: hidden;
}
html 
{ 
	background: url(images/bg.png) no-repeat top center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	
	color: #fff;
	image-rendering: pixelated;
}
*/

*
{
	font-family: custom-font, courier new, verdana, tahoma, arial;
}

html
{
    /*background: black;*/
    inset:0;
    padding:0;
    margin:0;
    width:100%;
    height:100%;
	
	
	
	background: url(images/bg.png) no-repeat top center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	
	color: #fff;
	image-rendering: pixelated;
}

body
{
    min-height:100vh;
    display:grid;
    place-items:center;
    inset:0;
    margin:0;
}
body::before
{
    content:'';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    z-index: -1;

    /*background:linear-gradient(0.125turn, #3f87a6, #ebf8e1, #f69d3c);*/
	background-color: black;
}

a
{
	text-decoration:none;
	color:var(--color-dark-white);
}



/* Basic */
@-ms-viewport {
	width: device-width;
}

@media screen and (max-width: 480px) {

	html, body {
		min-width: 320px;
	}

	#logout
	{
		width:8rem;
	}
	
	
}





#page
{
	width: var(--page-width);
	min-height: 100%;
	
	display: flex;
	flex-direction:column;
	
	/*background-color: rgba(255,255,255,0.1);*/
}

@media screen and (max-width: 480px) {
	#page
	{
		width: 100%;
	}
}

#header
{
	display:flex;
	flex-direction:row;
	/*height: 4rem;*/
	width:calc(100% - 4rem);
	margin:2rem 2rem 2rem 2rem;
}

#info
{
	margin-top:auto;
	margin-bottom:auto;
	padding: 0 1rem;
	font-size:2rem;	
}





#link-bar
{
	padding: 0 1.25rem;
}
#link-bar > .button-bar
{
	display:flex;
	flex-direction:row;
	gap: .1rem;
	
	margin-top:.1rem;
	margin-bottom:.1rem;
}
#link-bar > .button-bar > form > .button
{
	--background-color:transparent;
    --foreground-color:var(--color-light-gray);
    --hover-foreground-color:var(--color-light-black);
    --border-color:var(--color-light-gray);
    --border-size:.1rem;
    --edge-size:.25rem;
	--padding-vertical:.25rem;
	--padding-horizontal:.25rem;
	
	font-size:.9rem;
	width:unset;
}





#footer
{
	text-align: center;
}






.fill
{
	flex-grow:1;
}






.line
{
	--space-horizontal:1rem;
	--height:0.1rem;
	
	height:var(--height);
	width:calc(100% - (2 * var(--space-horizontal)));
	background-color: white;
	margin-left: var(--space-horizontal);
	margin-right: var(--space-horizontal);
}














#actions
{
	margin-top:4rem;
	margin-bottom:2rem;
	width: 100%;
	display: flex;
	flex-direction:row;
}











/* customize buttons */
.button,
.button-single,
.button-first,
.button-last
{
	width:12rem;
}

.button-bar
{
}

.hidden
{
	visibility:hidden;
}

#login
{
	--background-color:transparent;
    --foreground-color:var(--color-green);
    --hover-foreground-color:#222;
    --border-color:var(--color-green);
    --border-size:.1em;
    --edge-size:.5em;
}
#logout
{
	--background-color:transparent;
    --foreground-color:var(--color-red);
    --hover-foreground-color:#222;
    --border-color:var(--color-red);
    --border-size:.1em;
    --edge-size:.5em;

}

#column
{
	display:flex;
	flex-direction:column;
	gap: 1rem;
}
#column > form > button
{
	width:15rem;
}