:root {
    /* --font-size: 33px; */
    --bg-color: white;
    --bg-transparent: #FFFC;
    --font-color: black;
    --primary-color: #777;
    --secondary-color: gainsboro;
    --selected-color: blue;
    
    --focus-bg: rgba(95, 179, 251, 0.2)
}

                                       
/* @media(prefers-color-scheme: dark) { */
/*     :root { */
/*         --bg-color: #222; */
/*         --bg-transparent: #222C; */
/*         --font-color: white; */
/*         --primary-color: #CCC; */
/*         --secondary-color: #777; */
/*         --selected-color: cyan; */
/*     } */
/* } */

html {
    padding: 0;
    /* overflow: hidden; */
    /* width: 100vw; */
    /* height: 100vh; */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
*::-webkit-scrollbar {
    display: none;
}

body {
    max-width: 100vw;
    margin: 0;
    padding-top: 1em;
    overflow: hidden;
    overflow-y: scroll;
    text-align: center;
    font-family: 'Avenir', 'Helvetica Neue', 'Helvetica', sans-serif;
    font-size: max(1vw, 2vh);
    background: radial-gradient(var(--secondary-color) 1px, var(--bg-color) 2px);
    background-size: 20px 20px;
}

body > div {
    width: max-content;
    margin: auto;
    overflow: hidden;
    transition: color 300ms;
}
body > div > div {
    color: var(--font-color);
    background-color: var(--bg-color);
    transition: color 1s, background-color 1s;
}

body.loading-mode > div {
    color: var(--secondary-color);
    /* opacity: 0.5; */
    /* pointer-events: none; */
    outline: none;
}
body.playing-mode > div:not(#center-button-container) {
    color: var(--primary-color);
    pointer-events: none;
    outline: none;
}


/* COMPONENTS */
* {
    user-select: none;
    -webkit-user-select: none;
    /* below line from: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
input, select, #title, #textContainer {
    user-select: auto;
    -webkit-user-select: auto;
}

button {
    outline: none; /* for that webapp feel */
    /* cursor: pointer; */
}

input#show-settings-toggle {
    display: none;
}
input#show-settings-toggle + label svg {
    stroke: white;
    fill: black;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    transition: transform 200ms, opacity 200ms;
}
input#show-settings-toggle + label:hover svg {
    transform: rotate(15deg);
    opacity: 0.8;
}
input#show-settings-toggle:checked + label svg {
    transform: rotate(45deg);
    opacity: 1.0;
}
input#show-settings-toggle + label {
    float: left;
    /* font-size: 40px; */
    /* width: 1em; */
    /* height: 1em; */
    width: 2em;
    height: 2em;
    margin: 0.1em;
    -webkit-user-select: none;
    cursor: pointer;
    user-select: none;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    overflow: visible;
}
#header span#about-button {
    float: right;
}
#about-button {
    padding: 0.1em 0.5em;
    border-radius: 0 0 0 0.2em;
    cursor: pointer;
    background: inherit;
    color: var(--primary-color);
}
#about-button:hover {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

@keyframes moveIn {
    to {
        transform: translate(0, 0);
    }
}
#top-row {
    font-size: 1.5em;
}

#top-row > div {
    /* width: 100%; */
    transform: translateY(100%);
    animation: moveIn 0.5s 1.5s forwards;
}

#top-row div#title {
    width: min-content;
    max-width: 35vw;
    max-height: 1.2em;
    overflow: hidden;
    white-space: nowrap;
    margin: auto;
    padding: 0 0.5em;
    border: 2px solid var(--primary-color);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    outline: none;
    font-family: 'American Typewriter', 'Courier New', 'Courier';
}
div#title:hover {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--primary-color);
}
div#title:focus {
    text-decoration: none;
    border-style: dashed;
    border-bottom: none;
}

#sub-title {
    font-size: 1em;
    overflow: hidden;
}
#sub-title > div {
    width: min-content;
    max-width: 70vw;
    white-space: nowrap;
    overflow: hidden;
    margin: auto;
    padding: 0.2em 0.5em;
    border: 2px solid var(--primary-color);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    transform: translateY(calc(100% + 2px));
    animation: moveIn 0.5s 1s forwards;
    /* opacity: 0; */
}
#sub-title select {
    -webkit-appearance: none;
    outline: none;
    margin: 0 0.1em;
    border-radius: 0px;
    border: none;
    border-bottom: 2px dotted;
    text-align: center;
    width: min-content;
    max-width: min-content; /**/
    font: inherit;
    color: inherit;
    background: inherit;
    /* text-decoration: underline; */
    /* text-decoration-thickness: 2px; */
    /* text-decoration-style: dashed; */
    cursor: pointer;
    transition: width 0.3s;
}
#sub-title select:hover {
    border-bottom: 2px solid;
}

#modifiers-container {
    overflow: hidden;
}
#modifiers-container > div {
    /* width: min(630px, 85vw); */
    width: 85vw;
    max-height: 30vh;
    margin: auto;
    display: flex;
    justify-content: center;
    /* transform-style: preserve-3d; */
    /* transform: rotateY(0deg); */
    /* transition: transform 1s; */
    transform: translateY(100%);
    animation: moveIn 0.5s 0.5s forwards;
}
#modifiers-container div.box {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    border: 2px solid;
    border-color: var(--primary-color);
    border-bottom: none;
    /* background-color: #FFF8; */
    background-color: inherit;
    box-sizing: border-box;
    /* overflow: hidden; */
    overflow: scroll;
}
#modifiers-container div.left {
    display: block;
    width: 50%;
    align-items: flex-end;
    border-radius: 20px 0 0 0;
    /* border-right: none; */
    border-right: 1px solid;
    border-color: var(--primary-color);
}
#modifiers-container div.right {
    width: 50%;
    align-items: flex-start;
    border-radius: 0 20px 0 0;
    /* border-left: none; */
    border-left: 1px solid;
    border-color: var(--primary-color);
}
#modifiers-container div.middle {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    margin: auto;
    padding: 10%;
    padding-top: 15%;
    height: 100%;
    /* width: 100%; */
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border: 2px solid;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    border-color: var(--primary-color);
    background-color: transparent;
    /* transition: width 500ms; */
    /* transform: scaleX(1); */
    opacity: 1;
    transform: none;
    transition: transform 0.5s, opacity 0.5s;
}
#modifiers-container div.middle.hidden {
    transform: scale(2);
    opacity: 0;
    pointer-events: none;
}

/* #modifiers-container > div.middle:not(.hidden) { */
/*     transform: scaleX(0); */
/*     /\* width: calc(0% + 1px); *\/ */
/* } */
/* :matches(.playing-mode, .loading-mode) #modifiers-container > div.hidden { */
/*     width: 80%; */
/* } */

#modifiers-container .ssml-control {
    display: flex;
    flex-wrap: wrap;
    width: 70%;
    white-space: nowrap;
    /* overflow: hidden; */
    /* margin: 0.25em 0; */
    margin: 0.25em auto;
    background-color: var(--bg-transparent);
    border: 2px solid var(--secondary-color);
    transition: color 300ms, transform 300ms;
}
#modifiers-container .left .ssml-control {
    margin-right: 0;
    border-radius: 10px 0 0 10px;
    border-right: none;
}
#modifiers-container .right .ssml-control {
    margin-left: 0;
    border-radius: 0 10px 10px 0;
    border-left: none;
}
#modifiers-container .ssml-control input[type="checkbox"] {
    display: none;
}
#modifiers-container .right.box .ssml-control.disabled {
    transform: translateX(-100%);
}
#modifiers-container .ssml-control.disabled input[type="checkbox"] + label {
    pointer-events: none;
    opacity: 0.5;
}
#modifiers-container .ssml-control input[type="checkbox"] + label {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    width: 100%;
    text-align: center;
    display: block;
    border-radius: inherit;
    right: -1px; /* white gap */
    /* border: 1px solid; */
    /* border-right: none; */
    /* border-color: var(--primary-color); */
    /* color: black; */
    /* font-size: 18px; */
    font-size: 1em;
    font-weight: bold;
    position: relative;
    overflow: hidden;
}
#modifiers-container .ssml-control input[type="checkbox"] + label:hover {
    color: var(--selected-color);
}
#modifiers-container .ssml-control input[type="checkbox"] + label:active {
    color: var(--selected-color) !important;
}
#modifiers-container .ssml-control input[type="checkbox"]:checked + label {
    border-color: green;
    color: var(--selected-color);
}
/* special fx for toggling with before & after psoods */
#modifiers-container .ssml-control input[type="checkbox"] + label:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 40%;
    width: 100%;
    height: 3px;
    transform-origin: 100% 50%;
    background-color: currentcolor;
    transform: scaleX(0);
    transition: transform 300ms;    
}
#modifiers-container .ssml-control.disabled input[type="checkbox"] + label:before {
    transform: scaleX(1);
}
#modifiers-container .ssml-control input[type="checkbox"] + label:after {
    content: '';
    /* z-index: -1; */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(6, 122, 159, 0.52);
    border: 2px solid lightblue;
    box-sizing: border-box;
    transform-origin: 100% 50%;
    /* transform: scaleX(0); */
    transform: translateX(100%);
    transition: transform 300ms linear;
}
#modifiers-container .ssml-control input[type="checkbox"]:active + label:active:after {
    /* transform: scaleX(1); */
    transform: translateX(0);
}
#modifiers-container .ssml-control input[type="checkbox"]:checked + label:after {
    /* transform: scaleX(1); */
    transform: translateX(0);
}
#modifiers-container .ssml-control input[type="checkbox"]:checked + label:active:after {
    /* transform: scaleX(0) !important; */
    transform: translateX(100%) !important;
}
#modifiers-container .ssml-control select {
    border-color: red;
}
#modifiers-container .ssml-control input[type="range"] {
    order: 2;
    width: 100%;
    /* height: 1.35em; */
    height: 1.5em;
    -webkit-appearance: none;
    /* background: var(--secondary-color); */
    background: transparent;
    border: none;
    border-top: 2px solid var(--secondary-color);
    /* border-bottom: none; */
    /* border-radius: 10px 10px 20px 20px; */
    outline: none;
    margin: 0;
}
#modifiers-container .ssml-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 3px solid var(--secondary-color);
  /* width: 16px; */
  width: 1.5em;
  height: 100%;
  border-radius: calc(var(--ratio) * 2px);
  border-bottom-right-radius: calc(var(--ratio) * 10px);
  background: var(--secondary-color);
  cursor: pointer;
  transform: scale(calc(1 + var(--ratio) / 5)); /* address small gap */
}
#modifiers-container .ssml-control input[type="range"] + label {
    margin: auto;
    text-transform: capitalize;
}
#modifiers-container .ssml-control input[type="range"] + label > span:before {
    content: ':';
    margin-right: 0.3em;
}

/* now begins user editing section */

#wrapper {
    text-align: center;
    overflow: hidden;
    width: 100%;
}

#textContainer {
    width: 95vw;
    box-sizing: border-box;
    /* max-width: 700px; */
    margin: auto;
    /* font-size: var(--font-size); */
    font-size: 2em;
    /* line-height: 25px; */
    line-height: calc(1em + 2px);
    padding: 0.6em;
    padding-left: 1.6em; /* indent every other line */
    /* font-family: "Avenir Next Condensed", "Courier New"; */
    border: 2px solid;
    border-radius: 20px;
    border-color: var(--primary-color);
    background-color: #FFFD;
    /* color: var(--parimary-color); */
    color: #1a73e8;
    transform: translateX(-150%); /* bring to front for outline */
    transition: box-shadow 0.3s, background-color 0.3s, color 0.3s;
    animation: moveIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
#textContainer:focus, #textContainer:active {
    color: var(--font-color);
    background-color: var(--focus-bg);
    box-shadow: inset 0 0 5px 2px #1a73e8;
    outline: none;
}
#textContainer.orange {
    box-shadow: 1px 0px 8px 7px orange;
    border-radius: 3px;
    /* transform: translateZ(10px); */
}
#textContainer.red {
    box-shadow: 1px 0px 8px 7px red;
    background-color: red;
    color: white;
    border-radius: 0px;
    /* transform: translateZ(10px); */
}
pre {
    white-space: pre-wrap;
}

#bottom-container {
    position: relative;
    overflow: hidden;
}

#saved-log {
    /* width: min(630px, 85vw); */
    width: 85vw;
    height: 20vh;
    margin: auto;
    overflow: hidden;
    position: relative;
    
    box-sizing: border-box;
    border-radius: 0 0 20px 20px;
    border: 2px solid;
    border-top: none;
    border-color: var(--primary-color);
    transform: translateY(-100%);
    animation: moveIn 0.5s 0.5s forwards;
}
/* #saved-log #save-voice-btn { */
/*     position: absolute; */
/*     top: 0; */
/*     left: 0; */
/*     right: 0; */
/*     margin: auto; */
/*     width: 50%; */
/* } */
#saved-voices-container {
    /* background-color: #ebebeb44; */
    background-color: inherit;
    height: calc(100% - 1em);
    padding: 0.5em 0;
    overflow: scroll;
}
#saved-voices-container .voice-entry {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr;
    padding: 0.3em;
    font-size: 1.5rem;
    /* font-size: 1.5rem; */
}
.voice-entry button {
    text-transform: uppercase;
    margin: 0;
    transition: background-color 0.2s, color 0.2s;
}
.voice-entry button:hover {
    background-color: var(--secondary-color);
}
.voice-entry .name {
    grid-column: 1;
}
.voice-entry .load {
    grid-column: 2;
}
.voice-entry .hide {
    grid-column: 3;
}
.voice-entry .hide:before {
    content: 'un';
    display: none;
}
.voice-entry .delete {
    grid-column: 4;
}
.voice-entry .delete:hover {
    color: red;
}
.voice-entry.highlight {
    animation: highlight 1s;
}
.voice-entry.reveal {
    max-height: 0;
    animation: reveal 1s forwards;
}
@keyframes reveal {
    50% {
        background-color: lightgreen;
    }
    100% {
        max-height: 100%;
    }
}
@keyframes highlight {
    50% {
        background-color: orange;
    }
    75% {
        background-color: lightgreen;
    }    
}
.voice-entry.hidden {
    opacity: 0.6;
}
.voice-entry.hidden .name {
    text-decoration: line-through;
}
.voice-entry.hidden .hide:before {
    display: inline-block;
}

#lowest-container {
    max-width: 70vw;
}
#lowest-container > div {
    transform: translateY(-100%);
    animation: moveIn 0.5s 1s forwards;
}
#save-voice-btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    max-width: 100%;
    margin: 0;
    padding: 0.2em;
    /* font-size: 24px; */
    font-size: 1.5em;
    color: inherit;
    background-color: var(--secondary-color);
    border: 2px solid var(--primary-color);
    border-top: none;
    border-radius: 0 0 10px 10px;
    font-weight: bold;
    cursor: pointer;
}
#save-voice-btn:hover, #save-voice-btn:active {
    background-color: var(--bg-color);
    color: green;
    border-color: lightgreen;
    text-decoration: underline;
}
#save-voice-btn #title-mirror {
    font-family: 'American Typewriter', 'Courier New', 'Courier';
    font-weight: 400;
}


#news-text {
    z-index: -1;
    position: absolute;
    left: 0;
    right: 0;
    margin: 10px auto;
    /* width: min(630px, 75vw); */
    width: max(630px, 75vw);
}

#history-log {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 20vh;
    overflow: hidden;
    background-color: transparent;
}
#history-log.hidden {
    pointer-events: none;
}
#history-log > .contents {
    z-index: -1;
    margin: auto;
    /* width: min(630px, 85vw); */
    width: 85vw;
    height: 100%;
    overflow: scroll;
    border-radius: 0 0 20px 20px;
    border: 2px solid var(--primary-color);
    background-color: white;
    border-top: none;
    box-sizing: border-box;
    transition: transform 300ms;
}
#history-log.hidden > .contents {
    transform: translateY(-100%);
}
#history-log > .contents button {
    padding: 0 0.2em;
    margin: 0;
    border: none;
    border-left: 1px solid var(--primary-color);
    background-color: var(--secondary-color);
    text-transform: uppercase;
    cursor: pointer;
}
#history-log > .contents button:hover {
    background-color: var(--primary-color);
    color: white;
}
#history-log > .contents button:active {
    color: black;
}
#history-log > .contents button#clear-local-storage {
    padding: 0.5em 0.8em;
    border: 1px solid var(--primary-color);
    border-top: none;
    border-radius: 0 0 5px 5px;
}

#history-log > .contents > div {
    position: relative;
    margin: 0.25em auto;
    width: 95%;
    overflow: hidden;
    display: grid;
    grid-template-columns: 30% 35% 35%;
    /* justify-content: space-between; */
    /* border: 1px solid var(--secondary-color); */
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    transition: transform 0.7s, opacity 0.7s;
}
#history-log > .contents > div.deleted {
    opacity: 0;
}
#history-log > .contents > div.deleted:nth-child(odd) {
    transform: translateX(100%);
}
#history-log > .contents > div.deleted:nth-child(even) {
    transform: translateX(-100%);
}

#history-log > .contents > div span {
    white-space: nowrap;
}
#history-log > .contents > div .btn-container {
    grid-column: 3 / 4;
    display: flex;
    background-color: var(--secondary-color);
}
#history-log > .contents > div button {
    /* margin-left: auto; /\* acts like float: right for flexbox here *\/ */
    flex-grow: 1;
}


/* FLOATING CENTER BTN (really even needed without arrows anymore?) */
#center-button-container {
    /* position: sticky; */
    /* position: -webkit-sticky; */
    /* we use wrapper with position: fixed for performance reasons */
    /* position: fixed; */
    /* left: 0; */
    /* right: 0; */
    position: relative;
    /* display: flex; */
    /* height: 20vh; */
    top: 1.5em;
    /* bottom: 20px; */
    overflow: visible;
    animation: 2s fade-in 1s both;
}
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.floating-center-button {
    /* position: absolute; */
    /* bottom: 20px; */
    /* left: 0; */
    /* right: 0; */
    margin: auto;
    padding: 0;
    white-space: nowrap;
    /* height: 35px; */
    height: 1.8em;
    /* width: 11em; */
    /* max-width: 100%; */
    width: min(11em, 90vw);
    /* font-size: 15px; */
    /* font-size: max(35px, 6vh); */
    font-size: max(35px, 6vh, 3vw); /* this is new */
    border: 2px solid black;
    border-radius: 30px;
    box-shadow: 0px 10px 2px 0px #0004;
    cursor: pointer;
    user-select: none;
    /* will-change: transform, opacity; */
    transform: translateY(-15px);
    transition: transform 300ms, background-color 300ms, color 300ms, border-color 300ms, box-shadow 300ms, opacity 300ms;
}
.floating-center-button:hover {
    box-shadow: 0px 6px 2px 0px #0004;
    transform: translateY(-5px);
}
.floating-center-button:active {
    box-shadow: 0px 0px 0px 0px #0004;
    transform: translateY(0px);
}

/* START UNIVERSAL BUTTON */
#universal-button {
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    --blue: #1a73e8; /* (from google buttons) */
    --lightblue: #e8f0fe; /* from i'm feeling lucky button:hover */
    --orange: orange;
    --lightorange: #FFA50044;
    --darkorange: orangered;
    --icon-color: white;
}
.default-mode #universal-button {
    background-color: var(--blue); 
    color: white;
}
.default-mode #universal-button:hover {
    background-color: white;
    border-color: var(--blue);
    color: var(--blue);
    --icon-color: var(--blue);
    /* background-color: #1967d2; /\* darker blue *\/ */
}
.loading-mode #universal-button {
    /* pointer-events: none; */
    /* cursor: default; */
    background-color: var(--lightblue); 
    border-color: var(--blue); /* light grey from i'm feeling lucky button:hover */
    /* color: var(--blue); */
    --icon-color: transparent;
    box-shadow: none;
    /* box-shadow: 0px 0px 2px 0px #0004; */
    transform: translateY(0px) rotateX(-180deg) scale(0.9);
    cursor: waiting;
}
.playing-mode #universal-button {
    background-color: white;
    border-color: var(--orange);
    /* color: var(--orange); */
    --icon-color: transparent;
    box-shadow: 0px 0px 2px 0px #0004;
    transform: translateY(0px) rotateX(-180deg) scale(0.9);
}
.playing-mode #universal-button:hover {
    border-color: var(--darkorange);
    background-color: var(--lightorange);
}
#universal-button > span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    line-height: 1em; /* for chrome */
    height: 1em;
    width: 1em;
    background-color: transparent;
    /* transition: opacity 300ms, transform 1s, background-color 1s, border-color 0.5s, color 1s; */
    /* will-change: transform; */
    /* transition: opacity 300ms, transform 600ms; */
    --scale: scale(1); /* TODO: get rid of this in loading-keyframes */
}
#universal-button.old > span {
    border: 0.1em solid;
    border-radius: 0.15em;
    border-color: #FFF5;
    border-color: transparent;
    --scale: scale(0.8);
}
#universal-button > span svg {
    width: auto;
    height: 80%;
    stroke-width: 0px; /* needed for bg-color to work for some reason */
    border: 0.1em solid;
    border-radius: 10%;
    border-color: transparent;
    background-color: transparent;
    /* background-color: var(--icon-color); */
    fill: var(--icon-color);
    stroke: var(--icon-color);
    transition: border-color 300ms, background-color 300ms, border-radius 1s;
}
/* .default-mode #universal-button > span svg { */
/*     transition: border-color 300ms, background-color 300ms; */
/* } */
.loading-mode #universal-button > span svg {
    border-color: var(--blue);
    border-radius: 50%;
}
.playing-mode #universal-button > span svg {
    border-color: var(--orange);
    background-color: transparent;
}
.playing-mode #universal-button:hover > span svg {
    background-color: var(--orange);
}
.playing-mode #universal-button:active > span svg {
    border-color: var(--darkorange);
    background-color: transparent;
}

/* rounded corners */
#universal-button > span svg polygon {
    stroke-width: 0.2;
    stroke-linejoin: round;
    transition: stroke 300ms, fill 300ms; /* only want fadeout when going into loading mode */
}
/* only want fadeout when going into loading mode */
/* .loading-mode #universal-button > span svg polygon { */
/*     transition: stroke 300ms, fill 300ms;  */
/* } */
.loading-mode #universal-button.old > span {
    background-color: var(--icon-color);
    border-color: var(--blue);
    border-radius: 50%;
    transform: var(--scale);
    transition: opacity 300ms, transform 600ms, border-color 300ms, background-color 1s, border-radius 300ms;
}
.loading-mode #universal-button > span {
    /* color: transparent; */
    /* transition: opacity 300ms, transform 600ms, border-color 300ms, background-color 1s, border-radius 300ms; */
    animation: loading-rotate 1s linear infinite;
}

@keyframes loading-rotate {
    from {
        transform: var(--scale) rotateZ(0deg);
    }
    to {
        transform: var(--scale) rotateZ(180deg);
    }
}
.playing-mode #universal-button.old > span {
    /* color: transparent; */
    background-color: var(--orange);
    border-color: var(--orange);
    /* color: var(--orange); */
    /* background-color: currentcolor; */
    /* border-color: currentcolor; */
    transform: var(--scale);
    transition: opacity 300ms, transform 600ms, border-color 300ms, background-color 1s, border-radius 1s;
}
.playing-mode #universal-button.old:hover > span {
    /* --icon-color: var(--darkorange); */
    background-color: var(--darkorange);
    border-color: var(--darkorange);
    /* background-color: var(--darkorange); */
    /* border-color: var(--darkorange); */
}
.playing-mode #universal-button.old:active > span {
    background-color: var(--lightorange);
    transition: background-color 300ms;
}


/* UNIVERSAL BUTTON ARROWS */
#universal-button > span:before, #universal-button > span:after {
    position: absolute;
    top: 0; bottom: 0;
    margin: auto;
    height: 1em;
    line-height: 1em;
    will-change: opacity, transform;
    transform: scale(1) ; /* since they inherit parent transforms */
    transition: opacity 600ms, transform 600ms;
    /* animation-play-state: paused; */
}
#universal-button > span:before {
    left: -2em;
    content: '\21e8';
}
#universal-button > span:after {
    right: -2em;
    content: '\21e6';
}

/* styling spans (inner text with arrows for univBtns */
.default-mode #universal-button > span:before, .default-mode #universal-button > span:after {
    /* animation-play-state: running; */
    /* animation-play-state: paused; */
    opacity: 0.3;
}
.default-mode #universal-button:hover > span:before, .default-mode #universal-button:hover > span:after {
    /* opacity: 0.3; */
    opacity: 0.6;
    transform: translateX(var(--arrow-translate)) rotateX(180deg);
    /* animation-play-state: running; */
}
#universal-button > span:before {
    --arrow-translate: 0.8em;
    transform-origin: 100% 50%;
}
#universal-button > span:after {
    --arrow-translate: -0.8em;
    transform-origin: 0% 50%;
}
.loading-mode #universal-button > span:before, .loading-mode #universal-button > span:after {
}
.loading-mode #universal-button > span:before, .loading-mode #universal-button > span:after {
    opacity: 1;
    color: var(--blue);
    background-color: currentcolor;
    /* --translate: translateX(calc(4 * var(--arrow-translate))); */
    /* --translate: translateX(calc(2.5 * var(--arrow-translate))); /\* 1.25 = (2/0.8) *\/ */
    /* --scale: scale(0.5, 0.1); */
    --translate: translateX(calc(3.25 * var(--arrow-translate))); /* 3.125 = (1/0.8)/0.4 */
    --scale: scale(0.4, 0.1);
    transform: var(--scale) var(--translate);
    /* animation-play-state: paused; */
}
.playing-mode #universal-button > span:before, .playing-mode #universal-button > span:after {
    color: var(--orange);
    opacity: 0;
    /* animation-play-state: paused; */
}
@keyframes arrow-animate {
    50% {
        transform: translateX(var(--arrow-translate)) rotateX(180deg);
        /* transform: translateX(var(--arrow-translate)); */
    }
}
/* END UNIVERSAL BUTTON */