@font-face {
  font-family: "Pixelon";
  src: url('../fonts/Pixelon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  background-color: #6c9e5b;
  /* consider #6c9e5b */
  /* #4c7240 darker color */

  font-family: Verdana, Geneva, Tahoma, sans-serif;
  letter-spacing: 0.1rem;
}

.pixelon {
  font-family: "Pixelon";
}

#main {
  /*Container to center frame */
  width: 980px;
  margin-left: auto;
  margin-right: auto;
}

#header-wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 40px;
  padding: 0 20px;
}

/* Make left and right sides equal space */
.header-side {
  display: flex;
  gap: 20px;
  flex: 1 1 300px;
  /* each side can grow/shrink but stays roughly balanced */
}

/* Left links aligned left within their section */
.header-side.left {
  justify-content: flex-end;
}

/* Right links aligned right within their section */
.header-side.right {
  justify-content: flex-start;
}

/* Center title area */
.spocktober-2025 {
  text-align: center;
  white-space: nowrap;
  flex: 0 0 auto;
  /* only takes up needed width */

}

/* Title spacing */
.spocktober-2025 h1 {
  margin: 0;

}

.spocktober-2025 h3 {
  margin: 0;
  font-weight: normal;
}

/* Links */
.header-link {
  display: inline-block;
  width: 120px;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
  text-decoration: none;
  align-self: flex-end;
}

.formatted-text, #stats-box {
  font-size: 22px;
  line-height: 2em;
}

.white-text {
  color: rgb(241, 247, 255);
}

iframe {
  width: 100%;
  height: 600px;

}

nav {

  background-color: #6c9e5b;
  color: white;
  font-size: 1.5em;
  /* border: 1px solid #ccc; */
  border-width: 1px 0;
  border-top: none;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  margin-bottom: 30px;
  position: sticky;
  top: 0;
  z-index: 100;
}

nav li {
  display: inline;

}

nav a {
  display: inline-block;
  padding: 14px 16px;
}

a {
  /*color:rgb(37, 37, 37);*/
  color: white;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  text-decoration: solid;
  background-color: #4c7240;
}

.list-icon {
  padding-left: 1.3em;
  margin-top: 6px;
  background-image: url(list-icon.png);
  background-size: 15px;
  background-repeat: no-repeat;
}

ul {
  display: flow-root;
  justify-content: center;
}

#about {

  height: 390px;
  display: inline-flex;

}

.statement-box {

  height: 100%;
  background-color: #4c7240;
  background-color: white;
  color: black;
  border: solid black;
  border-radius: 0px;
  border-width: 10px;
  display: flex;
  margin: 5px;
}

.statement {

  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  padding: 10px;
}


.games-row {
  display: inline-flex;
  width: 100%;
  padding-top:20px;
}

.game-img-box {
  width: 50%;
  padding: 20px;
  border: none;
  /* margin: auto; */
  display: flex;
  justify-content: center;
}

.game-info-box {
  width: 50%;
  color: black;
  /* margin: auto; */
  border-radius: 0px;
  border-width: 0px;
  padding-left: 75px;
  padding-right: 75px;
  font-size: 18px;
}

.games-table {
  display: table;
  line-height: 0;
  border: none;
  margin-top: 20px;
}




.games-table tr:first-child {
  border: none;
}

.goal-header {
  text-align: center;
  line-height: 2em;
  font-size: 1.7em;
  border-bottom: 1px dashed black;
}

.goals-row {
  display: table;
  line-height: 2em;

  width: 100%;
}

.top-and-bottom-dashed {
  border-top: 1px dashed black;
  border-bottom: 1px dashed black;
}

.goal-name {
  width: 50%;
  margin: auto;
  text-align: center;
  font-weight: bold;
  border-bottom: none;
}

.goal-name {
  font-weight: bold;
}

.goal-description {
  width: 50%;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px dashed black;
}


h1 {

  font-size: 4em;
  font-weight: bolder;
  text-align: center;
  vertical-align: middle;
  color: white;

}

h3#homepage-header {
  /* font-family:Verdana, Geneva, Tahoma, sans-serif; */

  font-size: 1.2em;
  font-weight: bolder;
  text-align: center;
  vertical-align: middle;
  color: #12250c56;
  padding-top: 20px;
}

.spocktober-2025 h1:hover {
  color: #12250c56;

}

.divider-header {
  margin-top: 30px;
}

.header {
  /* This is a table header, not an h1 type */
  font-weight: bold;

}

.goal-spanner {
  width: 100%;
}

table {

  width: 100%;
  color: rgb(22, 24, 22);
  border-collapse: collapse;
  background-color: rgb(241, 247, 255);
  font-size: 18px;

}

.schedule-table {
  line-height: 2em;
}

tr:first-child {
  border: solid;
  border-top: none;
  border-width: 0px 0px 5px 0;
  border-color: rgb(60, 107, 213);
}

.schedule tr {
  border: solid black;
  border-width: 1px;

  border-left: none;
  border-right: none;
}

table.bordered {
  border: none;
  border-radius: 0px;
}

#first-card {
  margin: 0px;
}

.indexed {
  background-color: #4c7240;

}

#indexed:first-child {
  margin-top: 0px;
}

td {
  padding: 5px;
  border-bottom: 1px dashed black;
}

/* Box Shadow Outset */
.hvr-box-shadow-outset {
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgb(0 0 0 / 0%);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}

.hvr-box-shadow-outset:hover,
.hvr-box-shadow-outset:focus,
.hvr-box-shadow-outset:active {
  box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.308);
}

.bordered {
  border: 10px solid black;
  border-radius: 0px;
  display: block;
}

.block-display {
  display: block;
}

.triangle {
  width: 0;
  height: 0;
  border-top: 36px solid transparent;
  border-left: 36px solid rgb(241, 247, 255);
  float: left;
}

.ider {
  border-bottom: 1px solid transparent;
  float: left;
}

.first-divider {
  border-bottom: 5px solid rgb(60, 107, 213);
  float: left;
}

#rules tr {
  border: 1px solid black;
}

footer {
  text-align: center;
  vertical-align: middle;
  margin: 40px;
}

button {
  width: 100%;
  background-color: rgb(241, 247, 255);
  justify-content: center;
  margin: auto;
  border-radius: 18px;
  text-align: center;
  padding: 20px;
  font-size: 1.5em;
}

.divider-header a {
  color: black;
}

button:hover {
  text-decoration: none;
  background-color: rgb(191, 207, 241);
  cursor: pointer;
}


.dropdown {
  position: relative;
  /* So the child positions relative to this */
  display: inline-block;
  /* Keeps it aligned with other nav items */
  align-self: flex-end;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  /* Put it directly under the parent */
  left: 0;
  min-width: 100%;
  /* Match the parent’s width */
  box-shadow: 8px 8px rgba(0, 0, 0, 0.2);
  background-color: #6c9e5b;
  /* Match nav background */
  z-index: 200;
  font-size: 1.35rem;
}

/*
.dropdown-content {
  display: none;
  position: absolute;
  width: 100%;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  background-color: grey;
  
}
my code */

.dropdown:hover .dropdown-content {
  display: block;
}


.dropdown-content a {
  display: block;
  /* color: #000000; */
  padding: 5px;
  text-decoration: none;
}


.dropdown-content a:hover {
  color: #FFFFFF;
  background-color: #4c7240;
}

p a {
  background-color: #6c9e5b;
}

#poca {
  background-color: rgb(248, 224, 176);
}

input[type="text"],
textarea {
  background-color: white;
  /* visible background */
  color: black;
  /* readable text */
  /*  border: 2px solid #4c7240;   /* matches your theme */
  /*  border-radius: 4px; */
  padding: 6px;
  font-size: 16px;

}

input::placeholder,
textarea::placeholder {
  color: #666;
  /* subtle placeholder text */
}

form label {
  display: block;
  /* put label text above */
  margin-bottom: 6px;
  /* space under label */
  font-weight: bold;
}

form input[type="text"],
form input[type="file"],
form textarea {
  display: block;
  /* ensures they start on new line */
  width: 100%;
  /* stretch nicely */
  margin-bottom: 5px;
  /* space under input */
  background-color: white;
  color: black;
  box-shadow: 0 0 2px 2px;
  padding: 6px;
  font-size: 16px;
  overflow-wrap: break-word;
  white-space: normal;
  height: 100%;

  /* box inner shadow settings */
  box-shadow: inset 0px 0px 2px #000000;
  -ms-box-shadow: inset 0px 0px 2px #000000;
  -moz-box-shadow: inset 0px 0px 2px #000000;
  -webkit-box-shadow: inset 0px 0px 2px #000000;
  border-radius: 0px;
  -ms-border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;

}

form input[type="file"] {
  box-shadow:none;
  -ms-box-shadow:none;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
}
.divider-line {
  border: none;
  border-top: 1px solid #ccc;
  margin: 1em 0;
}

#soup-box {
  position: relative;
  margin: auto;
  width: 980px;
  height: 980px;
}

#soup-pot {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: auto;
}

#soup-lid {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: auto;
  padding-left: 20px;
  padding-top: 7px;
}

#soup {
  position: absolute;
  z-index: 1;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  top: 200px;
  left: 200px;

}


.orbit-wrapper {
  position: absolute;
  top: 0;
  left: 0;
}

.preview {
  margin-top: 1em;
  display: flex;
  align-items: center;
  gap: 0.75em;
}

.preview-text {
  font-weight: bold;
  color: #333;
  white-space: nowrap;
}

/* The empty box placeholder */
.preview-box {
  width: 64px;
  height: 64px;
  border: 1px solid black;
  background-color: transparent;
}

/* The actual image, hidden until JS sets src */
#previewImage {
  width: 64px;
  height: 64px;
  border: 1px solid black;
  object-fit: contain;
  display: none;
  /* hidden until JS fills it */
}


label select {
  font: inherit;
  width: 100%;
  font-weight: normal;
}

form {
  display: block;
  background-color: #F8FBE5;
}

li a {
  background-color: #6c9e5b;
}

li a:hover {
  text-decoration: solid;
  background-color: #4c7240;
}

.about-main {
  margin-top: 20px;
  background-color: rgb(241, 247, 255);
  font-size: 1.2em;
  padding: 10px 15px 10px 15px;

}

#submit-ingredient {
  padding: 50px 20px 50px 22%;
  border: none;
  border-right: dashed black 2px;
}

#stats-box {
  padding:50px 22% 50px 20px;
}

#inner-stats-box {
  background-color:#F8FBE5;
}

.special-white-bg {
  background-color: rgb(241, 247, 255);
}

label {
  display: flex;
  align-items: center;
  margin-bottom: 1em;

}

.label-style, #stats-box-content p {
  display: inline;
  background-color: white;
  padding: 0 0.5em;
  /* left/right padding for tab effect */
  border: 1px solid #ccc;

  border-radius: 2px 2px 2px 2px;
  /* rounded 2px corners */

  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.5);
  /* subtle 3D tab effect */

}

.special-white-bg {
  background-color: rgb(241, 247, 255);
}

.inner-shadow {
  box-shadow: inset 0px 0px 2px #000000;
  -ms-box-shadow: inset 0px 0px 2px #000000;
  -moz-box-shadow: inset 0px 0px 2px #000000;
  -webkit-box-shadow: inset 0px 0px 2px #000000;
  border-radius: 0px;
  -ms-border-radius: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
}

.note-box {
  line-height: normal;
  height: 120px;
}

.progress-bar-container {
  padding-right:22%;
}

#stats-box-content p {

}

.progress-bar-numbers {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight:bold;
  color: "#fff";
  text-shadow: 0 0 4px rgba(0,0,0,0.4);
  pointer-events: none;
  z-index: 2;
}

.stat-padding {
  padding: 0 1em;
}