html,
body {
   background-color: #04080b;
   color: #e7eff6;
   font-family: Oswald, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}

fieldset {
   border: none;
}

x-units {
   display: flex;
   flex-wrap: wrap;
   min-height: 70px;
}

img {
   user-select: none;
   -webkit-user-drag: none;
}

#mainTitle {
   background-image: linear-gradient(to bottom, #fff, #85afd0);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   -webkit-text-fill-color: transparent;
}

x-units {
   gap: 5px;
}

x-unit-tile {
   cursor: pointer;
   transition: all 0.1s;
}

x-unit-tile.infernals-hover:hover {
   box-shadow: #a83100 0 0 10px;
}

x-unit-tile.vanguard-hover:hover {
   box-shadow: #4079a4 0 0 10px;
}

x-unit-tile:active {
   transform: translateY(4px);
}

#productionBuildings > x-unit-tile {
   transform: none;
   cursor: default;
}

label {
   padding: 5px;
}

#raceSelection {
   display: flex;
   gap: 10px;
   padding: 5px;
   margin: 15px;
}

#requiredResPro,
#requiredProBuildings {
   /* border: 2px solid #036062;
   border-radius: 5px;
   box-shadow: #e7eff6 0 0 10px; */
   padding: 5px;
   margin: 15px;
   gap: 10px;
}

#unitFrame {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   max-width: 528px;
}

#currentRacePicker,
#currentRacePicker option {
   text-transform: capitalize;
}

#currentRacePicker.vanguard-pick {
   color: #04080b;
   background-color: #e7eff6;
   border: 2px solid #036062;
   border-radius: 5px;
   box-shadow: #e7eff6 0 0 10px;
   padding: 5px;
   transition: all 0.3s;
}

#currentRacePicker.vanguard-pick:hover {
   box-shadow: #036062 0 0 10px;
}

#currentRacePicker.infernals-pick {
   color: #04080b;
   background-color: #e7eff6;
   border: 2px solid #a10000;
   border-radius: 5px;
   box-shadow: #e7eff6 0 0 10px;
   padding: 5px;
   transition: all 0.3s;
}

#currentRacePicker.infernals-pick:hover {
   box-shadow: #a10000 0 0 10px;
}

#ssPerMinuteTile:hover {
   box-shadow: none;
   cursor: default;
}

#ssPerMinuteTile:active {
   transform: none;
}

#resetButton.vanguard-reset {
   cursor: pointer;
   background-color: #036062;
   border: 2px solid #036062;
   border-radius: 5px;
   box-shadow: #e7eff6 0 0 10px;
   color: #e7eff6;
   padding: 8px;
   transition: all 0.3s;
   font-size: 16px;
}

#resetButton.vanguard-reset:hover {
   background-color: #e7eff6;
   border: 2px solid #e7eff6;
   color: #036062;
}

#resetButton.vanguard-reset:active {
   box-shadow: #036062 0 0 10px;
   transform: translateY(4px);
}

#resetButton.infernals-reset {
   cursor: pointer;
   background-color: #a10000;
   border: 2px solid #a10000;
   border-radius: 5px;
   box-shadow: #a10000 0 0 10px;
   color: #e3b3b3;
   padding: 8px;
   transition: all 0.3s;
   font-size: 16px;
}

#resetButton.infernals-reset:hover {
   background-color: #f6e6e6;
   border: 2px solid #f6e6e6;
   color: #200000;
   box-shadow: #f6e6e6 0 0 10px;
}

#resetButton.infernals-reset:active {
   box-shadow: #a10000 0 0 10px;
   transform: translateY(4px);
}

#svg {
    width: 1em;
    height: 1em;
}

.info {
   font-weight: lighter;
   color: cyan;
   font-size: 110%;
   padding-left: 0.5rem;
   text-decoration: none;
}