/* --------- FROGLOTIC STYLE SHEET ---------
Special thanks to ribo.zone */

/* --------- Root Values --------- */
:root {
--text: #F5F5F5; /* White Smoke */
--border: #C8C8C8; /*Silver*/
--accent: #3BCA2B; /* Green */
--bg: #050505; /* Black */
--secondaryaccent: #1F7A8C; /* Teal */
}
/* #22AA66  Jungle Green
#1E995C Shamrock
#25BB70 Emerald
#65743A; Fern Green */


/* --------- Background and Sitewide Items --------- */
body {
  padding: 15px;
  font-family: "ZTNature", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: var(--text);
  background-size: cover;
  background-image: url("tester1234.jpg");
}


/* --------- Homepage Layout --------- */
.container {
  max-width: 1050px;
  margin: 0px auto 5px auto;
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  gap: 15px;
  align-items: flex-start;
  /* Add background pattern below */
}

.side-container { flex: 1 1 15% }
.center-container { flex: 1 1 40% }


/* --------- Header --------- */
header {
  background-color: var(--bg);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 120px;
  border: 2px ridge var(--border);
  border-radius: 6px;
  position: relative;
}

header span {
  font-size: 12px;
  position: absolute;
  bottom: 0;
  margin: 5px;
  font-weight: bold;
  color: var(--accent);
}


/* --------- Nav Menu --------- */
nav {
  background-color: var(--bg);
  border: 2px ridge var(--border);
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 0px;
}

nav div {
  text-align: center;
  margin: 5px 5px 10px 5px;
}

nav a {
  display: block;
  margin:5px;
  border-radius:6px;
  padding:2px 8px;
  text-decoration: none;
  color: var(--text);
}

nav a:link, nav a:visited {
  color: var(--text);
}

nav a:hover, nav a:focus {
  background: var(--accent);
  color: var(--text);
}

/* --------- Section --------- */
section {
  background-color: var(--bg);
  border: 2px ridge var(--border);
  border-radius: 6px;
  padding: 5px;
}

.side-container, .center-container {
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  gap: 15px;             /* This creates the gap BETWEEN your nav and sections */
border: none;
background: none;
padding: 0px;
}

.centerbox {
  border-radius: 6px;
  padding: 10px; /* Internal breathing room */
}

.sidebox {
  border-radius: 6px;
  padding: 10px; /* Internal breathing room */
}

/* --------- Status ---------- */
.statusbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.statusbar li {
  margin-bottom:10px;
}
.statusbar div {
  text-align: center;
  margin: 5px 5px 10px 5px;
}


/* --------- Footer --------- */
footer {
  text-align:center;
  margin-bottom: 5vw;
  font-size: 0.8 rem;
}

footer a {
  text-decoration:none;
}


/* --------- Text Formatting --------- */
h1, h2, h3, h4, h5, h6, p, .subheader {
  margin:5px;
  line-height: 1.2;
  display: block;
}

h1 {
  font-size: 1.6rem;
  letter-spacing: 2px;
  text-align: center;
  border-bottom: 2px ridge var(--border);
  padding-bottom:5px;
}

h2 {
  font-size: 1.45rem
}

h3 {
  font-size: 1.3rem;
}

h4 {
  font-size: 1.2rem;
  color: var(--accent);
}

.subheader {
  font-size: 1rem;
  font-weight:500;
  font-style:normal;
  line-height:1;
}

.caption {
  font-size: 0.9rem;
  font-weight:100;
  font-style: normal;
}

/* --------- Mobile Accessibility --------- */
img {max-width: 100%;}
pre {overflow-x: auto;}


/* --------- Link Styling --------- */
a {
  color: var(--accent);
}
a:hover {
  font-weight:800;
  color: var(--secondaryaccent);
}
a:focus {
  font-weight:800;
}

::selection {
  background-color: var(--accent);
}

/* --------- Tooltips --------- */

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: #292929;
  color: var(--text);
  text-align: center;
  border-radius: 8px;
  padding: 5px 1.5px;
  position: absolute;
  top: 100%;
  left: 80%;
  margin-left: -60px;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}  


/* Now Playing */
.imgflex {
    display: flex;
    align-items: center; 
    gap: 10px; 
    border: none;
}

.imgflex img {
    max-width: 25%; 
    height: auto;
    flex-basis: 40%; 
    border-radius:2px;
}

.text-content {
    flex-basis: 60%; 
}

.text-content p {
    margin-bottom: 1em; 
}