h3 {
    font-size: 100%;
}

html {
    height: 100%;
}
body {
    margin: 0;
    height: 100%;
    background-color: #FF8400;
}


.faster-one-regular {
  font-family: "Faster One", system-ui;
  font-weight: 400;
  font-style: normal;
}



#back{
    display: flex;
    flex-direction: column;
background-color: #452829;
opacity: 0.9;
background: radial-gradient(circle, transparent 20%, #452829 20%, #452829 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #452829 20%, #452829 80%, transparent 80%, transparent) 25px 25px, linear-gradient(#F3E8DF 2px, transparent 2px) 0 -1px, linear-gradient(90deg, #F3E8DF 2px, #452829 2px) -1px 0;
background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px;
    margin-right: 10%;
    margin-left: 10%;
}

.elms-sans-title {
  font-family: "Elms Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  letter-spacing: 6px;
}

.goldman-regular {
  font-family: "Goldman", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.goldman-bold {
  font-family: "Goldman", sans-serif;
  font-weight: 700;
  font-style: normal;
}


.lexend-text {
  font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.anton-regular {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.centerBox {
        display: flex;
    flex-direction: column;
    align-items: center;
}


#titleBox {
      background-image: linear-gradient(
       to bottom,
        #F3E8DF 25%,
         #452829 95%)
}
#titleH1 {
    margin-top: 5%;
    margin-bottom: 10%;
}
#abc {
   margin: 1%; 
     font-size: xx-large;
     margin-top: 5%;
}
.line {
    height: 1vh;
    border-radius: 25px;
    width: 90%;
    background-color: #B44C34;
}

.clearColor {
    background-color: rgba(255, 0, 0, 0); 

}

#pitfallFlexCon {
    display: flex;
    background-color: black;
    margin: 5%;
        border-radius: 25px;
            border: 20px,solid,black;
}
#pitfallGridCon {
    
    display: grid;
    
    background-color: #B44C34;
    width: 100%;
    margin: 3%;
    gap: 2px;
    padding: 2px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto auto;
}

.allPitCells {
    background-color: #F3E8DF;
    font-family: "Lexend", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;

}

.subHeader {
    grid-column: span 4;

}
.testBox {
    display: flex;

}

.headBox {
    justify-content: center;
    align-items: center;
}


#buttonBox {
    display: flex;
    flex-direction: column;
    background-color: #F3E8DF;
    margin: 20px;
    border-radius: 25px;
    border: 20px,solid,black;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 25px;
}

#listSelcLab{
    margin-right: 15px;
}

#halfGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 5%;
    border: 5px,solid,#B44C34;
    border-radius: 50px;
}

#editDataBox {
    display: flex;
    flex-direction: column;
    margin-left: 5px;
    margin-right: 5px;
}



.dataGridBox {
    display: flex;
    justify-content: center;
}

.dEItem1{
    font-size:125%;
}
.dEItem2{
    font-size:80%;
}
.dEItem3{

            padding-top: 2% ;
    padding-bottom: 2% ;
    padding-left: 14.5% ;
    padding-right:14.5% ;
    border-radius: 25px;
    
}



/* CSS */
.button-78 {
  align-items: center;
  appearance: none;
  background-clip: padding-box;
  background-color: initial;
  background-image: none;
  border-style: none;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  flex-direction: row;
  flex-shrink: 0;
  font-family: Eina01,sans-serif;
  font-size: 16px;
  font-weight: 800;
  justify-content: center;
  line-height: 24px;
  margin: 0;
  min-height: 64px;
  outline: none;
  overflow: visible;
  padding: 19px 26px;
  pointer-events: auto;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  width: auto;
  word-break: keep-all;
  z-index: 0;
}

@media (min-width: 768px) {
  .button-78 {
    padding: 19px 32px;
  }
}

.button-78:before,
.button-78:after {
  border-radius: 80px;
}

.button-78:before {
  background-image: linear-gradient(92.83deg, #ff7426 0, #f93a13 100%);
  content: "";
  display: block;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -2;
}

.button-78:after {
  background-color: initial;
  background-image: linear-gradient(#541a0f 0, #0c0d0d 100%);
  bottom: 4px;
  content: "";
  display: block;
  left: 4px;
  overflow: hidden;
  position: absolute;
  right: 4px;
  top: 4px;
  transition: all 100ms ease-out;
  z-index: -1;
}

.button-78:hover:not(:disabled):before {
  background: linear-gradient(92.83deg, rgb(255, 116, 38) 0%, rgb(249, 58, 19) 100%);
}

.button-78:hover:not(:disabled):after {
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  transition-timing-function: ease-in;
  opacity: 0;
}

.button-78:active:not(:disabled) {
  color: #ccc;
}

.button-78:active:not(:disabled):before {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), linear-gradient(92.83deg, #ff7426 0, #f93a13 100%);
}

.button-78:active:not(:disabled):after {
  background-image: linear-gradient(#541a0f 0, #0c0d0d 100%);
  bottom: 4px;
  left: 4px;
  right: 4px;
  top: 4px;
}

.button-78:disabled {
  cursor: default;
  opacity: .24;
}


#dataEntTitle{
    display: flex;
    justify-content: center;
}

#dataTitle {
    font-size: larger;
}



.form-container {
  display: grid;
  /* Creates one column that takes up available space (1fr) */
  grid-template-columns: 1fr; 
  gap: 10px; /* Adds space between the items */
  width: 100%; /* Ensures the container is responsive */

}

#middleSpacer{
    height: 30px;
}

#removeFormGap {
    gap: 0px;
}
.form-item  > *
 {
  /* Forces all children to take the full width of their grid cell */
  width: 70%; 
  box-sizing: border-box; /* Ensures padding/border are included in the 100% width */
  padding: 5px; /* Optional: for consistent height/appearance */
}
.form-item-row {
    display: flex;
      /* Forces all children to take the full width of their grid cell */
  width: 100%; 
  box-sizing: border-box; /* Ensures padding/border are included in the 100% width */
  padding: 5px; /* Optional: for consistent height/appearance */
}
.form-item button {
    border-radius: 25px;
            padding-top: 2% ;
    padding-bottom: 2% ;
}

.list-item-button {

    border-radius: 25px;
   background: none;
  border: none;
  padding: 0;
  cursor: pointer 
  
}

.list-item-button-img {
    display: block; /* Prevents extra space below */
  width: 1.1em; /* Adjust as needed */
  background-color: rgba(220, 20, 60,0.5);
  border-radius: 25px;
  margin-left: 5px;
  height: auto

}

.json-img {
    width: 1.1em;
    margin-left: 5px;
}

li {
      list-style-type: none;
}


.overlay{

    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:1000;
}

#marginBackLeft{
background-image: url(./bgGif.gif);
background-size: contain;
height: 100%;
width: 10%;
margin-right: 90%;
}

#marginBackRight{
background-image: url(./bgGif.gif);
background-size: contain;
height: 100%;
width: 10%;
margin-left: 90%;
}


.list-item-button-img-up{
    display: block; /* Prevents extra space below */
  width: 1.1em; /* Adjust as needed */
  background-color: rgb(169, 226, 246);
  border-radius: 25px;
  margin-left: 5px;
  height: auto

}
.list-item-button-up {
   border-radius: 25px;
   background: none;
  border: none;
  padding: 0;
  cursor: pointer 
}
.list-item-button-img-down{
    display: block; /* Prevents extra space below */
  width: 1.1em; /* Adjust as needed */
  background-color: rgb(169, 226, 246);
  border-radius: 25px;
  margin-left: 5px;
  height: auto

}
.list-item-button-down {
     border-radius: 25px;
   background: none;
  border: none;
  padding: 0;
  cursor: pointer 
}

.circleNum {
  width: 0.9em; /* Adjust as needed */
  background-color: #E0DDDD;
  border-radius: 25px;
  margin-right: 5px;
  height: auto

}