/* Basic Reset */
body,
h1,
h2,
h3,
p,
figure,
figcaption {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Base Styles */
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /* font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; */
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.33;
  padding: 20px;
  background-color: #f4f4f4;
  color: #333;
}

/* Container */
.container {
    /* max-width:1000px;  */
}
.inner-container {
  max-width: 1200px;
  margin: auto;
  /* background: #fff;  */
  padding: 2px;
}

/* Responsive Images */
img {
  max-width: 100%;
  height: auto;
}

/* Navigation */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background: #333; */
  background: #f6f6f6;
  /* color: #fff; */
  padding: 10px;
}

nav a {
  color: #fff;
  text-decoration: none;
  padding: 10px;
}
nav button {
  cursor: pointer;
  padding: 10px;
  width: 100px;
  line-height:1rem;
}

/* Grid */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 8px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 8px;
}

.debug,
.grid-item.debug {
  border: 1px dashed red;
}

#gas span {
}

#eth p,
#sumTotal p,
#block-native p,
#gas p,
#output p {
  margin: 0;
  /* margin-bottom: 5px; */
}

.bn,
.gwei,
.total,
.sumTotal,
.ethPrice,
.account {
  /* font-size: 1em; */
  /* display: inline-block; */
  /* width: 100px; */
  /* text-align: right; */
}

#theTotal,
.eth,
.usdSum,
.sum,
.balance {
  font-weight: bold;
}

.sum {
  border: 1px solid #ccc;
  padding: 2px;
}

#buttons.debug {
  border: 1px dashed blue;
}

#clock,
#refresh {
}

small {
  font-size: 14px;
}

.safe {
  background-color: #5aea98;
}
.safe-gas {
  border-bottom: 2px solid #5aea98;
}

#ethX {
  float: right;
  position: absolute;
  top: 26px;
  right: 50vw;
  right: 10vw;
  text-align: center;
  text-align: right;
  padding: 5px;

  /* border:1px dashed red; */
}
.ethX {
  border: 2px solid #5aea98;
  padding: 2px;
}
#theTotal,
#total .sum,
.max .account {
  background: yellow;
}
.min .account {
  background: pink;
}

.balance{
  display:inline-block;
  margin-right:1px;
  width:60px;
}

.usdbal-base,
.usdbal-sol,
.usdbal{
  display:inline-block;
  font-size:12px;
  margin-left:3px;
  width:50px;
  
  /* border:1px dashed red; */
}

#sumTotal .usdSum,
.max .balance {
  /* border: 2px solid yellow; */
  /* margin-right:-2px; */
}
.min .balance {
  /* border: 2px solid pink; */
  /* margin-right:-2px; */
}

hr.math-line{
  margin:7px auto;
  width:80%;
}

.low {
  color:red;
}
.high {
  color:#00FF00;
}

/* Specific Adjustments for Highlighting */
#theTotal,
#total .sum,
.max .account,
.min .account,
#sumTotal .usdSum,
.max .balance,
.min .balance {
  /* Your specific highlight styles */
}

/* Ensuring styles for smaller screens */
@media (max-width: 600px) {
  /* Adjust font sizes and layouts for readability on small devices */
  h1,
  h2,
  h3,
  p {
    font-size: calc(100% + 1vw);
  }

  .safe,
  .safe-gas {
    background-color: #5aea98;
    border-bottom: 2px solid #5aea98;
  }
}

/* Responsive Grid for Smaller Devices */
@media (max-width: 960px) {
  .wrapper {
    width: auto; /* Allows the wrapper to adjust based on screen size */
  }

  .wrapper .inner {
    grid-template-columns: repeat(
      2,
      1fr
    ); /* Adjust columns for smaller screens */
  }

  /* Responsive Button and Form Styles */
  button,
  #buttons {
    display: block;
  }
}

/* Single Column Layout for Mobile Devices */
@media (max-width: 600px) {
  .wrapper .inner {
    grid-template-columns: 1fr; /* Single column layout for mobile screens */
  }
  .grid-item {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Added for depth */
  }
}
/* Media Queries */
@media (max-width: 768px) {
  .grid-2,
  .grid-3 {
    grid-template-columns: 1fr;
  }
}