html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  font-family: Helvetica, Arial, sans-serif, Courier, monospace;
  display: flex;
  flex-direction: column;

}

#wrapper {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  flex: 1;
  flex-direction: column;
}

main {
  background-color: #eeeeee;
  color: #000000;
  padding: 2em;
}

a {
  text-decoration: none;
  color: black;
}

a:visited {
  color: rgb(76, 76, 76);
}

a:hover {
  color: #27083b;
}

#LoginHeading {
  /* width: 100%; */
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding-left: 50px;
  background-color: #000000;
  color: #fff;
  padding: 5px;
  text-align: right;
}

#LoginHeading a:link,
#LoginHeading a:hover,
#LoginHeading a:visited {
  color: #e7e7e7;
}

header {
  /* width: 100%; */
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding-left: 50px;
  background-color: #000000;
  color: #ffffff;
  height: 500px;
  background-image: url("images/util/congas.png");
  background-repeat: no-repeat;
  background-position: right;
}

/******** Menu with transisitions ***********/

:root {
  --blue: #1e90ff;
  --white: #ffffff;
  --min-width: 160px;
  --maincolor: #333;
  --secondarycolor: #9999b8;
  --markercolor: #7778bd;
  --testingcolor: #7072c0;

  /* use var(--blue); */
}

* {
  box-sizing: border-box;
}

nav {
  /* font-family: "Open Sans", sans-serif; */
  font-family: Arial, sans-serif;
  background: var(--maincolor);
  color: white;
  text-align: center;
}

#main {
  position: relative;
  list-style: none;
  background: var(--maincolor);
  font-weight: 400;
  font-size: 0;
  /* text-transform: uppercase; */
  display: inline-block;
  padding: 0;
  /* margin: 50px auto; */
}

/* The anchor css order matters */

#main a {
  text-decoration: none;
  color: #000;
}

#main a:visited {
  color: #000;
}

#main a:hover {
  color: #ffffff;
}

#main li {
  /* rem is a unit of measurement that defines font size relative to the root element of a document.  */
  font-size: 1rem;
  display: inline-block;
  position: relative;
  padding: 15px 20px;
  cursor: pointer;
  z-index: 1;
  min-width: 160px;
}

dl,
ol,
ul {
  margin-top: 0;
  margin-bottom: 0;
}

li {
  margin: 0;
}

.drop {
  overflow: hidden;
  list-style: none;
  position: absolute;
  padding: 0;
  width: 100%;
  left: 0;
  top: 48px;
  /* fixed the drop down hover problem. */
  visibility: hidden;
}

.drop div {
  -webkit-transform: translate(0, -100%);
  -moz-transform: translate(0, -100%);
  -ms-transform: translate(0, -100%);
  transform: translate(0, -100%);
  -webkit-transition: all 0.5s 0.1s;
  -moz-transition: all 0.5s 0.1s;
  -ms-transition: all 0.5s 0.1s;
  transition: all 0.5s 0.1s;
  position: relative;
  /* fixed the drop down hover problem. */
  visibility: visible;
}

.drop li {
  display: block;
  padding: 0;
  width: 100%;
  background: var(--secondarycolor);
}

#marker {
  height: 6px;
  background: var(--markercolor);
  position: absolute;
  bottom: 0;
  width: var(--min-width);
  z-index: 2;
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  -ms-transition: all 0.35s;
  transition: all 0.35s;
}

/* Add one of these for each menu item 
  and adjust the mnarker a multiple of the min witdth
*/

#main li:nth-child(1):hover ul div {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

#main li:nth-child(1):hover~#marker {
  -webkit-transform: translate(0px, 0);
  -moz-transform: translate(0px, 0);
  -ms-transform: translate(0px, 0);
  transform: translate(0px, 0);
}

#main li:nth-child(2):hover ul div {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

#main li:nth-child(2):hover~#marker {
  -webkit-transform: translate(var(--min-width) 0);
  -moz-transform: translate(var(--min-width), 0);
  -ms-transform: translate(var(--min-width), 0);
  transform: translate(var(--min-width), 0);
}

#main li:nth-child(3):hover ul div {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

#main li:nth-child(3):hover~#marker {
  -webkit-transform: translate(320px, 0);
  -moz-transform: translate(320px, 0);
  -ms-transform: translate(320px, 0);
  transform: translate(320px, 0);
}

#main li:nth-child(4):hover ul div {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

#main li:nth-child(4):hover~#marker {
  -webkit-transform: translate(480px, 0);
  -moz-transform: translate(480px, 0);
  -ms-transform: translate(480px, 0);
  transform: translate(480px, 0);
}

#main li:nth-child(5):hover ul div {
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
}

#main li:nth-child(5):hover~#marker {
  -webkit-transform: translate(640px, 0);
  -moz-transform: translate(640px, 0);
  -ms-transform: translate(640px, 0);
  transform: translate(640px, 0);
}

/************ end menu **************/

footer {
  font-style: italic;
  text-align: center;
  background-color: #444;
  color: #fff;
  padding: 0.5em;
  width: 100%;
  clear: both;
}

img {
  float: right;
}

.img_NewToTucker {
  float: left;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border: 3px solid #555;
  padding: .1em;
}

table {
  margin-left: auto;
  margin-right: auto;
}

table,
th,
td {
  border: 0px solid rgb(0, 0, 0);
  border-collapse: collapse;
}

th,
td {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
}

table.one {
  float: left;
  width: 45%;
}

table.two {
  width: 45%;
  float: right;
  background-color: #9f9f9f;
  border: 3px solid rgb(0, 0, 0);
  border-radius: 5px;
  color: white;
  margin-bottom: 20px;
}

tr:nth-child(even) {
  /* background-color: #a1a1a1; */
  background-color: #ffffff;
}

.small-caps {
  font-variant-caps: small-caps;
}

.pacifico-large {
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;

  position: relative;
  z-index: 100;
  font-size: 60px;
  margin: 0;
}

.pacifico-regular {
  font-family: "Pacifico", cursive;
  font-weight: 400;
  font-style: normal;

  position: relative;
  z-index: 100;
  font-size: 27px;
  margin: 0;
}

/* 
<uniquifier>: Use a unique and descriptive class name
<weight>: Use a value from 300 to 700
*/

.space-grotesk-font {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 30px;
}

#smallHeader {
  width: 100%;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  padding-left: 50px;
  background-color: #000000;
  color: #ffffff;
}

#smallHeader a:link,
#smallHeader a:hover,
#smallHeader a:visited {
  color: white;
}

.loginStyle {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: larger;
  font-weight: bold;
}

.logoutStyle {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: medium;
  font-weight: bold;
}

/*** Flexible Container ***/

.product-container {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.product-card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin: 10px;
  padding: 15px;
  text-align: center;
  width: 300px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.product-card img {
  max-width: 100%;
  height: auto;
  float: none;
}

.product-card h3 {
  font-size: 1.3em;
  margin: 10px 0;
}

.product-card p {
  font-size: 1.1em;
  color: #555;
}

.product-card:hover {
  transform: scale(1.05);
}

/****** Buy Button ********/

/* CSS */
.button-82-pushable {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
  transition: filter 250ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-82-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: hsl(0deg 0% 0% / 0.25);
  will-change: transform;
  transform: translateY(2px);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

.button-82-edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(to left,
      hsl(340deg 100% 16%) 0%,
      hsl(340deg 100% 32%) 8%,
      hsl(340deg 100% 32%) 92%,
      hsl(340deg 100% 16%) 100%);
}

.button-82-front {
  display: block;
  position: relative;
  padding: 12px 27px;
  border-radius: 12px;
  font-size: 1.1rem;
  color: white;
  background: hsl(345deg 100% 47%);
  will-change: transform;
  transform: translateY(-4px);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

@media (min-width: 768px) {
  .button-82-front {
    font-size: 1.25rem;
    padding: 12px 42px;
  }
}

.button-82-pushable:hover {
  filter: brightness(110%);
  -webkit-filter: brightness(110%);
}

.button-82-pushable:hover .button-82-front {
  transform: translateY(-6px);
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

.button-82-pushable:active .button-82-front {
  transform: translateY(-2px);
  transition: transform 34ms;
}

.button-82-pushable:hover .button-82-shadow {
  transform: translateY(4px);
  transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

.button-82-pushable:active .button-82-shadow {
  transform: translateY(1px);
  transition: transform 34ms;
}

.button-82-pushable:focus:not(:focus-visible) {
  outline: none;
}

/*************************/

.small-yellow-button {
  background-color: yellow;
  color: black;
  border: none;
  border-radius: 5px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.05s;
  font-weight: bolder;
  border: 2px solid rgb(0, 0, 0);
}

.small-yellow-button:hover {
  background-color: #dfdf00;
}

/*************************************************/


.flex-table {
  display: flex;
  flex-direction: column;
  width: 50%;
  max-width: 800px;
  border: 1px solid #000000;
  background-color: #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.flex-row {
  display: flex;
  width: 100%;
}

.flex-cell {
  flex: 1;
  padding: 8px;
  border-bottom: 1px solid #000000;
  /* text-align: center; */
}

.flex-header {
  background-color: #007bff;
  color: white;
  font-weight: bold;
}

.flex-row:last-child .flex-cell {
  border-bottom: none;
  text-align: center;
}

.flex-cell:not(:last-child) {
  border-right: 1px solid #ddd;
}

.btn {
  background-color: rgb(40, 22, 53);
  color: white;
  padding: 0.5rem;
  border-radius: 0.3rem;
  cursor: pointer;
}

.btn:hover {
  background-color: rgb(165, 153, 173);
}

/* for the upload button */
.custom-file-button {
  input[type="file"] {
    margin-left: -2px !important;

    &::-webkit-file-upload-button {
      display: none;
    }

    &::file-selector-button {
      display: none;
    }
  }

  &:hover {
    label {
      /* background-color: #dde0e3; */
      background-color: #c9c3cc;
      cursor: pointer;
    }
  }
}

.courier-font {
  font-family: "Courier New", Courier, monospace;
}

.center-div {
  text-align: center;
  /* border: 3px solid green; */
}

.center-contents {
  margin: auto;
  width: 50%;
  border: 3px solid rgb(14, 1, 27);
  padding: 10px;
}

.sale-price {
  color: green;
  text-decoration: brown;
  text-decoration-thickness: 3px;
  text-decoration-line: line-through
}

.price {
  color: green;
}

.dealofday {
  border: 4px solid rgb(206, 193, 19);
  background-color: rgb(255, 255, 255);
  width: 30%;
  padding: 10px;
  margin: 30px;
  /* margin-top: 8px;
  margin-left: 200px; */
  color: #000;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
}

.dealofday img {
  float: inline-end;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.prod_description {
  margin-right: 300px;
  margin-bottom: 20px;
}

.checkout_button {
  display: inline-block;
  background-color: #a70e0e;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 8px;
  transition-duration: 0.4s;
  margin-left: auto;
  margin-right: auto;
}

.checkout_button:hover {
  background-color: #a73535;
  /* Green */
  color: white;
}

.update_button {
  background-color: #04AA6D;
  /* Green */
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 12px;
}

.update_button:hover {
  background-color: #5fb193;
  /* Green */
  color: white;
}


/*** form and submit button formattin ***/

input[type=text] {
  padding: 5px;
  border: 2px solid #ccc;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

input[type=text]:focus {
  border-color: #333;
}

/* for the upload button */
.AddToCart_btn {
  background-color: rgb(160, 54, 54);
  color: white;
  padding: 0.5rem;
  border-radius: 0.3rem;
  cursor: pointer;
}

.AddToCart_btn:hover {
  background-color: rgb(163, 31, 31);
}

/********** User Login Form ****************/

/* General form styling */
.login_form {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-family: Arial, sans-serif;
}

/* Form elements */
.login_form label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-weight: bold;
}

.login_form input[type="text"],
.login_form input[type="email"],
.login_form input[type="password"],
.login_form textarea,
.login_form select {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.login_form input[type="text"]:focus,
.login_form input[type="email"]:focus,
.login_form input[type="password"]:focus,
.login_form textarea:focus,
.login_form select:focus {
  border-color: #5b9bd5;
  outline: none;
}

/* Submit button */
.login_form input[type="submit"] {
  width: 100%;
  padding: 12px;
  background-color: #5b9bd5;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Resest button */
.login_form input[type="reset"] {
  width: 100%;
  padding: 12px;
  background-color: #a1a1a1;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.login_form input[type="submit"]:hover {
  background-color: #4178a8;
}

.login_form input[type="reset"]:hover {
  background-color: #7c7c7c;
}

/************ end login **************/

.centered-header {
  text-align: center;
}

.splashDiv {
  background-color: #e4ded5;
  float: left;
	padding: 20px;
  width: 30%; 
  margin: 11px;
  border: 1px solid #97ae77;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}



/* Sign in button CSS */
.sign_in_button {
  align-items: center;
  appearance: none;
  background-color: #3EB2FD;
  background-image: linear-gradient(1deg, #4F58FD, #149BF3 99%);
  background-size: calc(100% + 20px) calc(100% + 20px);
  border-radius: 100px;
  border-width: 0;
  box-shadow: none;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-flex;
  font-family: CircularStd,sans-serif;
  font-size: 1rem;
  height: auto;
  justify-content: center;
  line-height: 1.5;
  padding: 6px 20px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s,background-position .2s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: top;
  white-space: nowrap;
}

.sign_in_button:active,
.sign_in_button:focus {
  outline: none;
}

.sign_in_button:hover {
  background-position: -20px -20px;
}

.sign_in_button:focus:not(:active) {
  box-shadow: rgba(40, 170, 255, 0.25) 0 0 0 .125em;
}

.sign_in_button:visited {
  color: rgb(243, 238, 239);
}

/** end sign in button **/

.nanum-gothic-regular {
  font-family: "Nanum Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/********** OLD Drop Down Menu Stuff ******************/

/* body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

nav {
  background-color: #333;
}

.menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.menu > li {
  position: relative;
}

.menu > li > a {
  display: block;
  padding: 15px;
  color: white;
  text-decoration: none;
}

.menu > li > a:hover {
  background-color: #555;
}

.dropdown {
  display: none;
  position: absolute;
  background-color: #444;
  list-style-type: none;
  padding: 0;
  margin: 0;
  min-width: 150px;
  z-index: 1;
}

.dropdown li a {
  padding: 10px;
  color: white;
  text-decoration: none;
  display: block;
}

.dropdown li a:hover {
  background-color: #555;
}

.menu > li:hover .dropdown {
  display: block;
} */

/********** end menu *****************/