/* CSS by Phil Hoffer */

/* === fonts === */

@font-face
{
 font-family: 'Roboto Mono';
 font-style: normal;
 font-weight: 400;
 src: url('roboto-mono-v22-latin-400.woff2') format('woff2'),
      url('roboto-mono-v22-latin-400.woff') format('woff');
}

@font-face
{
 font-family: 'Roboto Mono';
 font-style: normal;
 font-weight: 600;
 src: url('roboto-mono-v22-latin-600.woff2') format('woff2'),
      url('roboto-mono-v22-latin-600.woff') format('woff');
}



/* === variables  === */

:root
{
 --backgroundmain:	rgb(40,41,38);
 --backgroundcontent:	rgb(50,51,48);
 --backgroundmodal:	rgb(80,82,78);
 
 --text:		rgb(224,227,208);
 --textdark:		rgb(126,128,117);
 --textmodal:		rgb(237,240,221);
 
 --transitionon:	all 150ms;
}



/* === reset === */

html, body
{
 height: 100%;
 background: var(--backgroundmain);
}

html
{
 box-sizing: border-box;
}

*,
*:before,
*:after
{
 box-sizing: inherit;
}



/* general formatting */

html,body,p,a,li,h1,h2,h3,h4,h5,h6 { font-family: "Roboto Mono", "Courier New"; font-weight: 400; color: var(--text); }



/* mitglieder*/

.grid
{
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
 grid-gap: 4px;
}

.grid > div
{
 display: grid;
 cursor: pointer;
}

.grid > div a
{
 position: relative;
}

.grid > div a img
{
 width: 100%;
 filter: grayscale(100%) contrast(130%) sepia(30%);
 transition: var(--transitionon);
}

.grid > div a .alttext
{
 position: absolute;
 bottom: 0;
 right: 0;
 left: 0;
 opacity: 1;
 text-align: left;
 background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.4));
 transition: var(--transitionquick);
}

.grid > div a:hover img
{ 
 filter: grayscale(0%) contrast(110%);
 transition: var(--transitionon);
}

.grid > div a:hover .alttext
{
 background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.45));
 transition: var(--transitionon);
}

.grid > div a .alttext > h5
{
 margin: 52px 10px 8px 14px;
 transition: var(--transitionon);
}

.grid > div a:hover .alttext > h5
{
 margin: 50px 10px 10px 14px;
 text-decoration: underline;
 transition: var(--transitionon);
 color: var(--textmodal);
}

/* heroes */

.grid.heroes
{
 grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}

.grid.heroes > div a img
{
 filter: contrast(100%) sepia(30%);
}

.grid.heroes > div a:hover img
{ 
 filter: contrast(110%);
}

.grid.heroes > div a .alttext
{
 background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.75));
}






#tk
{
 padding: 0 !important;
 margin-top: 32px;
 margin-bottom: 32px;
 background-color: var(--backgroundcontent);
 box-shadow: 0px 4px 33px rgba(0,0,0,0.25);
}

.r-padding
{
 padding: 32px !important;
}

.r-content
{
 padding: 16px 32px 0 !important;
 background-color: var(--backgroundcontent);
}



/* headlines */

h1 { font-size: 53px !important; font-weight: 600; line-height: 40px; margin: 30px 0 15px; }
h2 { font-size: 30px !important; font-weight: 600; line-height: 30px; margin: 20px 0 20px; }
h3 { font-size: 50px !important; font-weight: 600; line-height: 50px; margin: 20px 0 30px; }
h4 { font-size: 22px !important; font-weight: 400; }
h5 { font-size: 22px !important; font-weight: 600; }
h6 { font-size: 19px !important; font-weight: 600; }



/* text */

p
{
 margin: 0 0 12px;
}

p, li
{
 hyphens: auto;
 -moz-hyphens: auto;
 -webkit-hyphens: auto; 
}

p, a, li, li a
{
 font-size: 17px;
 line-height: 1.6em; 
}

a
{
 text-decoration: underline;
}

a:hover
{
 text-decoration: none;
 color: inherit;
}

small
{
 font-size: 70%;
}

small a
{
 font-size: inherit;
}

small a:hover 
{
 color: inherit;
}



/* drinking tea/beer */

.beer {
 text-decoration: line-through;
 position: relative;
}

.beer:after {
 content: 'beer';
 font-size: 90%;
 text-decoration: none;
 position: absolute;
 z-index: 98;
 left: -11px; top: 24px;
 padding: 1px 10px 2px 12px;
 background: var(--textdark);
 box-shadow: 0 3px 15px rgba(0,0,0,0.5);
 transform: rotate(-6deg);
}



/* divider */

.div
{
 width: 100%;
 height: 2px;
 background: var(--textdark);
 margin: 48px 0 48px;
}



/* modal */

aside
{
 z-index: 99;
 display: none;
 position: fixed;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 align-items: top;
 justify-content: center;
 padding-top: 80px;
 background-color: rgba(0,0,0,0.5);
 cursor: pointer;
}

.modal-visible
{ display: flex; }

aside .modal-content
{
 display: flex;
 flex-wrap: wrap;
 position: absolute;
 overflow: auto;
 min-width: 400px;
 max-width: 1100px;
 text-align: left;
 background: var(--backgroundmodal);
 box-shadow: 0 5px 40px rgba(0,0,0,0.75);
 cursor: auto;
 color: var(--textmodal);
}

aside .imageholder
{
 flex: 30%;
}

aside .imageholder img
{
 max-width: 100%;
 min-height: 200px;
 max-height: 100%;
}

aside .text
{
 flex: 70%;
}

aside .text h3
{
 padding: 10px 35px 0;
 color: var(--textmodal);
}

aside .text table.details td:first-child {
 white-space: nowrap;
 font-weight: bold;
 padding-left: 38px;
 padding-right: 20px;
}

aside .text table.details td:last-child {
 padding-right: 35px;
}

aside .text table.details tr:nth-child(odd) 
 {background-color:rgba(0,0,0,0.1)}

aside .text table.details tr:nth-child(even) 
 {background-color:rgba(0,0,0,0.05)}

aside audio
{
 margin-left: 35px; 
 margin-top: 15px;
 width: 100px;
}

audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-timeline-container,
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-timeline,
audio::-webkit-media-controls-volume-slider-container,
audio::-webkit-media-controls-volume-slider,
audio::-webkit-media-controls-seek-back-button,
audio::-webkit-media-controls-seek-forward-button,
audio::-webkit-media-controls-fullscreen-button,
audio::-webkit-media-controls-rewind-button,
audio::-webkit-media-controls-return-to-realtime-button,
audio::-webkit-media-controls-toggle-closed-captions-button
{ display: none; }



.animate-opacity{animation:opac 150ms}
@keyframes opac{from{opacity:0}	to{opacity:1};}

.animate-move{animation:move 250ms}
@keyframes move{from{top: 100px} to{top:80px};}

button
{
 position: absolute;
 top: 0; left: 0;
 width: 45px;
 height: 45px;
 text-align: center;
 color: var(--text);
 background-color: var(--backgroundmodal);
 border: none;
 cursor: pointer;
 box-shadow: 0 4px 12px rgba(0,0,0,0.2);
 transition: var(--transitionquick);
}



aside.modal-hero img
{
 filter: sepia(30%);
}

aside.modal-hero .text table.details td:first-child {
 white-space: normal;
 font-weight: normal;
}




 

/* smaller text and reduced padding on small screens */
@media screen and (max-width: 666px)
{
	aside .modal-content
	 { top: 0; bottom: 0; left: 0; right: 0; margin: 0; max-width: 100%; max-height: 100%;}

	#tk
	{
	 margin-top: 16px;
	 margin-bottom: 16px;
	}

	.r-padding
	{
	 padding: 16px !important;
	}

	.r-content
	{
	 padding: 8px 16px 0 !important;
	}
	
	h1 { font-size: 47px !important; line-height: 35px; margin: 20px 0 10px; }
	h2 { font-size: 26px !important; line-height: 26px; margin: 15px 0 15px; }
	h3 { font-size: 40px !important; line-height: 40px; margin: 10px 0 20px; }
	h4 { font-size: 20px !important; }
	h5 { font-size: 22px !important; }
	h6 { font-size: 19px !important; }
	
	p, a, li, li a
	{
	 font-size: 16px;
	}
	
	aside .text table.details td:first-child {
	white-space: normal;
	}
	
	.animate-move{animation:none}
	@keyframes move{from{top: 100px} to{top:80px};}

}

/* even smaller text and reduced padding on even smaller screens */
@media screen and (max-width: 500px)
{
	
	aside .imageholder,
	aside .text
	 { flex: 100%; } 
	
	#tk
	{
	 margin-top: 0px;
	 margin-bottom: 0px;
	 box-shadow: none;
	}

	.r-padding
	{
	 padding: 16px !important;
	}

	.r-content
	{
	 padding: 8px 8px 0 !important;
	}
	
	h1 { font-size: 38px !important; line-height: 35px; margin: 20px 0 10px; }
	h4 { font-size: 17px !important; }
	
	p, a, li, li a
	{
	 font-size: 15px;
	}
	
	.logo img
	{
	width: 80%;
	}
}