body {
	background-color: black;
	color: white;
	font-family: monospace;
}

#index_page #art {
	font-size: clamp(4px, 0.8vw, 6px);
	line-height: 1;
	white-space: pre;
	letter-spacing: 0;
	overflow-x: auto;
}

#title {
	border-bottom: 8px solid;
	border-image: linear-gradient(to right, #5BCEFA, #5BCEFA 20%, #F5A9B8 20%, #F5A9B8 40%, white 40%, white 60%, #F5A9B8 60%, #F5A9B8 80%, #5BCEFA 80%) 1;
}

#disclaimer {

	text-align: center;
	border: 2px dotted white;
	border-radius: 5px;
}

#disclaimer h2 {
	font-size: clamp(1.5rem, 2vw, 2.5rem);
	font-weight: bolder;
}


#wiki_index {
	font-size: clamp(1.5rem, 2vw, 2.5rem);
}

#wiki_index li {
	margin-bottom: 2%;
}



#data_list li {
	margin-bottom: 2%;
}

h1 {
	font-size: clamp(1.8rem, 5vw, 2.5rem);
	text-align: center;
}

h2 {
	font-size: clamp(1.5rem, 4vw, 2rem);
	text-align: center;
}

h3 {
	font-size: clamp(1.2rem, 3vw, 1.5rem);
}


#footer {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 15px;
	border-top: 10px solid white;
}

#footer a {
	font-size: 1.2rem;
}

.item {
	padding: clamp(10px, 2vw, 20px);
	margin: clamp(5px, 1.5vw, 10px);
}

a:link,
a:visited,
a:hover,
a:active {
	color: white;
}

p {
	font-size: 1.2rem;
}

.imageDiv {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100dvh;
}

#canHasCookies {
	position: fixed;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	background: #000;
	color: #eee;
	padding: 1rem 1.5rem;
	display: none;
	align-items: center;
	gap: 1rem;
	font-size: 0.9rem;
	z-index: 999;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
	width: max-content;
	max-width: 90vw;
	border: 2px dashed #fff;
}

#canHasCookies #iCanHasCookies,
#canHasCookies #iCantHasCookies {
	background-color: black;
	color: white;
	border: 2px dashed #fff;
	font-family: monospace;
	padding: 7.5px 16px;
	cursor: pointer;
}

/* 1. Make the outer wrapper fill the whole mobile screen */
.screen-wrapper {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically on tall screens */
  min-height: 100vh;       /* Spans 100% of the visible viewport height */
  width: 100%;
}

#radio_img {
  display: block;
  margin: 0 auto;
  max-width: 98vw;
  max-height: 100vh;
  height: auto;
  padding: 1%;
}


@media only screen and (max-width: 768px) {
	.imageDiv {
		height: 50vh;
	}

	.imageDiv img {
		max-width: 100%;
		height: auto;
	}

	body {
		text-align: center;

	}

	#canHasCookies {
		flex-direction: column;
		align-items: center;
		width: 90vw;
		left: 5vw;
		transform: none;
		bottom: 1rem;
		padding: 1rem;
		font-size: 0.8rem;
		gap: 0.75rem;
		box-sizing: border-box;
	}

	#canHasCookies p {
		margin: 0;
		text-align: center;
	}

	#canHasCookies #iCanHasCookies,
	#canHasCookies #iCantHasCookies {
		width: 100%;
		text-align: center;
	}

	/* Override centering for list content */
	ol,
	ul,
	li {
		text-align: left;
	}

	/* Keep headings centered */
	h1,
	h2,
	h3 {
		text-align: center;
	}

	/* Fix font size on the ol */
	ol {
		font-size: 1.2rem;
		padding-left: 1.2rem;
		/* stops list from overflowing edge */
	}
}

@media (max-width: 768px) and (orientation: portrait) {
  #radio_img {
    width: 92vw;               
    height: 95vh;              
    object-fit: cover;          
    object-position: 50% 50%;   

    /* Fixes for the visible outline: */
    padding: 1% !important;      /* Removes layout gaps pulling the edge in */
    border: none !important;     /* Forces any native browser image borders off */
    outline: none !important;    /* Kills any focus/element outline shadows */
    box-shadow: none !important; /* Removes any edge artifact shadows */
  }
}