/* Core Squiffy Runtime Styles */

/* Link styles */


/* Rotate/sequence links - visually distinct as they update in-place rather than advancing the story */
a.squiffy-link[data-handler="rotate"],
a.squiffy-link[data-handler="sequence"] {
    text-decoration-style: dotted;
}

/* Disabled link states */
a.squiffy-link.disabled,
div.squiffy-output-section:not(:last-child) a.squiffy-link,
div.squiffy-output-section.links-disabled a.squiffy-link
{
    text-decoration: inherit;
    text-decoration-color: transparent;
    color: inherit !important;
    cursor: inherit;
    pointer-events: none;
    text-align: center
}

/* Links disabled due to input validation */
a.squiffy-link.validation-disabled
{
    text-decoration: inherit;
    text-decoration-color: transparent;
    color: #999 !important;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6;
}

/* Invalid input field states */
input.squiffy-invalid,
textarea.squiffy-invalid,
select.squiffy-invalid
{
    border-color: #80ffe8!important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Valid input field states (optional, provides positive feedback) */
input:not([disabled]):valid,
textarea:not([disabled]):valid,
select:not([disabled]):valid
{
    border-color: #80ffe8;
}

/* Focus state for invalid inputs */
input.squiffy-invalid:focus,
textarea.squiffy-invalid:focus,
select.squiffy-invalid:focus
{
    outline: none;
    border-color: #80ffe8 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

/* Header button styles */
button.squiffy-header-button
{
    text-decoration: none;
    color: #80ffe8;
    cursor: pointer;
    background: #0a4050;
    border: #80ffe8;
    font-family: inherit;
    text-align: center;
}

/* Output block spacing */
div.squiffy-output-block:not(:last-child),
div.squiffy-output-passage:not(:last-child),
div.squiffy-output-section:not(:last-child)
{
    margin-bottom: 1em;
    border-bottom: 3px solid #80ffe8;
}

/* Fade animations */
.fade-out {
    opacity: 0;
    transition: opacity 200ms;
}

.fade-in {
    opacity: 1;
    transition: opacity 200ms;
}

/* Continue animation - click to proceed */
.squiffy-continue {
    text-decoration: underline;
    text-decoration-color: Blue;
    color: Blue;
    cursor: pointer;
}

/* Style: pulse - fades in and out */
.squiffy-continue-pulse {
    animation: squiffy-pulse 1.5s ease-in-out infinite;
}

@keyframes squiffy-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Style: glow - pulsing glow effect */
.squiffy-continue-glow {
    animation: squiffy-glow 1.5s ease-in-out infinite;
}

@keyframes squiffy-glow {
    0%, 100% { text-shadow: 0 0 4px rgba(0, 0, 255, 0.5); }
    50% { text-shadow: 0 0 12px rgba(0, 0, 255, 0.8), 0 0 20px rgba(0, 0, 255, 0.4); }
}

/* Style: bounce - subtle vertical bounce */
.squiffy-continue-bounce {
    display: inline-block;
    animation: squiffy-bounce 0.6s ease-in-out infinite;
}

@keyframes squiffy-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Style: wave - character spans need special handling for underline */
.squiffy-continue-wave {
    text-decoration: none;
    border-bottom: 1px solid Blue;
}

img {
  display: block;
  margin: auto;
}


.squiffy-link
{
    text-decoration: underline;
    color: #80ffe8;
    cursor: pointer;
}
.squiffy-link.disabled
{
    text-decoration: inherit;
    color: inherit;
    cursor: inherit;
}
.squiffy-header-link
{
    text-decoration: underline;
    color: #80ffe8;
    cursor: pointer;
}
#squiffy-container
{
    max-width: 600px;
    max-height: 600px;
    margin-left: auto;
    margin-right: auto;
    font-family: Courier New, serif;
    border: 2px solid #f0ecd8;
    color:#f0ecd8;
    background-color: #020c10;
    margin-top: 50px;
    padding:50px;
    overflow-y: auto;
}
#squiffy-header
{
    font-size: 14px;
    text-align: right;
}
#squiffy
{
    font-size: 18px;

}
body {
  background-image: url('BG.png');
  background-attachment: fixed;
  background-size: cover;
  font-family: Courier New;
  color: #f0ecd8;
  font-size: 12pt
}
a:link {
  color: #80ffe8;
  text-decoration: none;
}

a:visited {
  color: #80ffe8;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #80ffe8;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: #b0fff0;
  text-decoration: underline;
}
hr { 

} 

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #020c10;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #b0fff0;
  border-radius: 10px;
}