/* currently used for rogue coloring only & niche music entries */
@import url("morecolors.css"); 

:root {
/*    --ash-grey: #b4b8abff;
    --deep-space-blue: #153243ff;
    --yale-blue: #284b63ff;
    --ivory: #f4f9e9ff;
    --soft-linen: #eef0ebff;
*/
    --bg-light: #b4b8abff;
    --bg-dark: #181a1bff;
    --text-dark: #ccc8c1ff;
    --link-dark: #95bbd4ff;

    
    --deep-space-blue: #153243ff;
    --yale-blue: #284b63ff;
    --ivory: #f4f9e9ff;
    --soft-linen: #eef0ebff;
}
@font-face {
  font-family: "Oswald";
  src:
    local("Oswald"),
    url("Oswald-VariableFont_wght.ttf") format("truetype")
}
@font-face {
  font-family: "Noto Sans";
  src:
    local("Noto Sans"),
    url("NotoSans-VariableFont_wdth,wght.ttf") format("truetype")
}

body {
    padding: 75px;
    background-color: var(--bg-dark);
    color: var(--text-dark);
    font-family: "Noto Sans";
}

/* Link Styling */
a {
    color: var(--link-dark);
    text-decoration: none;
}

a:hover, a:focus {
    color: hsl(from var(--link-dark) h s 80%);
}

h1, .h1 {
    font-size: 2em;
    font-weight: 500;
    font-family: "Oswald";
}

h2, .h2 {
    font-size: 1.5em;
    font-weight: 500;
    font-family: "Oswald";
}

h3, .h3 {
    font-size: 1em;
    font-weight: 500;
    font-family: "Oswald";
}

h4, .h4 {
    font-size: 1em;
    font-weight: 250;
    font-family: "Oswald";
}

.space_top {
    margin-top: .5em;
}

.noselect {
    /*-webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;*/
    cursor: default;
}

.disabled {
    cursor: default;
    pointer-events: none;
    opacity: 0.6;
}

.hidden {
    display:none !important;
}

/* swap out dots in lists */
ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  padding-left: 1em;
  text-indent: -1em;
}

ul ul {
    margin-left: 10px;
}

li:before {
  content: "-";
  color: var(--text-dark);
  padding-right: 5px;
}

/* basic buttons */
.btn {
    background-color: var(--bg-light);
    color: var(--deep-space-blue);
    padding: 10px;
    margin: 5px;
    user-select: none;
    cursor: pointer;
}

.btn:hover, .btn:focus {
    background-color: hsl(from var(--bg-light) h s 50%);
}

.btn-active {
    background-color: hsl(from var(--bg-light) h s 45%);
}

.money:before {
    content: "$";
}

.money {
    color: rgb(83, 123, 22);
}

@media screen and (max-width: 700px) {
    body {
        padding: 25px;
    }
}

/* https://stackoverflow.com/a/21320622 */
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

.flex_break {
    flex-basis: 100%;
}

.secondary {
    font-style:italic;
    opacity:.7;
}