@font-face {
    font-family: 'Roboto';
    src: url('/css/fonts/Roboto-Regular.ttf') format('truetype');
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Anton';
    src: url('/css/fonts/Anton-Regular.ttf') format('truetype');
    font-style: normal;
    font-display: swap
}
@media (prefers-contrast: more) {
  html {
    filter: contrast(120%);
    }
}

.anton {
    font-family: 'Anton', sans-serif;
}

* {
  box-sizing: border-box;
  }

body {
    margin: 0 0 0 0;
    padding: 0 0;
    font-family: 'Roboto', sans-serif;
    background-color: #ffffff;
}


TABLE {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
}

TD {
    padding: 0;
    margin: 0;
    font-size: var(--font-size-norm);
}

HR {
  height: 1px;
  margin-bottom: 8px;
  border: none;
  background-color: var(--color-accent);
}

h1, h2, h3 {
  font-weight: normal;
  margin: 0;
}


A { 
    color: var(--color-accent);
    text-decoration: none;
}


ul {
  padding-left: 20px; /* Reduce this value to decrease indent */
  margin-left: 0;     /* Optional: remove extra margin */
}

li {
  padding-left: 0;    /* Usually not needed unless you want extra control */
}

select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"] {
  width: 100%;
  /* max-width: 300px; */
  padding: 3px 4px 3px 5px;
  /* font-size: 12px;*/
  color: var(--color-input-text);
  background-color: var(--color-background-textbox);
  border: 1px solid var(--color-background-textarea);
  border-radius: 6px;
  box-sizing: border-box;
  transition: border-color 0.3s, box-shadow 0.3s;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Target placeholder text in text-like inputs */
select,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
input[type="url"]::placeholder,
input[type="tel"]::placeholder,
input[type="number"]::placeholder {
  color: #888;
}

/* Target focus styles for text-like inputs */
select,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus {
  outline: none;
  border-color: #029e55;
  /* box-shadow: 0 0 5px rgba(0, 255, 136, 0.5); */
}

pre {
  margin: 10px 0 0 30px;
  padding: 5px 5px 5px 5px;
  border-color: #727272;
  border-style: solid;
  border-width: 0 0 0 2px;
}

code {
  color: #000000;
}


/* text box areas */
textarea {
  padding: 5px;
  box-sizing: border-box;
  border: 1px solid var(--color-background-textarea);
  border-radius: 4px;
  resize: none; /* or none, both, horizontal */
  color: var(--color-font);
  background-color: var(--color-background-textarea);
  transition: .3s;
}

textarea:focus {
  outline: none;
  border: 1px solid #029e55 !important;
  background-color: var(--color-background-textareahover);
  transition: .1s;
}


/* details / summary */
details {
  cursor: default;
}

summary {
  cursor: pointer;
}




.hr-outer {
  border-style: solid;
  border-width: 1px 0 1px 0;
  border-color: var(--color-accent);
}

.target {
  background-color: #fff3cc; /* Soft yellow highlight */
  border-left: 4px solid #ff8a04; /* Accent bar on the left */
  padding: 3px 3px;
}


.wrp {
  white-space: normal;
}

.nowrp {
  white-space: nowrap;
}


.div-tr {
  display: flex;         /* Places children side-by-side */
  flex-wrap: nowrap;     /* Forces children to stay on one line */
  width: 100%;
}

.div-td { flex-shrink: 0; }
.div-td-grow { flex-grow: 1; }

.fontNorm   { font-size: var(--font-size-norm) !important; }
.fontMedium { font-size: var(--font-size-medium) !important; }
.fontLarge  { font-size: var(--font-size-large) !important; }
.fontHuge   { font-size: var(--font-size-huge) !important; }