@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');

* {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	box-sizing:border-box;
	transition:0.2s;
}

::selection {
	color:#d99e4a;
	background:white;
}

::-webkit-scrollbar {
	width:3px;
	height:3px;
	background:white;
}

::-webkit-scrollbar-thumb {
	background:#BBB4AC; 
}

body {
	font-family:arial;
	font-size:12px;
	text-align:center;
	text-shadow:1px 1px 1px rgba(255,255,255,.5);
	line-height:15px;
	display:flex;
	justify-content:center;
	align-items:center;
	height:100vh;
	background:url("background.jpg");
	background-size:cover;
	background-position:top left;
}

a, b, u {
	color:#a87a3a;
	text-decoration:none;
}

u { border-bottom:1px solid #d99e4a; }

strong { font-weight: 700; }

em {
    font-size:11px;
    font-style:normal;
}

h1 {
	color:#d99e4a;
	text-align:center;
	text-transform:uppercase;
	text-shadow:1px 1px 0 white;
	font-weight:200;
	font-size:10px;
	letter-spacing:2px;
	padding:5px;
	background:#F5F4EF;
	border-radius:12px 12px 0 0;
}

h2 {
  color:rgba(0,0,0,.4);
  font-size:10px;
  text-transform:uppercase;
  text-align:right;
  letter-spacing:2px;
  border-bottom:1px solid rgba(0,0,0,.1);
  margin-bottom:5px;
}

main {
	width:900px;
	height:700px;
	backdrop-filter:blur(20px);
	background:rgba(255,255,255,.3);
	border-top:1px solid rgba(255,255,255,.5);
	border-left:1px solid rgba(255,255,255,.5);
	border-right:1px solid rgba(0,0,0,.3);
	border-bottom:1px solid rgba(0,0,0,.3);
	border-radius:15px;
	padding:20px;
	display:flex;
	flex-wrap:wrap;
	gap:20px;
}

section { 
	overflow:auto;
	height:660px;
	flex:2.9;
}

nav {
	overflow:auto;
	flex:1.1;
}

nav a {
	display:block;
	flex: 0 0 calc(50% - 1px);
	margin:1px 0 0 1px;
	background:rgba(255,255,255,.5);
	padding:3px 6px;
	text-transform:uppercase;
	text-align:left;
	text-shadow:none;
	font-size:8px !important;
	letter-spacing:1.1px;
	border-radius:3px;
}

nav a:hover { 
	color:white; 
	background:#f6bf70;
	transition:0.1s;
}

.counter { position:relative; z-index:2; background:none; text-align:center; margin-top:-45px; margin-bottom:20px; }

.tab {
	display: none;
}

#df_tabs {
	flex:3;
	text-align:justify;
}

#df_tabs:not(:has(:target)) #index {
	display: block;
}

#df_tabs :target {
	display: block;
}

.round {
	border-radius:100%;
}

.profil-eintrag {
	display:flex;
	gap:10px;
	align-items:flex-start;
	margin-bottom:3px;
}

.profil-eintrag .frage {
	width:120px;
	flex-shrink:0;
  background:rgba(229,210,183,.3);
	padding:3px 0 5px 3px;
	border-radius:3px;
}

.profil-eintrag .antwort {
	flex: 1;
	padding:5px 2px;
}

.konzert-liste {
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin-top:20px;
}

.konzert-spalte {
	width:49%;
}

.konzert-spalte p {
	padding:10px;
}

p:nth-child(odd), .konzert-spalte p:nth-child(odd) {
  background:rgba(229,210,183,.3);
}
	
.konzert-spalte p:nth-child(even) {
	background:rgba(255,255,255,.5);
}

.box {
    border-radius:0 0 12px 12px;
    background:rgba(255,255,255,.5);
    padding:15px;
}

.polaroid {
    background: linear-gradient(to bottom right, rgba(244, 244, 244, 1) 0%, rgba(248, 248, 248, 1) 100%);
    border-radius:5px;
    padding:15px;
    filter:drop-shadow(4px 4px 3px rgba(84,80,76,.1));
    text-align:center;
    
    a { 
      color:#171730;
      text-transform:lowercase;
      text-shadow:-1px -1px 0 white;
      font-size:25px;
      font-family:"Shadows Into Light", cursive;
      font-weight:lighter;
      font-style:normal;
    }
}

textarea, input {
	padding:5px 10px;
	width:100%;
	background:white;
	font-size:8.5px;
}

.cursor-test {
  width:32%;
  height:100px;
  text-align:center;
  line-height:100px;
  background:rgba(229,210,183,.3);
  border:1px solid rgba(229,210,183,.8);
  border-radius:5px;
}