:root{
	  --bg:#f3f4f6;
	  --note-bg:#fff8b5;
	  --note-shadow: 0 8px 18px rgba(0,0,0,0.12);
	  --accent:#333;
	}
	html,body{height:100%;margin:0;font-family:Helvetica, Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
	body{
	  color:var(--accent);
	  display:flex;
	  align-items:flex-start;
	  justify-content:center;
	  padding:40px 20px;
	  box-sizing:border-box;
	}
	
	@media (max-width:480px){
		body {
	 		padding: 12px;
			padding-bottom: 48px;
			height: auto;
			transform: none !important;
		}
	}

	.wrap{
	  width:1100px;
	  max-width:100%;
	}
	
	@media (max-width:480px){
		.wrap > br {
			display: none;
		}
	}

	header{
	  display:flex;
	  justify-content:space-between;
	  align-items:center;
	  margin-bottom:18px;
	}
	
	@media (max-width:480px){
		header {
	  		margin-bottom: 12px;
		}
	}

	h1{font-size:20px;margin:0 0 4px 0}
	p.sub{margin:0;color:#666;font-size:13px}

	.board{
	  display:grid;
	  grid-template-columns:repeat(3, 1fr);
	  gap:18px;
	  align-items:start;
	}

	/* responsive */
	@media (max-width:900px){
		.board{
			grid-template-columns:repeat(3,1fr);
			gap: 8px;
        	padding: 0 8px;
		}
	}
	@media (max-width:480px){
		.board{
			grid-template-columns:repeat(2,1fr);
			gap: 8px;
		}
	}

	.note{
	  position:relative;
	  width:100%;
	  /* maintain square using padding trick */
	  background:transparent;
	  perspective:1000px;
	  cursor:default;
	  user-select:none;
	  height:0;
	  padding-top:100%;
	  transform-origin:center;

	}

	.note-inner{
	  position:absolute;
	  inset:0;
	  transition:transform .8s cubic-bezier(.2,.9,.3,1);
	  transform-style:preserve-3d;
	}

	.note-face{
	  position:absolute;
	  inset:0;
	  /*border-radius:8px;
	  box-shadow:var(--note-shadow);*/
	  backface-visibility:hidden;
	  display:flex;
	  align-items:center;        /* vertikalno centrirano */
	  justify-content:center;    /* horizontalno centrirano */
	  padding:18px;
	  box-sizing:border-box;
	  overflow:hidden;
	  word-wrap:break-word;
	  background:var(--note-bg);
	  /*border:1px solid rgba(0,0,0,0.06);*/
	}

	@media (max-width:900px){
		.note-face{
			padding: 8px;
		}
	}

	.front{
	  transform:rotateY(0deg);
	}
	.back{
	  transform:rotateY(180deg);
	  position:absolute;
	  top:0;left:0;
	}

	.flipped .note-inner{
	  transform:rotateY(180deg);
	}

	.note-content{
	  font-size:15px;
	  line-height:1.1;
	  color:#fff;
	  text-align:center;
	  display:flex;
	  align-items:center;
	  justify-content:center;
	  padding:6px;
	  word-break:break-word;
	  white-space:pre-wrap;
	  width:100%;
	  height:100%;
	  box-sizing:border-box;
	}

	@media (max-width:900px){
		.note-content{
			font-size: 3.2vw !important;
			padding: 2px;
		}
	}
	@media (max-width:480px){
		.note-content{
			font-size: 4.3vw !important;
			padding: 2px;
		}
	}

	/* Note color classes (use these on .note-face) */
	.note-color-1{ background: #B1ABE9; }
	.note-color-2{ background: #FF8FC9; }
	.note-color-3{ background: #ea3007; }
	.note-color-4{ background: #E8E4BF; }
	.note-color-5{ background: #BA9E6C; }
	/* text color per background for contrast */
	.note-color-1 .note-content { color: #fff; }
	.note-color-2 .note-content { color: #fff; }
	.note-color-3 .note-content { color: #fff; }
	.note-color-4 .note-content { color: #ea3007; }
	.note-color-5 .note-content { color: #fff; }
  /* counter in modal */
	.char-counter{
	  margin-top:8px;
	  font-size:13px;
	  color:#555;
	  display:flex;
	  justify-content:flex-end;
	  gap:6px;
	  align-items:center;
	}
  /* little pin / tape look */
   
	/* Title bar with button */
	.controls{
	  display:flex;
	  gap:12px;
	  align-items:center;
	}
	
	@media (max-width:480px){
		.controls {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 100;
			background-color: #fff;
			text-align: center;
			padding: 8px;
			justify-content: center;
		}
	}

	.btn{
	  background: #fb2e00;
		color: #fff;
		padding: 10px 14px;
		/* border-radius: 8px; */
		border: 0;
		cursor: pointer;
		font-weight: 600;
		font-size: 19px;
		width: 150px;
		text-align: center;
	}
	
	@media (max-width:480px){
		.btn {
			padding: 8px 12px;
			font-size: 14px;
			width: 128px;
		}
	}
	.btn.secondary{
	  background:#fff;
	  color:#111;
	  border:1px solid rgba(0,0,0,0.06);
	}

	/* Modal */
	.modal-backdrop{
	  position:fixed;
	  inset:0;
	  background:rgba(0,0,0,0.45);
	  display:flex;
	  align-items:center;
	  justify-content:center;
	  z-index:2000;
	  padding:20px;
	  opacity:0;
	  visibility:hidden;
	  pointer-events:none;
	  transition: opacity 240ms ease, visibility 240ms ease;
	}
	.modal-backdrop.show{
	  opacity:1;
	  visibility:visible;
	  pointer-events:all;
	}
	.modal{
	  background:white;
	  width:680px;
	  max-width:100%;
	  border-radius:0px;
	  box-shadow:0 26px 60px rgba(2,6,23,0.35);
	  padding:18px;
	  position:relative;
	  transform: translateY(8px) scale(.99);
	  opacity:0;
	  transition: opacity 240ms ease, transform 240ms ease;
	}
	/* when backdrop is visible, animate modal into place */
	.modal-backdrop.show .modal{
	  transform: translateY(0) scale(1);
	  opacity:1;
	}
	.modal header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
	.modal h2{margin:0;font-size:18px}
	.modal .close{
	  background:transparent;border:0;font-size:20px;cursor:pointer;color:#666;padding:6px;
	}
	.modal textarea{
	  width:100%;
	  min-height:140px;
	  resize:vertical;
	  padding:12px;
	  box-sizing:border-box;
	  font-size:16px;
	  border-radius:0px;
	  border:2px solid rgba(0,0,0,0.08);
	  transition: border-color .12s ease, box-shadow .12s ease;
	  font-family:Helvetica, Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	}
	.modal textarea:focus{
	  outline:none;
	  border-color: #fb2e00; /* rdeča ob fokusu */
	  /*box-shadow: 0 8px 20px rgba(251,46,0,0.12);*/
	}
	.modal .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
	.modal .message{
	  padding:18px 0;
	  font-size:16px;
	  color:#0b1220;
	 
	}

	/* scattered look: we will add small translations + rotations inline from JS */
	.shadow-under{
	  position:absolute;
	  inset:auto 8px 8px 8px;
	  height:10px;
	  border-radius:50%;
	  filter:blur(8px);
	  background:rgba(0,0,0,0.06);
	  z-index:0;
	  transform-origin:center;
	}
	.logo {
		width: 15%;
	}

	.title {
		width: 50%;
		position: relative;
		top: -1.97vw;
		left: 1.97vw;
	}
	@media (min-width: 1100px) {
		.title {
			top: -26px;
		}
	}
	
	@media (max-width:480px){
		.logo {
			width: 18%;
		}
		.title {
			width: 76%;
    		top: -1.4vw;
		}
	}

	.kulturne-zaobljube {
		width: 54%;
		position: relative;
		top: -10px;
		z-index: 20;
	}
	
	/* Small devices (večji telefoni) */
	@media (min-width: 576px) {
		.kulturne-zaobljube {
			width: 44%;
			position: relative;
			top: -30px;
			z-index: 20;
		}
		.title {
			width: 50%;
		}
	}
	
	/* Medium devices (tableti) */
	@media (min-width: 768px) {
	  .kulturne-zaobljube {
		  width: 44%;
		  position: relative;
		  top: -30px;
		  z-index: 20;
	  }
	}
	
	/* Large devices (laptopi) */
	@media (min-width: 992px) {
	  .kulturne-zaobljube {
		  width: 34%;
		  position: relative;
		  top: -30px;
		  z-index: 20;
	  }
	}
	
	/* Extra large devices (večji monitorji) */
	@media (min-width: 1200px) {
	  .kulturne-zaobljube {
		  width: 34%;
		  position: relative;
		  top: -30px;
		  z-index: 20;
	  }
	}
	
	/* XXL (ultra wide monitorji) */
	@media (min-width: 1400px) {
	  .kulturne-zaobljube {
		  width: 34%;
		  position: relative;
		  top: -30px;
		  z-index: 20;
	  }
	}

	/* page entrance: fade/slide-in when everything (images etc.) naloženo */
   body {
	 opacity: 0;
	 transition: opacity .6s ease, transform .6s ease;
   }
   body.loaded {
	 opacity: 1;
	 transform: translateY(0);
   }