html, body {
		height: 100%;
	}
	
  @font-face {
	  font-family: 'Comfortaa';
	  src: url('https://altato.neocities.org/Comfortaa-Light.ttf') format('truetype');
  }
  
	.container {
		height: 100vh;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		gap: 16px;
		padding: 20px;
		box-sizing: border-box;
	}
	.linkscontainer {
		height: 30vh;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		gap: 16px;
		padding: 20px;
		box-sizing: border-box;
	}
	
	body {
		margin: 0;
		font-family: 'Comfortaa', Tahoma, Geneva, Verdana, sans-serif;
		background: #121212;
		color: #eee;
		transition: 0.3s;
		font-size:2rem;
	}

	html {
		perspective: 2500px;
	}
	
	body.lightmode {
		background: #f5f5f5;
		color: #222;
	}

	body.test {transform: rotateX(10deg)}

  .panel {
	  box-shadow: 0px 0px 35px #ffffff23, 0px 0px 5px #ffffff33;
	  flex-direction: column;
	  gap: 0.35em;
	  --panel-meta-gap: 0.08em;
	  
	 }
	
  .lightmode .panel {
	  box-shadow: 4px 4px 15px #00000033, 0px 0px 5px #00000033;
  }

	.panel, .panel2 {
		padding: 20px;
		border-radius: 2rem;
		background: #1e1e1e;
		transition: transform 0.3s cubic-bezier(.1,.68,.5,1.18), 0.3s;
		border: 5px solid transparent;
		cursor: default;
	
		display: flex;
		align-items: center;      /* függőleges közép */
		justify-content: center;  /* vízszintes közép */
		text-align: center;       /* több sor esetén is szép */
	}

	.panel:active {
		transform: scale(0.95)	
	}
	.panel-title {
		display: block;
	}

	.panel-meta {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--panel-meta-gap);
		width: 100%;
	}

	.panel .nextdate,
	.panel .howmanydays {
		display: block;
		margin: 0;
		line-height: 1;
		font-size: 0.6em;
		opacity: 0.7;
		text-transform: uppercase;
	}

  .panel .howmanydays {
	text-transform: none;
	font-size: 0.5em;
  }
	.panel2 {
		font-size:1.5rem;
		letter-spacing:0.1rem;
		background:#ffffff05
	}
	.panel2 img {margin-right: 0.51rem}

	a {text-decoration:none;color:white}

	body.lightmode a {color:black}

	body.lightmode .panel, body.lightmode .panel2 {
		background: #ffffff;
	}

	/* Állapotok */
	.esedekes {
		border-color: orange;
		border-width: 0.2rem;
		box-shadow: 0 0 1rem 0.2rem orange, inset 0 0 0.5rem 0.2rem rgba(255, 165, 0, 0.54)!important;
		background: #2a1f00;
	}

	.surgos {
		border-color: red;
		border-width: 0.2rem;
		box-shadow: 0 0 1rem 0.2rem red, inset 0 0 0.5rem 0.2rem #ff000088!important;
		background: #3a0000;
	}

	body.lightmode .esedekes {
		background: #fff3cd;
	}

	body.lightmode .surgos {
		background: #f8d7da;
	}