@font-face {
  font-family: "Undertale";
  src: url("fonts/Undertale-Regular.eot");

  src: url("fonts/Undertale-Regular.eot?#iefix") format("embedded-opentype"),
    url("fonts/Undertale-Regular.woff") format("woff"),
    url("fonts/Undertale-Regular.ttf") format("truetype"),
    url("fonts/Undertale-Regular.svg#svgFontName") format("svg");
}

@font-face {
  font-family: "Undertale-Bold";
  src: url("fonts/Undertale-Bold.eot");

  src: url("fonts/Undertale-Bold.eot?#iefix") format("embedded-opentype"),
    url("fonts/Undertale-Bold.woff") format("woff"),
    url("fonts/Undertale-Bold.ttf") format("truetype"),
    url("fonts/Undertale-Bold.svg#svgFontName") format("svg");
}

* {
  font-family: "Undertale-Bold", monospace;
  color: #fff;
}

body {
  margin: 2rem auto;
  background: #000;
  max-width: 64rem;
}

h1 {
  font-size: 1.5rem;
  line-height: 2rem;
  margin: 0;
}

h3 {
  padding-top: 0.5rem;
  padding-bottom: 0.25rem;
  margin: 0;
}

a {
  font-size: 1.25rem;
  color: #f4e656;
  text-decoration: none;
  margin: 0;
}

a:hover {
  color: #f9a64c;
  margin: 0;
}

p {
  margin: 0;
}

header {
  display: flex;
  margin: auto;
  /* align-items: center;
  justify-content: center; */
}

section {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  -moz-gap: 0.325rem;
  gap: 0.325rem;
  margin-top: 0.5rem;
}

fieldset {
  background: #000;
  border: 3px solid #fff;
  padding-bottom: 0.9rem;
}

legend {
  font-size: 1.25rem;
}

.disabled {
  background: #151515;
  pointer-events: none;
}

button,
select,
input:not([type="file"]):not([type="checkbox"]),
[for="ini-file"],
[for="sav-file"] {
  box-sizing: border-box;
  background: #090909;
  border: 2px solid #292929;
  font-size: 100%;
  display: flex;
  -moz-gap: 0.325rem;
  gap: 0.325rem;
  align-items: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  height: 2.25rem;
  justify-content: center;
  appearance: none;
  margin: 0;
}

.checkbox {
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  -moz-gap: 0.5rem;
  gap: 0.5rem;
}

[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  vertical-align: middle;
  width: 1.25rem;
  height: 1.25rem;
  color: #fb984a;
  background: #090909;
  border: 2px solid #292929;
  margin: 0 0 1px 0;
}

select {
  background-repeat: no-repeat;
  background-position: right;
  background-size: 14px;
  background-origin: content-box;
  background-image: url("data:image/svg+xml,%3csvg  viewBox='0 0 24 24' fill='gray' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z'/%3e%3c/svg%3e");
}

[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  background-color: currentColor;
}

button:focus,
button:hover,
select:focus,
input:not([type="file"]):not([type="checkbox"]):focus,
[for="ini-file"]:focus,
[for="ini-file"]:hover,
[for="sav-file"]:focus,
[for="sav-file"]:hover {
  border: 2px solid #fff;
  font-size: 100%;
  outline: none;
}

button,
[for="ini-file"],
[for="sav-file"] {
  cursor: pointer;
}

::placeholder {
  color: #aaaaaa;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.mt-1\.5 {
  margin-top: 0.325rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.w-full {
  width: 100%;
}

.grid {
  display: grid;
  -moz-gap: 0.325rem;
  gap: 0.325rem;
}

.grid-cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  -moz-gap: 0.325rem;
  gap: 0.325rem;
}

.grid-cols-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  -moz-gap: 0.325rem;
  gap: 0.325rem;
}

.grid-cols-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  -moz-gap: 0.325rem;
  gap: 0.325rem;
}

.grid-cols-6 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  -moz-gap: 0.325rem;
  gap: 0.325rem;
}

.grid-cols-7 {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  -moz-gap: 0.325rem;
  gap: 0.325rem;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.col-span-3 {
  grid-column: span 3 / span 3;
}

.col-span-4 {
  grid-column: span 4 / span 4;
}

.row-span-2 {
  grid-row: span 2 / span 2;
}

th {
  text-align: left;
}

td:first-child {
  color: #bbbbbb;
}

.gray {
  color: #888888;
}

.red {
  color: #ff0000;
}

.hidden {
    display: none;
}

#advanced label {
    cursor: help;
}

#custom-tooltip {
    display: none;
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 9999;
    font-family: "Undertale", monospace;
}