body{
    margin:0;
    overflow:hidden;
    background:#212121;
    /* font-family:sans-serif;
    font-family: Inter, "Segoe UI", Arial, sans-serif; */
}

#saveName{
    width:auto;
}
#ui{
    width: 25%;          
  /* height: 100%; */
  /* min-width: 240px;      */
    min-width: 25%;     
  background: #161616;
  /* background: #151618; */
    /* background: rgb(15, 16, 17); */
  color: white;
  padding: 10px;
      display: inline-block;
  text-align: center;
  /* overflow-y: auto;    */
  border-left: 1px solid #333;
  box-sizing: border-box;
    scrollbar-color:  rgb(119, 119, 119) rgb(0, 0, 0);
  scrollbar-width: thin;

    /* height: 100vh; */
    height: 100dvh;
  overflow-y: auto;
    position: sticky;
    top: 0;
}

button {
    margin-top: 10px;
  /* padding: 17px 40px; */
      /* padding:12px; */
            padding:8px;
    background:#222;
  border-radius: 50px;
  cursor: pointer;
  border: 0;
  /* background-color: white; */
  /* box-shadow: rgb(0 0 0 / 5%) 0 0 8px; */
  letter-spacing: 1.5px;
  text-transform: uppercase;
  /* font-size: 15px; */
  transition: all 0.2s ease;

    /* display: block;
    line-height: normal; */
}
#reshuffleButtons {
  position: relative;
  z-index: 9999;
}
/* button:hover {
  letter-spacing: 3px;
  background-color: hsl(261deg 80% 48%);
  color: hsl(0, 0%, 100%);
  box-shadow: rgb(93 24 220) 0px 7px 29px 0px;
} */
button:hover{
  outline: solid;
}
button:enabled {
  /* letter-spacing: 3px; */
  background-color: hsl(0, 0%, 0%);
    /* background-color: hsl(209, 70%, 50%); */
    /* background-color: hsl(209, 50%, 50%);     */
        /* background-color: hsl(209, 40%, 50%);     */
        /* background-color: hsl(210, 19%, 25%);     */
        
        /* background-color: hsl(34, 70%, 50%); */
  color: hsl(0, 0%, 100%);
  /* box-shadow: rgba(169, 160, 187, 0.678) 0px 7px 29px 0px; */
}

button:active:enabled {
  /* letter-spacing: 3px; */
  background-color: hsl(0, 0%, 64%);
  color: hsl(0, 0%, 100%);
  transform: scale(0.95);
  /* box-shadow: rgb(93 24 220) 0px 0px 0px 0px; */
    /* box-shadow: rgb(175, 161, 201) 0px 0px 0px 0px; */
  /* transform: translateY(10px);
  transition: 100ms; */
    /* transform: scale(0.97); */
}

button:disabled{
        color:rgb(134, 134, 134);
}
input{
    width:100%;
    margin-bottom:6px;
    padding:6px;
    background:#000;
    color:white;
    border:1px solid #333;
}

table{
        border-radius: 8px;
        padding:6px;
        background:black;
    width:100%;
    border-collapse:collapse;
}

/* td,th{
    border:1px solid #333;
    padding:3px;
    text-align:center;
} */
rd{
    /* border:1px solid #333; */
    padding:3px;
    text-align:center;  
}

th{
     /* border:1px solid #333; */
    padding:3px;
    text-align:center;   
}
.matrixInput{

    background:black;
    color:white;
    /* border:1px solid #333; */
}
#energy{
    font-size:24px;
    
    /* margin-bottom:20px;
      position: sticky;
          padding: 6px;
  top: 0;
  background:black; */
}
#darkEnergy{
    font-size:14px;
}
#energyHolder{
    /* font-size:24px; */
    margin-bottom:20px;
      position: sticky;
          padding: 6px;
  top: 0;
  /* background:black; */
    background: #161616;
    border-radius: 50px;
  
}

#barContainer{

    height:15px;
    background:#333;
    border-radius:0px;
    overflow:hidden;
}


body{
    /* font-family: Bahnschrift; */
    background:#111;
    color:white;
    /* font-family:sans-serif; */
    font-family: Bahnschrift, Inter, "Segoe UI", Arial, sans-serif;

}

.generator{
        /* background:black;
    padding:4px;
  width: 100%;
  height: 100%;
          border-radius: 12px; */
    
              width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 4px;
    overflow: hidden;
    /* background:black; */
    border-radius: 12px;



        width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 6px;
    overflow: hidden;
    /* background:black; */
    border-radius: 12px;
}
#generators{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        /* grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); */
    gap: 8px;
    
}
#DEGContainer{
    gap: 8px;   
        margin:8px; 
}
#info{
    text-align: left;
}
#reshuffleButtons{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 8px;
    margin:8px;

    
}
.shuffleButton{
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 6px;
    overflow: hidden;
}
#upgradeContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.upgrade {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 6px;
    overflow: hidden;
    /* background:black; */
        /* background: #636363; */
    border-radius: 12px;
  
}

.upgrade button {
    width: 100%;
    font-size: 12px;
    white-space: normal;
}
.barContainer{
    height:15px;
    background:#333;
    border-radius:0px;
    overflow:hidden;
        border-radius: 12px;
}

.barFill{
    height:100%;
    width:0%;
    margin-bottom:10px;
        border-radius: 12px;
}

.colorPickerHolder{
        overflow:none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 10px;

  height: auto;
}
.colorPicker{
    padding:4px;
    width: 100%;
    height: 100%;
            border-radius: 12px;
    /* height: 20px; */

}
.offline-popup{
    margin-bottom:20px;
      position: sticky;
          /* padding: 6px; */
    top: 0;
    background: #1e1e1e;
    color: white;
    margin:10px;
    padding: 12px 20px;
    border-radius: 8px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
line-height: 1.8;
    z-index: 1000;
}
.fullScreenButton{
  width:100%;
      border-radius: 0px;
          margin-bottom:10px;
  top: 0;
}

#mainContainer {
display: flex;
  width: 100vw;
  min-height: 0;
}
#canvasContainer {
    width: 75%;
}
#my-canvas {
    width: 100%;
    aspect-ratio: 1440 / 1080;
      display: block;

      
}
#buttonMargin{
    margin-bottom: 40px;
}

@media (orientation: portrait) {

  #mainContainer {
    flex-direction: column;
  }

  #canvasContainer {
    width: 100%;
  }

  #ui {
    width: 100%;
    max-height: 50vh;
  }

}

.pushable {
  position: relative;
  background: transparent;
  padding: 0px;
  border: none;
  cursor: pointer;
  outline-offset: 4px;
  outline-color: deeppink;
  transition: filter 250ms;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.shadow {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: hsl(226, 25%, 69%);
  border-radius: 8px;
  filter: blur(2px);
  will-change: transform;
  transform: translateY(2px);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

.edge {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 8px;
  background: linear-gradient(
    to right,
    hsl(240, 1%, 21%) 0%,
    hsl(249, 4%, 33%) 8%,
    hsl(247, 10%, 35%) 92%,
    hsl(0, 0%, 15%) 100%
  );
}

.front {
  display: block;
  position: relative;
  border-radius: 8px;
  background: #6d6b6b;
  padding: 4px 4px;
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 1rem;
  transform: translateY(-4px);
  transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}

.pushable:hover {
  filter: brightness(110%);
}

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

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

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

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

.pushable:focus:not(:focus-visible) {
  outline: none;
}
pushable:disabled{
     color: red; 
}

svg {
  margin-top: -20px;
  margin-bottom: -20px;
  margin-right: 5px;
  margin-left: 5px;
}