/* Global*/
body {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  background-color: #f9f9f9;
  color: #000;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
	background-image: url(img/wall.png);
    background-position: top center;
    background-attachment: fixed;
}


::-moz-selection {
	background: #cfd8e4;
	text-shadow: none;
  color:#000000;
}

::selection {
	background: #cfd8e4;
	text-shadow: none;
  color:#000000;
} 



.page-container {
  max-width: 900px;
  margin: 0 auto;
  background-color: #ffffff;
  border: 1px solid #ccc;
	width: fit-content;
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
}

/* Header*/
header {
  background: #000000;
  color: #ffffff;
  padding: 10px 20px;
  border-bottom: 1px solid #999;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
    letter-spacing: 0.5px;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    display: flex;
    align-items: center;
    text-transform: uppercase;
}

.logo img {
  height: 35px;
  margin-right: 8px;
}

/* Ticker*/
.news-ticker {
  background-color: #f3f3f3;
  border-bottom: 1px solid #ccc;
  padding: 8px 20px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.ticker-content {
  display: inline-block;
  animation: scroll-left 30s linear infinite;
}

@keyframes scroll-left {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

.ticker-content a {
  margin-right: 40px;
  text-decoration: none;
  color: #0033cc;
  font-size: 0.75rem;
}

.ticker-content a:hover {
  text-decoration: none;
	color: #000;
}

.ticker-tag {
  font-weight: 500;
  padding: 2px 6px;
  margin-right: 6px;
  border-radius: 3px;
  font-size: 0.72rem;
  color: #fff;
  text-transform: uppercase;
}

.tred { background-color: #cc0000; }
.tblue { background-color: #0066cc; }
.tgreen { background-color: #009966; }

/* Flexbox layout for 3 columns */
.container {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  box-sizing: border-box;
}

.container {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  box-sizing: border-box;
  width: 100%;         
  max-width: 100%;   
  min-width: 0;       
  overflow: hidden;
}

.left-column {
  flex: 0 0 15%;
  padding: 0;
  box-sizing: border-box;
	float: left;
	width: 15.79%;
	min-width: 150px;
	margin: 0 0 10px 0;
}

.center-column {
  flex: 1 1 40%;
  box-sizing: border-box;
  width: 100%;        
  max-width: 100%;   
  min-width: 0;       
  overflow: hidden;
}

.right-column {
  flex: 2 2 20%;
  padding: 0;
  box-sizing: border-box;
}

/* Section blocks */
.section {
  margin-bottom: 1rem;
  border: 1px solid #ddd;
  background-color: #fafafa;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
  overflow: hidden;
}

.section h2 {
  font-size: 0.85rem;
  background: linear-gradient(to bottom,rgba(255, 255, 255, 1) 0%, rgba(227, 234, 237, 1) 100%);
  color: #203878;
  font-weight: 700;
  padding: 6px;
  margin: 0 0 0px 0;
  border-bottom: 1px solid #ccc;
}

.section h3:not(.pincon-mini-text h3) {
  font-size: 1.2rem;
  background: linear-gradient(to bottom,rgba(255, 255, 255, 1) 0%, rgba(227, 234, 237, 1) 100%);
  color: #203878;
  font-weight: normal;
  padding: 3.5px 3.5px 3.5px 6.8px;
  margin: 0 0 0px 0;
  border-bottom: 1px solid #ccc;
}

/* Nav */
.section ul.nav-links,
.section ul.contact-links {
  list-style: none;
  margin: 0;
  padding: 0;
  background: linear-gradient(to bottom, rgb(250, 250, 250), rgb(216, 226, 232));
  border: 1px solid #ccc;
}

.section ul.nav-links li,
.section ul.contact-links li {
  border-bottom: 1px solid #bbb;
}

.section ul.nav-links li:last-child,
.section ul.contact-links li:last-child {
  border-bottom: none;
}

.section ul.nav-links li a,
.section ul.contact-links li a {
  padding: 3px 0 3px 5px;
  color: #203878;
}

.section ul.nav-links li a:hover,
.section ul.contact-links li a:hover {
  color: #203878;
	text-decoration: line-through;
	cursor: crosshair;
}

.section li {
  padding: 3px 0;
}

.section li a {
  color: #203878;
  text-decoration: none;
}

.section li a:hover {
  color: #203878;
  text-decoration: underline;
}

/* Desctext */
.desctext {
  padding: 0px 10px 0px 10px;
}

.desctext h2 {
  margin-left: -10px;
  margin-right: -10px;
}

.desctext h3 {
  color:#ab5d18
}

h4 {
  text-align: center;
}

footer {
  background-color: #f0f0f0;
  text-align: center;
  font-size: 1rem;
  color: #666;
  padding: 15px 0;
  border-top: 1px solid #ccc;
  margin-top: 20px;
}

blockquote {
  color: black;
  padding: 1rem;
  font-family: "Courier New", Courier, monospace;
  max-width: 600px;
}

.desctext a {
    color: #203878;
    text-decoration: none; /* no underline by default */
}

.desctext a:hover {
    text-decoration: underline;
}

/* DASHBOARD */
/* Outer container */

/* Grid layout */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

/* Individual tabs */
.cell {
  background: #ffffff;
  border: 1px solid #aeb7c3;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;

  /* subtle inset*/
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,0), 1px 1px 0 #7d8fa8
}

/* Text inside tabs */
.cell h4 a{
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
  color: #203878;
  text-decoration:none;
}

.cell h4 a:hover{
  text-decoration:underline;
}

/*Desctext Table */

.desctext:has(table) {
  padding: 10px;
}

.desctext table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid;
  font: inherit;
}

.desctext th,
.desctext td {
  padding: 8px;
  border: 1px solid;
  text-align: left;
  font: inherit;
}

.desctext th {
  font-weight: bold;
}

/* BLOG IMAGES */

.tn {
  display: block;
  max-width: 55%;
  padding: 2px;
  border: 1px solid #9dafbd;
  border-color: #9eb1c0 #677787 #677787 #9eb1c0;
  margin: 10px auto;
}



/* PINCONS */

/* Standard */
.pincon {
  float: left;
  width: 156px;
  height: 117px;
  padding: 1px;
  border: 1px solid #9dafbd;
  border-color: #9eb1c0 #677787 #677787 #9eb1c0;
  margin: 0 10px 10px 0;
}

.pincon-wrapper {
  display: flex;
  align-items: flex-start; 
  max-width: 400px; 
}

/* Mini */

.pincon-mini {
  float: left;
  display: block;
  width: 92px;
  height: 68px;
  padding: 1px;
  border: 1px solid #647684;
  margin: 0 10px 10px 0; /* same spacing as pincon */
}

.pincon-mini-text h3 {
  margin: 0 0 4px 0;
  font-size: 1.2rem;
  background: none;
  color: #203878;
  text-decoration: none;
  
}

.pincon-mini-text p {
  margin: 0;
}

/* Album */
.pincon-album-row {
  width: 100%;
  overflow-x: auto;    /* horizontal scroll */
  overflow-y: hidden;
  white-space: nowrap; /* keep items on one line */
  padding-bottom: 5px; /* space for scrollbar */
}

.pincon-album {
  display: inline-block;    /* horizontal layout of albums */
  width: 90px;
  margin-right: 20px;
  text-align: center;
  vertical-align: top;
  box-sizing: border-box;
}

.pincon-album a {
  display: block;         
  text-decoration: none;  
  color: inherit;         
}

.pincon-album-img {
  width: 90px;
  height: 90px;
  padding: 1px;
  margin-bottom: 5px;
  display: block;
  margin-left: auto;
  margin-right: auto;
	transition: transform 0.3s ease;
}

.pincon-album-img:hover {
	  cursor: cell;
	 transform: rotate(-3deg);
}

.pincon-album h4 {
    font-size: 0.78rem;
    font-weight: 400;
    color: #203878;
    margin: 0;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: break-word;
    max-height: 2.8rem;
    overflow: hidden;
}
/* DT */

dt {
  font-weight: bold;
  display: list-item;
  list-style-type: disc;
  margin-left: 3.3rem;
}

/* =========================
   Mobile responsiveness
   ========================= */
@media (max-width: 768px) {

  /* Allow page to shrink on mobile */
  .page-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  /* Stack header elements */
  header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* Stop ticker overflow issues */
  .news-ticker {
    padding: 8px 10px;
  }

  /* Stack the 3-column layout */
  .container {
    flex-direction: column;
    padding: 10px;
  }

  /* Remove old-school fixed sizing ONLY on mobile */
  .left-column,
  .center-column,
  .right-column {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    float: none;
  }

  /* Reduce excessive spacing */
  .section {
    margin-bottom: 12px;
  }

  /* Make text blocks fit better */
  blockquote {
    max-width: 100%;
  }
}