/* Base Styles */
body {
  margin: 0;
  background: #e7e7e3 url('bg.png') repeat;
  font-family: "Bellefair", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: #3c2c2d;
  text-shadow: 1px 1px 0 #ffffff;
}

/* Global link styles */
a, span a, div a {
  color: #3b5a73;
  text-decoration: underline dotted;
  text-shadow: 1px 1px 0 #ffffff;
}
a:hover, span a:hover, div a:hover {
  color: #2d4559;
  text-decoration: underline dotted;
}

/* Layout wrapper */
.layout-wrapper {
  display: flex;
  align-items: flex-start;
}

/* Left Panel */
.left-panel {
  position: relative;
  top: 20px;
  width: 350px;
  min-width: 350px;
  text-align: center;
}


/* Title */
.site-title {
  font-family: "Mr Bedfort", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 70px;
  color: #b98572;
  text-shadow: -1px -1px 0 #ffffff;
  margin-bottom: 20px;
}

/* Navigation */
.main-nav {
  background: rgba(231,231,227,0.5);
  padding: 20px 0;
}

.main-nav ul {
  display: flex;
  flex-direction: column; 
  align-items: center;    
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav li {
  width: 185px;
  text-align: center;
}

.main-nav a {
  font-family: "Bellefair", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  letter-spacing: 3px;
  color: #bd926e;
  text-shadow: -1px -1px 0 #ffffff;
  text-decoration: none;
  display: block;
  padding: 6px 0;
}

.main-nav a:hover {
  background: rgba(231,231,227,1);
  text-shadow: -1px -1px 0 #ffffff;
  color: #854e53 !important;
}

/* Content */
.content {
  margin-top: 50px;
  margin-left: 30px;
  max-width: 750px;
  min-width: 600px;
}

h1, h2, h3 {
  font-family: "Mr Bedfort", serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;
  text-shadow: 1px 1px 0 #ffffff;
  margin-top: 40px;
}

h1 { font-size: 36px; color: #736061; }
h2 { font-size: 28px; color: #736061; }
h3 { font-size: 24px; color: #736061; }

/* Two Column */
.two-col {
  display: flex;
  gap: 20px;
  margin: 40px 0;
}

.two-col .col, .col {
  flex: 1;
  text-align: center;
  font-family: "Bellefair", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
}

.col img {
  display: inline-block; 
  vertical-align: middle; 
  max-width: 100%;
}

/* Footer */
footer {
  text-align: center;
  font-family: "Mr Bedfort", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: #854e53;
  text-shadow: 1px 1px 0 #ffffff;
  margin: 60px 0;
}

footer a {
  color: #bd926e;
  text-decoration: none;
}

footer a:hover {
  color: #854e53;
  text-decoration: underline dashed #e1c280;
}

/* =========================================================================
   STATISTICS TABLE STYLING
   ========================================================================= */

#statsTable {
  width: 700px;
  border-collapse: collapse;
  font-size: 16px;
  color: #3c2c2d;
}

#statsTable th,
#statsTable td {
  padding: 8px 10px;
  border-bottom: 1px solid #ccc;
}

#statsTable th {
  cursor: pointer;
  user-select: none;
  text-align: center;
  background-color: rgba(229, 217, 200, 0.2);
  color: #3c2c2d;
}

#statsTable th:first-child {
  text-align: left;
}

#statsTable td.center {
  text-align: center;
}

#statsTable tr:nth-child(even) {
  background-color: rgba(229, 217, 200, 0.2);
}

#statsTable tr:hover {
  background-color: rgba(229, 217, 200, 0.2);
}

#statsTable a {
  color: #b98572;
  text-decoration: none;
  font-weight: normal;
}

#statsTable a:hover {
  color: #3c2c2d;
  text-decoration: underline;
}

#statsTable .sort-arrow {
  color: #3c2c2d;
  margin-left: 5px;
  font-size: 0.8em;
}

/* Summary Row */
#statsTable .summary-row {
  background-color: rgba(229, 217, 200, 0.2) !important;
  color: #3c2c2d;
  border-top: 0;
}

#statsTable .summary-row td {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 16px;
}

#statsTable .summary-row strong {
  color: #3c2c2d;
}



/* ==================================================
FORMS
================================================== */


.custom_input {
display: flex;
align-items: center;
margin-bottom: 5px !important;
}


.custom_input label {
width: 120px;
margin-right: 10px;
text-align: right;
font-family: "Bellefair", serif;
font-size: 16pt;
font-weight: 400;
color: #2F2D1E;
}

form[class^="show_"] span[class$="_label"] {
  display: block;
  margin-bottom: 5px;
  font-family: "Bellefair", serif;
  font-size: 16pt;
  font-weight: 400;
  color: #2F2D1E;
}


.custom_input .input,
form[class^="show_"] input[type="text"],
form[class^="show_"] input[type="email"],
form[class^="show_"] input[type="password"],
form[class^="show_"] input[type="url"],
form[class^="show_"] select,
form[class^="show_"] textarea {
width: 300px;
padding: 5px;
margin-bottom: 5px;
background-color: rgba(71,105,132,.1);
border: 1px solid #2F2D1E;
box-sizing: border-box;
font-family: "Bellefair", serif;
font-size: 16pt;
font-weight: 400;
color: #2F2D1E;
outline: none;
transition: 0.3s ease;
}


.show_join_password_field,
.show_update_password_field,
.show_join_password_field2,
.show_update_password_field2 {
  display: block;
  width: 300px;
  clear: both;
}


/* Buttons */
.custom_input input[type="submit"],
form[class^="show_"] input[type="submit"],
form[class^="show_"] input[type="reset"] {
padding: 5px 10px;
margin-top: 10px;
background-color: rgba(71,105,132,.1);
border: 1px solid #2F2D1E;
cursor: pointer;
font-family: "Bellefair", serif;
font-size: 16pt;
font-weight: 400;
color: #2F2D1E;
transition: 0.3s;
}


.custom_input input[type="submit"]:hover,
form[class^="show_"] input[type="submit"]:hover,
form[class^="show_"] input[type="reset"]:hover {
box-shadow: #2F2D1E 1px 1px;
}


/* Form structure */
form[class^="show_"] p {
margin-bottom: 15px;
}








/* Mobile Styles - ONLY FIXED */
@media (max-width: 900px) {
  .layout-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .jar {
    position: relative;
    top: 0;
    transform: none;
    margin: 0 auto;
  }

  .left-panel {
    width: 100%;
    text-align: center;
    position: relative;
  }

  .site-title {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    margin: 20px auto 10px auto;
  }

  .main-nav {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    margin: 10px auto 30px auto;
  }

  .main-nav ul {
    display: block;
    padding: 0;
  }

  .main-nav li {
    width: 100%;
    margin: 10px 0;
  }

  .content {
    margin: 20px auto;
    width: 90%;
  }

  .two-col {
    flex-direction: column;
    gap: 20px;
  }
}