body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    background-color: rgb(56, 62, 66);
}

h1 { margin: 0.5rem; text-align: center }

h1 a { text-decoration: none; color: #ccc; font-weight: bold }

.montserrat-naslov {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
	color: #ccc;
}

.main-display {
    text-align: center;
    margin-bottom: 20px;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
		white-space: pre-line;
}

.vstop { padding-top: 4px !important; padding-bottom: 4px !important; }

.main-display p {
		text-align: left;
}

.sredina {
		margin: 4px !important;
		padding: 0 !important;
		text-align: center !important;
		font-size: 1em !important;
}

#main-image {
    max-width: 600px;
    height: auto;
    display: block;
    margin: 0 auto 10px;
    border-radius: 4px;
}

#description-text {
    font-size: 1.2em;
    color: #555;
    padding: 0 20px;
    max-width: 600px;
    margin-top: 15px;
}

.sredina {
		margin: 4px !important;
		padding: 0 !important;
		text-align: center !important;
		font-size: 1em !important;
}

.thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 350px;
    margin-top: 20px;
}

.thumbnail-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 350px;
    margin-top: 20px;
}

.thumbnail {
    width: 100%;
    height: auto;
    cursor: pointer;
    border-radius: 4px;
    border: 2px solid transparent;
    transition: transform 0.2s, border-color 0.2s;
}

.thumbnail:hover, .thumbnail:active {
    transform: scale(1.05);
    border-color: rgb(120, 126, 132);
}
																													 
.thumbnail-grid-2 p {
		font-size: 1.2em;
		margin-top: -1.5em;
		position: relative;
		z-index: 100;
		color: #cc9;
		text-align: center;
		text-decoration: none;
		text-shadow: 2px 1px 0 #333333;
		margin-bottom: 0;
}

.thumbnail-grid-2 a {
		text-decoration: none;
		margin: 0;
}

/* Phone portrait only (keeps landscape unchanged) */
@media (max-width: 400px) and (orientation: portrait) {

  /* Let the main card and content use full width without side scroll */
  body {
    align-items: stretch;     /* so children can be 100% width */
    justify-content: flex-start;
    min-height: auto;         /* allow the page to scroll naturally */
  }

  .main-display {
    margin: 0 12px 12px;         /* ← left/right gutters */
    width: calc(100% - 24px);    /* ← prevents horizontal overflow */
    box-sizing: border-box;
		border-radius: 0;
  }

  /* make sure the image respects the card width */
  #main-image {
    display: block;
    width: 100%;
    height: auto;
  }

  /* a little breathing room for the paragraph */
  #description-text {
    margin-top: 4px;
  }

	.sredina {
			margin: -16px 4px -16px 4px !important;
			padding: 0 !important;
			text-align: center !important;
			font-size: 1em !important;
	}

  /* Let the thumbnail grid breathe and avoid fixed widths */
  .thumbnail-grid {
    width: 100%;              /* override the fixed 350px */
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 0 12px 20px;     /* safe side padding */
    box-sizing: border-box;
  }

  .thumbnail-grid-2 {
    width: 100%;              /* override the fixed 350px */
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 0 12px 20px;     /* safe side padding */
    box-sizing: border-box;
  }

	.thumbnail-grid-2 p {
			font-size: 1.2em;
			margin-top: -1.5em;
			position: relative;
			z-index: 100;
			color: #cc9;
			text-align: center;
			text-decoration: none;
			text-shadow: 2px 1px 0 #333333;
			margin-bottom: 0;
	}

  .thumbnail {
    border-radius: 3px;
  }

}

/* make horizontal swipes reliable without fighting vertical scroll */
.main-display { touch-action: pan-y; }

/* persistent highlight for the selected thumbnail (touch-friendly) */
.thumbnail.is-active {
  border-color: rgb(120, 126, 132);
  transform: scale(1.05);
}

#main-image { -webkit-user-drag: none; user-select: none; }

@supports (padding: max(0px)) {
  @media (max-width: 400px) and (orientation: portrait) {
    .main-display {
      margin-left: max(12px, env(safe-area-inset-left));
      margin-right: max(12px, env(safe-area-inset-right));
      width: auto; /* safe-area margins define the final width */
    }
  }
}