@import url('https://fonts.googleapis.com/css2?family=Nova+Square&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Nova+Square&display=swap');

/* Typography: variables and scale */
:root{
  --font-base: 16px;      /* base body size */
  --fs-400: 1rem;         /* body text */
  --fs-500: 1.125rem;     /* slightly larger body */
  --fs-600: 1.375rem;     /* h3 */
  --fs-700: 1.75rem;      /* h2 */
  --fs-800: 2.25rem;      /* h1 */
  --lh-body: 1.5;         /* body line-height */
  --lh-heading: 1.2;      /* heading line-height */
}

/* === Top Navigation === */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.6rem 1rem;
  background:#144C52;
  color:#fff;
}
.brand{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-weight:700;
  text-decoration:none;
  color:#fff;
  font-size: 1.25rem;
}
.brand-logo{
  display:block;
  width:36px;
  height:auto;
  border:0;
  margin:0;
  background:transparent;
}
.main-nav{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}
.main-nav a{
  color:#fff;
  text-decoration:none;
  padding:.35rem .55rem;
  border-radius:6px;
}
.main-nav a:hover{
  background:rgba(255,255,255,.12);
}
.main-nav .admin-link{
  background:#0d3236;
}
@media (max-width: 768px){
  .main-nav{
    width:100%;
    justify-content:center;
    gap:.35rem;
  }
  .brand{ font-size: 1.1rem; }
}

*{
	box-sizing: border-box;
	font-family:Courier New;
    text-align: center;
    background-color: #ADCCC7;
}

/* Using the variable base size for body text */
body {
  font-size: var(--font-base);
  line-height: var(--lh-body);
}

/* Headings use the scale; swap fonts if desired */
h1 {
	font-size: var(--fs-800); line-height: var(--lh-heading); margin: 0.25rem 0 0.75rem;
}
h2 {
	font-size: var(--fs-700); line-height: var(--lh-heading); margin-top: 1rem;
}
h3 {
	font-size: var(--fs-600); line-height: var(--lh-heading);
}

/* Default paragraph/list size (overridable per-section) */
p, li {
	font-size: var(--fs-400);
}

/* Utility: slightly larger copy when needed */
.text-lg {
	font-size: var(--fs-500);
}

.search {
  margin: auto;
  width: 50%;
  border: 3px solid #144C52;
  padding: 10px;
}
.wrapper .media-details, .search form, .wrapper form {
  margin: auto;
  width: 40%;
  padding: 10px;
}
.media-details tr {
	padding: 20px;
}
.media-details h1 small {
  font-size: 0.6em;
  font-weight: normal;
  margin-left: 0.5rem;
}
.media-details h1 small a {
  text-decoration: none;
  color: #555;
}
.media-details h1 small a:hover {
  color: #000;
  text-decoration: underline;
}
section {
  padding: 20px;
}

.wrapper ul{
	list-style-type: none;
	margin-left: 25%;
}
.items li a {
	position: inline-block;
	float: left;
	width: 15%;
	padding: 10px;
	margin: 0 5px 0 5px;
	font-size: .5rem;
}
.items p {
	display: absolute;
	font-size: 1.5em;
	padding: 10px;
}
.items img, .media-picture img {
	width: 180px;
	height: 250px;
	margin-top: 10px;
	border: 6px solid #053220;
}

/* One Piece Tracker */
.one-piece-tracker {
  padding: 1rem;
  border: 1px solid #333;
  border-radius: 8px;
  margin-top: 1rem;
  font-size: 1.15rem;
  max-width:720px;
  margin:1rem auto;
  text-align:left;
}
.one-piece-tracker h2 {
  font-size: 1.6rem;
}

.one-piece-tracker .episode-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 .5rem 0;
}

.one-piece-tracker .ep-row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:8px 0;
}

.one-piece-tracker .episode-list li { padding: .25rem 0; line-height: 1.45; }
.one-piece-tracker small { font-size: .95rem; }

.one-piece-tracker .ep-thumb {
  display:block;
  max-width:300px;
  height:auto;
  border:4px solid #053220;
  flex:0 0 auto;
}
.one-piece-tracker .ep-meta{ line-height:1.35; }

/* One Piece links */
.op-link { color: inherit; text-decoration: none; }
.op-link-text:hover { text-decoration: underline; }
.op-link-text:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 6px;
}
.op-link-img { display: inline-block; line-height: 0; }
.op-link-img:hover img { filter: brightness(1.06); }
.op-link-img:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 6px;
  border-radius: 10px;
}


/* Clear the floated movie tiles */
.items::after {
  content: "";
  display: block;
  clear: both;
}
/* Ensure the One Piece tracker starts below the movies grid */
.section.tracker {
  clear: both;
  margin-top: 1rem; /* optional breathing room */
}

/* End Page Style*/
/* About Me */
#aboutMe img {
  max-width: 30%;
  height: auto;
  padding: 20px;
}

/* Style the links inside the sidenav
retiring
.mySidenav a {
  position: absolute;  Position them relative to the browser window
  left: -150px;  Position them outside of the screen
  transition: 0.3s;  Add transition on hover
  padding: 15px; /* 15px padding
  width: 200px; /* Set a specific width
  text-decoration: none; /* Remove underline
  font-size: 20px; /* Increase font size
  color: white; /* White text color
  border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side
}

.mySidenav a:hover {
  left: 0; /* On mouse-over, make the elements appear as they should
}

.mySidenav img {
  max-width: 15%;
  height: auto;
}

.mySidenav .icon {
	display: none;
}

.myLinks {
	top: 20px;
} */

/* The about link: 20px from the top with a green background
*** RETIRING ***
#home {
  top: 20px;
  background-color: #053220; /* Light Purple
}

#about {
  top: 80px;
  background-color: #053220; /* Dark Purple
}

#projects {
  top: 140px;
  background-color: #053220; /* Dark Yellow
}
#movieNav {
  top: 200px;
  background-color: #053220; /* Lightish Blue
}
#afi_top_menu {
  top: 260px;
  background-color: #D34C26; /* Orange
}
#denX {
  top: 320px;
  background-color: #053220/* Green
}

#weeklyNav {
	top: 380px;
	background-color: #D34C26; /* Orange
}

#contact {
  top: 440px;
  background-color: #D34C26 /* Orange
}
/* End Sid nav AND END OF RETIRING */

/* Footer Links */
/* Sticky footer layout */
html, body { height: 100%; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Whatever your main content wrapper is */
main, .site-content, .page-wrap, .content {
  flex: 1 0 auto;
}

/* Footer sits after content, no overlap */
.site-footer, footer {
  flex-shrink: 0;
  width: 100%;
  padding: 8px 12px;
  background: #144C52;
  color: #fff;
  height: auto;
}

/* iPhone safe-area padding */
.site-footer, footer {
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

footer,
.site-footer {
	 padding: 5px;
	 width: 100%;
	 background: #144C52;
}

footer li, footer a {
	font-size: 1rem;
	list-style: none;
}

.afi_top {
	display: block;
	  margin-left: auto;
	  margin-right: auto;
	  width: 40%;
}

/* Reviews */
.reviews { margin-top: 2rem; }
.reviews h2 { margin: 0 0 .75rem; text-align: left; }

.reviews-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.review-card {
  background: #E2EFEC;
  border: 1px solid #144C52;
  border-radius: 8px;
  padding: 12px 14px;
  text-align: left;
}

.review-card h3 {
  margin: 0 0 .5rem;
  font-size: 1.1rem;
  color: #0d3236;
}

.review-card .rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: .25rem 0 .5rem;
}

.review-card .num {
  font-size: .9rem;
  color: #333;
}

.review-card p { margin: .25rem 0 .75rem; line-height: 1.4; }
.review-card p.empty { color: #666; font-style: italic; }

.review-card .edit-link a {
  font-size: .9rem;
  color: #144C52;
  text-decoration: none;
}
.review-card .edit-link a:hover {
  text-decoration: underline;
}

/* Star bar */
.stars {
  position: relative;
  font-size: 1.1rem;
  line-height: 1;
  display: inline-block;
}
.stars .stars-bg {
  color: #ccc;
}
.stars .stars-fg {
  position: absolute;
  top: 0; left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #f5a623; /* gold-ish */
}
.no-rating {
  color: #666;
  font-style: italic;
}


.genre-columns {
	column-count: 4;
}

/* Break points */

/* Slight bump for desktop readability */
@media (min-width: 1200px){
  :root{ --font-base: 17px; }
}

/* Small devices 600px and lower ( maybe need to make a smaller resolution at xs 320)*/
@media only screen and (min-width: 320px) and (max-width: 576px) {
	/* Start of Mobile navigation style */
  .mySidenav a {
  padding: 14px 16px;
	width: 100%;
  text-decoration: none;
  font-size: 17px;
	left: 0px;
	position: static;
	float: left;
}

#myLinks {
	width: 50%;
	margin: auto;
}

.search {
	position: static;
	float: left;
  overflow: hidden;
  width: 100%;
  padding: 5px;
	margin: 15px 0px 15px;
}

.search form {
	left: 10%;
}

.items li {
	margin: auto;
  width: 70%;
	float: left;
}

h1 {
	position: static;
}

section {
	float: left;
}

footer {
	position: fixed;
}
}

/*
md 768
lg 992
xl 1200
xxl 1400
xxxl 1920
xxxxl 2400
*/