body {font-family: Arial;}

@font-face {
    font-family: 'MiniMicro';
    src: url('fonts/MiniMicro.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

:root {
    --text-normal: 1.5rem;
    --text-small: 1rem;
    /* Light mode variables */
    --background-color: white;
    --text-color: #121212;
    --header-color: black;
    --link-color: blue;
    --visited-color: purple;
}

.dark-mode {
    /* Dark mode variables */
    --background-color: #121212;
    --text-color: #CCCCCC;
    --header-color: white;
    --link-color: #4e9afc;
    --visited-color: #3e8aec;
}

body {
    font-family: 'MiniMicro', sans-serif;
    font-size: var(--text-normal);
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
}

.small-text {
    font-size: var(--text-small);
}

h3 {
	color: var(--header-color);
    text-decoration: underline;
    margin-bottom: 4px;
	margin-left: 4px;
}

p {
	margin-top: 4px;
	margin-left: 4px;
}

ul {
	margin-top: 4px;
}

a:link {
	color: var(--link-color);
	text-decoration: none;
}

a:visited {
	color: var(--visited-color);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:active {
	text-decoration: underline;
}

tr td {
	text-align: left;
}

/* Support for the tab panel at the top of the page */
.tab-list {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  margin: 0;
  padding: 0;
  box-shadow: #ccc;  
  background-color: #DFD6BA;
  background-image: linear-gradient(#EFE6CA, #BAB39E);
  width: 100vw;
  max-width: 100%;
}

/* Style the links inside the tab */
.tab-list li {float: left;}

.tablinks {
	display: block;
	color: black;
	text-align: center;
	border: 1px solid #AAA38E;
	padding: 14px 16px;
	text-decoration: none;
	transition: background-color 0.3s ease-out;
	cursor: pointer;
}

.tablinks:hover {
	background-color: #EFE6CA;
	background-image: linear-gradient(#FFF6DA, #CAC3AE);
}

.tablinks.active {
	background-color: #BAB39E;
	background-image: linear-gradient(#DFD6BA, #AAA38E);
}

.tabcontent {
  display: none;
  /*padding: 6px 12px;*/
  border: 1px solid #ccc;
  border-top: none;
  margin: auto;
  max-width: 960px;
}

/* "fat buttons" */
.fatbutton {
	display: inline-flex;
	width: 200px;
	height: 54px;
	color: black;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	line-height: 95%;
	transition: background-color 0.3s ease-out;
	background-image: linear-gradient(to bottom, #EEEEEE, #CCCCCC);
	border: 1px solid #444;
	cursor: pointer;
}

.fatbutton:hover {
  background-color: #EFE6CA;
  background-image: linear-gradient(to bottom, #FFFFFF, #C8C8C8);
}

.fatbutton.active {
  background-color: #BAB39E;
  background-image: linear-gradient(to bottom, #DDDDDD, #BBBBBB);
}

/* styling of our program tiles */
.tileTitle {
	width: 250px;
	margin-top: 4px;
	margin-bottom: 0px;
}

.tilePic {
	display: block;
	margin-top: 4px;
	margin-bottom: 0px;
}

.tileDesc {
	width: 250px;
	font-size: var(--text-small);
	margin-top: 0px;
}

.tileAction {
	width: 240px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
    margin-top: 0px;
    margin-bottom: 0px;
}

.tileActionText {
    margin-left: 4px;
    margin-top: 2px;
    margin-bottom: 0px;
    align: center;
    font-size: 12px;
}


/* setup for images/GIFs inside a Mini Micro bezel frame */
.bezel {
    position: relative;
    width: 512px;
    height: 384px;
    background-image: url('img/WindowFrame_512.png');
    background-size: cover;
    background-position: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid #888844;
    border-radius: 4px;
}

.bezel img {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 480px;
    height: 320px;
}

.spacer {
	height: 40px;
}

/* class for horizontally centered elements */
.centered {
    display: block; /* Make the image a block-level element */
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
    text-align: center;
}

/* Setup for responsive UI content blocks. */
.content-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0px;
    padding: 0px;
    width: 100vw;
    max-width: 940px; /* Maximum width to accommodate 3 content blocks */
    margin: 0; /* Center the container on the page */
}

.content-block {
    width: 300px;
    margin-bottom: 20px;
}

.youtube {
  width: 560px;
  height: 315px;
}

@media screen  and (max-width: 560px) {
  .youtube {
    width: 360px;
    height: 200px;
  }

  .bezel {
    width: 360px;
    height: 270px;
  }

  .bezel img {
    width: 332px;
    height: 220px;
    top: 12px;
    left: 12px;
    border-radius: 2px;
  }
}

/* Filter buttons for programs page */
.filter-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0px 12px;
    margin: 0 auto 12px auto;
    max-width: 800px;
}

.filter-label {
    font-weight: bold;
    font-size: 14px;
    margin-right: 8px;
}

.filter-btn {
    padding: 0px 4px;
    font-size: 14px;
    border: 2px solid #AAA38E;
    background-color: #EFE6CA;
    background-image: linear-gradient(to bottom, #FFFFFF, #EFE6CA);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-family: 'MiniMicro', sans-serif;
}

.filter-btn:hover {
    background-image: linear-gradient(to bottom, #FFFFFF, #DFD6BA);
    border-color: #8A8370;
}

.filter-btn.active {
    background-color: #BAB39E;
    background-image: linear-gradient(to bottom, #DFD6BA, #AAA38E);
    border-color: #8A8370;
    font-weight: bold;
}

.dark-mode .filter-btn {
    background-color: #2a2a2a;
    background-image: linear-gradient(to bottom, #3a3a3a, #2a2a2a);
    color: #CCCCCC;
    border-color: #555;
}

.dark-mode .filter-btn:hover {
    background-image: linear-gradient(to bottom, #4a4a4a, #3a3a3a);
    border-color: #777;
}

.dark-mode .filter-btn.active {
    background-color: #1a1a1a;
    background-image: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
    border-color: #777;
}