@font-face {
  font-family: "FolkPro";
  src: url("FolkPro.otf");
}
@font-face {
  font-family: "Galliard";
  src: url("GalliardStd-Ultra.otf");
}

h1, h2, h3, h4, h5, h6 {
  font-family:'FolkPro';
  color: #FFCC00;
  text-align: center;
  margin-left: 25%;
  margin-right: 25%;
}

label {
  text-align: left;
  font-family:'FolkPro';
  color: white;
  padding-left: 10px;
  padding-right: 10px;
  user-select: none;
}

input[type=checkbox] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

input[type=text] {
  background-color: #ffffffAA;
}

select {
  padding-left: 10px;
  padding-right: 10px;
  background-color: #ffffffff;
}

.flags {
  font-size: large;
  background-color: #ddddddff;
  position:fixed;
  right:0px;
  bottom:90px;
  height:180px;
  width:85%;
  resize: none;
}

.generate-button {
  font-family: 'FolkOtf';
  background-color: #000010;
  font-size: xx-large;
  color: #07ffff;
  position:fixed;
  right:0px;
  bottom:0px;
  height:90px;
  width:20%;
  border-color: gold;
}

.flagset-label {
  font-size: 42px;
  font-family: 'Courier New';
  font-weight: bold;
  text-align: center;
  background-color: #000010;
  color: cyan;
  position:fixed;
  left:0px;
  bottom:90px;
  height:180px;
  width:15%;
  border-color: gold;
}

.tooltips {
  text-align: left;
  background-color: #000010;
  font-family: 'FolkOtf';
  font-size: larger;
  line-height: 1.2;
  color: white;
  position:fixed;
  left:0px;
  bottom:0px;
  height:90px;
  width:80%;
  padding-left: 12px;
}

.centered {
  text-align: center;
  font-size: larger;
}

.ui-divide {
  padding-top: 5px;
  margin: auto;
  display: grid;
  grid-template-columns: 28% 68%;
  gap: 10px;
}

.ui-grid {
  padding-top: 5px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  width: 100%;
  display: grid;
  text-wrap: nowrap;
  grid-template-columns: 33% 33% 33%;
  gap: 16px;
}

.flag-entry {
  text-align: left;
  background-color: #7700ff5d;
  padding: 12px;
}

.adv-header-grid {
  width: 100%;
  display: grid;
  text-wrap: nowrap;
  grid-template-columns: 33% 33% 33%;
  font-size: x-large;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 60px;
  padding-right: 60px;
}

.adv-seed-entry {
  text-align: center;
}

.adv-flag-entry {
  text-align: left;
  font-size: large;
  background-color: #AA00FF20;
  padding: 12px;
}

.adv-range-grid {
  width: 90%;
  display: grid;
  text-wrap: nowrap;
  margin-top: 12px;
  margin-right: auto;
  grid-template-columns: 40% 10% 40% 10%;
}

.adv-min {
  display: grid;
  grid-template-columns: 70% 30%;
}

.adv-max {
  display: grid;
  grid-template-columns: 70% 30%;
}

input[type=number] {
  text-align: center;
  font-size: larger;
}

.adv-percent-sign {
  font-size: 24px;
  color: gold;
  font-weight: bolder;
}

.adv-divider {
  margin-left: -18px;
}

.menu-options {
  width: 90%;
  background-color: #7700ff5d;
  margin-top: 12px;
  margin-left: auto;
}

.menu-options input[type=radio] {
  visibility: hidden;
}

.menu-options label {
  width: 95%;
  font-size: xx-large;
  text-align: center;
  padding-bottom: 8px;
  cursor: pointer;
  user-select: none;
}

.drop-zone {
  max-width: 600px;
  height: 200px;
  padding: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /*font-family: 'Courier New', Courier, monospace;*/
  font-weight: 500;
  font-size: 24px;
  cursor: pointer;
  color: #22FF00;
  background-color: rgba(1, 1, 1, 0.50);
  border: 5px dashed #0099BB;
  border-radius: 12px;
  margin: auto;
}

.drop-zone--over {
  border-style: solid;
}

.drop-zone__input {
  display: none;
}

.drop-zone__thumb {
  width: 30%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background-color: #000000;
  background-size: cover;
  background-image: url("disc.png");
  position: relative;
}

.drop-zone__thumb::after {
  content: attr(data-label);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px 0;
  color: #ffffff;
  background: rgba(0,0,0,0.75);
  font-size: 14px;
  text-align: center;
}

.button-submit {
  width: 512;
  height: 128;
  position: relative;
  margin: auto;
}

.button-submit input {
  width: 100%;
  height: 100%;
  z-index: 9;
  color: #FFCC00;
}

.overlay-button {
  font-family: 'FolkPro';
  position: absolute;
  text-align: center;
  top: 10;
  left: 96;
  font-size: 64;
  color: #FFCC00;
  -webkit-user-select: none;
  -ms-user-select: none; 
  user-select: none;
  pointer-events: none;
}

.form-select {
  max-width: 200px;
  height: 40px;
  margin-left: 10px;
}

.seed-input-field {
  margin: auto;
  max-width: 200px;
  height: 40px;
  margin-left: 10px;
}

.log-display {
  display: grid;
  padding: 10px;
  margin: auto;
  max-width: 44%;
  grid-template-columns: 40% 20% 20% 20%;
  gap: 2px;
  background-color: #aa40ff40;
}

#overlay {
  position: fixed; /* Ensures it covers the entire viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 1, 0.9); /* Black with 50% opacity */
  z-index: 9999; /* Ensures it's on top of other content */
  display: none; /* Hidden by default */
}

video#bg-video {
  /*background: url(first-frame.png) no-repeat;*/
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -10;
  overflow: hidden;
}

/*body {
/*        background-image: url('background.png'); /* Replace with your image path */
/*        background-position: center center; */
/*        background-repeat: no-repeat; */
/*        background-size: cover; */
/*        background-attachment: fixed; */
/*    } */

a {
  text-decoration: none;
  color: inherit;
}

i.fa {
  vertical-align: middle;
}