/* =================================================================
   1. ROOT VARIABLES & FONT FACES
   ================================================================ */
@font-face {
    font-family: 'chillerregular';
    src: url('fonts/chiller-webfont.woff2') format('woff2'),
         url('fonts/chiller-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'felix_titlingregular';
    src: url('fonts/felixti-webfont.woff2') format('woff2'),
         url('fonts/felixti-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'papyrusregular';
    src: url('fonts/papyrus-webfont.woff2') format('woff2'),
         url('fonts/papyrus-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

:root {
    /* Grayscale palette */
    --gray-900: #222;
    --gray-800: #333;
    --gray-700: #555;
    --gray-600: #666;
    --gray-500: #777;
    --gray-400: #999;
    --gray-300: #BBB;
    --gray-200: #CDCDCD;
    --gray-100: #EEE;

    /* Accent colors */
    --accent-blue: #6699FF;
    --accent-blue-dark: #4477FF;
    --accent-orange: #FFA500;
    --accent-red: #FF0000;
    --accent-blue-lite: #3366DD;

    /* Background vignette */
    --bg-light: #f7f7f2;
    --bg-mid: #dcdcd4;
    --bg-dark: #b0b0a8;

    /* Shadows */
    --shadow-soft: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-strong: 0 6px 20px rgba(0, 0, 0, 0.19);

    /* Borders */
    --border-dark: 0.4vw solid var(--gray-800);
    --border-light: 0.1vw solid var(--gray-400);

    /* Typography */
    --font-main: "Times New Roman", serif;
    --font-alt: Arial, sans-serif;
    --font-decorative: Andalus, "Times New Roman", serif;
}

/* =================================================================
   2. BASE & TYPOGRAPHY
   ================================================================ */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: radial-gradient(
        circle at center,
        var(--bg-light) 0%,
        var(--bg-mid) 55%,
        var(--bg-dark) 100%
    );
    font-family: var(--font-main);
    overflow: hidden;
    color: var(--gray-600);
    font-size: 100%;
}

*:focus {
    outline: none;
}

PRE { 
    font-family: "Bookman Old Style", "Baskerville Old Face", "Times New Roman", Times, serif;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
}

H2 { 
    color: maroon; 
}

H2.deut { 
    color: var(--accent-blue); 
}

A { 
    text-decoration: none; 
    color: #800000; 
    cursor: pointer; 
}
A:visited { color: #800000; }
A:hover, A:active { color: #ffffff; }

/* =================================================================
   3. LAYOUT & STRUCTURE
   ================================================================ */
.content {
    box-shadow: var(--shadow-soft), var(--shadow-strong);
    transition: box-shadow 0.3s ease-in-out;
    border-radius: 25px;
    position: absolute;
    top: 25vw;
    left: 80vw;
    width: auto;
    margin: 5vw;
    padding: 2vw;
    background: rgb(153, 153, 153);
}

.content p {
    font-size: 1.4vw;
    font-weight: 300;
    line-height: 1.5;
    color: var(--gray-100);
    margin: 0 0 2vw 0;
}

.content p:last-child {
    margin: 0;
}

.content button {
    box-shadow: var(--shadow-soft), var(--shadow-strong);
    transition: box-shadow 0.3s ease-in-out;
    border-radius: 15px;
    font-size: 1.2vw;
    display: inline-block;
    padding: 1vw 2vw;
    background: #5577CC;
    color: var(--gray-200);
    font-weight: bold;
    text-decoration: none;
    border: 0.2vw solid var(--gray-400);
}

.content button:hover {
    background: var(--gray-200);
    color: var(--accent-blue-dark);
}

.slideout-menu {
    position: fixed;
    top: 10.7vw;
    left: -25vw;
    width: 25vw;
    height: 31vw;
    background: rgb(153, 153, 153);
    z-index: 1;
    font-size: 1.2vw;
}

.slideout-menu h3 {
    position: relative;
    padding: 0 1vw;
    color: #fff;
    font-size: 1.6vw;
    font-weight: bold;
    border-bottom: 0 solid var(--gray-800);
}

.slideout-menu .slideout-menu-toggle {
    position: absolute;
    top: 0;
    right: 1vw;
    display: inline-block;
    padding: 0.6vw 0.9vw 0.5vw;
    font-family: var(--font-alt);
    font-weight: bold;
    background: var(--gray-900);
    color: var(--gray-400);
    text-decoration: none;
    vertical-align: top;
    border: none;
}

.slideout-menu .slideout-menu-toggle:hover {
    color: #fff;
}

/* =================================================================
   4. SCROLL WRAPPER & WORKAREA
   ================================================================ */
.scroll-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--gray-100);
    border: var(--border-dark);
    box-sizing: border-box;
    overflow: hidden;
}

.scroll-up,
.scroll-down {
    width: 100%;
    background: var(--gray-300);
    border: none;
    padding: 0.4vw 0;
    font-size: 1.2vw;
    font-weight: bold;
    cursor: pointer;
    color: var(--gray-800);
    user-select: none;
}

.scroll-up:hover,
.scroll-down:hover {
    background: var(--gray-400);
}

#workArea {
    flex: 1;
    padding: 0.8vw;
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 1.2vw;
    word-wrap: break-word;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    scrollbar-width: none; /* Firefox */
}

#workArea::-webkit-scrollbar {
    display: none; /* Chrome, Edge, Safari */
}

#editor {
    height: 100%;
    border: var(--border-dark);
    padding: 0.8vw;
    overflow-x: hidden;
    overflow-y: scroll;
    color: var(--gray-600);
    word-wrap: break-word;
}

#stayput {
    position: relative;
    margin: 0;
    height: auto;
    padding-top: 0.5vw;
    padding-bottom: 1vw;
    background-color: rgb(153, 153, 153);
    text-align: center;
}

.scroll-pane { 
    margin: 0.8vw;
    width: 98%;
    height: 85%;
    overflow-x: hidden;
    overflow-y: scroll;
    font-family: var(--font-decorative);
    font-size: 1.4vw;
    border: 0 solid red;
}

.theChapters {
    text-align: center;
    font-weight: bold; 
    font-size: 2.4vw; 
    font-family: "Tempus Sans ITC", "Times New Roman", Times, serif; 
    padding-left: 1vw;
    border: 0 solid red;
    margin: 1vw 0 0 0;
    line-height: 1;
    opacity: 0;
}

div[name^=chaps] { 
    margin: 0; 
    padding: 0; 
}

/* =================================================================
   5. COMPONENTS & INTERACTIVE BUTTONS
   ================================================================ */
.bchange {
    display: inline-block;
    margin-top: 1vw;
    width: 6vw;
    height: 2vw;
    border-radius: 0.5vw;
    font-size: 1vw;
    color: var(--accent-blue);
    background: #EFEFEF;
}

.bchange:hover,
.bchange.active {
    border-radius: 0.5vw;
    background: var(--accent-blue);
    color: #FFFFFF;
}

.prefchange {
    border: 0;
    background: 0;
    display: inline-block;
    text-align: center;
    font-family: var(--font-alt);
    font-size: 1vw;
    color: var(--gray-900);
}

.prefchange:hover {
    cursor: pointer;
    color: #EFEFEF;
}

.select-text {
    background-color: var(--accent-blue);
    text-decoration: none;
    color: #000;
    font-weight: bold;
    padding: 0.4vw;
    border: none;
}

.select-text:hover {
    background-color: #000;
    color: var(--accent-blue);
}

input[type=button]:link { color: var(--gray-600); }
input[type=button]:hover { color: var(--accent-blue); }

.custom-btn,
.custom-btn-reset {
    font-size: 1.2vw;
    font-weight: 600;
    border-radius: 0.6vw;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: none;
    outline: none;
    padding: 0.5vw 1vw;
}

.custom-btn {
    background-color: #3b82f6; 
    color: #ffffff;
}
.custom-btn:hover {
    background-color: #73a6f9;
}

.custom-btn-reset {
    background-color: #EFEFEF;
    color: #3b82f6;
}
.custom-btn-reset:hover {
    background-color: var(--gray-200);
}

/* =================================================================
   6. TOOLTIPS & FOOTNOTES
   ================================================================ */
.no, 
SPAN.no { 
    color: var(--accent-blue); 
    font-size: 110%; 
}

[name="footnote-ref"],
.footnote-ref {
    cursor: help;
    color: var(--accent-orange);
    font-size: 70%;
    vertical-align: top;
    outline: none;
}

.footnote-ref.active {
    color: #FFD833;
}

[name="footnote-content"],
.footnote-content {
    display: none;
}

[name="footnote-content"] i { 
    color: var(--accent-orange); 
}

.fn-tooltip {
    position: absolute;
    z-index: 9999;
    max-width: 25vw;                 
    padding: 1vw 1.2vw;              
    border-radius: 0.6vw;            
    font-size: 1.1vw;                
    background: var(--gray-700); 
    color: #fff; 
    border: 0.1vw solid transparent;
    box-shadow: 0 0.5vw 1.5vw rgba(0, 0, 0, 0.15);
    line-height: 1.45;
    overflow: visible;               
    --arrow-left: 2vw;               
    --arrow-size: 0.8vw; 
    --arrow-bg-color: var(--gray-700);  
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fn-tooltip.show {
    visibility: visible;
    opacity: 1;
}

.fn-tooltip::after {
    content: "";
    position: absolute;
    left: var(--arrow-left);
    width: calc(var(--arrow-size) * 1.8);
    height: calc(var(--arrow-size) * 1.5);
    background: var(--arrow-bg-color);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    pointer-events: none;
    top: calc(-1.5 * var(--arrow-size) + 0.1vw); 
    transform: translateX(-50%);
    margin-left: -0.1vw;
    z-index: 2147483647;
    filter: drop-shadow(0 -0.3vw 0.3vw rgba(0, 0, 0, 0.06)); 
}

.fn-tooltip.arrow-top::after {
    top: auto;
    bottom: calc(-1.5 * var(--arrow-size) + 0.1vw); 
    clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
    transform: translateX(-50%);
    filter: drop-shadow(0 0.3vw 0.3vw rgba(0, 0, 0, 0.06));
}

/* =================================================================
   7. MODALS & FULLSCREEN
   ================================================================ */
#fullscreen {
    border: 0.25vw solid #C99;
    border-radius: .3vw;
    box-shadow: 0 0 .1vw #CC9999;
    padding-right: 0.8vw;
}

#screenclick {
    position: absolute;
    top: 28vw;
    left: 85.3vw;
    font-size: 1.2vw;
    border: 0 solid red;
}

.requestfullscreen,
.exitfullscreen {
    cursor: pointer;
    color: #CCCCCC;
}

.requestfullscreen:hover,
.exitfullscreen:hover {
    color: #CCCCCC;
    text-shadow: 2px 2px 4px #666666;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Moved z-index here and bumped it up to ensure it covers everything */
}

.modal-window {
    position: relative; /* Changed from absolute so Flexbox centering works */
    background: white;
    width: 70%;
    max-height: 80%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    /* Removed z-index: 20 from here */
}

.modal-header {
    background: #444;
    color: white;
    padding: 10px;
    font-size: 1.8vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
}

.modal-content {
    padding: 15px;
    overflow-y: auto;
    position: relative;
    cursor: grab;
}

.modal-content:active {
    cursor: grabbing;
}

#modalInner {
    display: block;
    transition: transform 0.15s ease-in-out;
}

.parchment-box {
  /* 1. Parchment base color and subtle multi-stop gradient for aging */
  background-color: #f4ebd0;
  background-image: 
    radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.08) 100%),
    linear-gradient(to bottom right, #f8f1e5, #dfd0ab);

  /* 2. Vignette effect (inset shadow) + subtle outer drop shadow */
  box-shadow: 
    inset 0 0 60px rgba(80, 50, 20, 0.35),
    inset 0 0 20px rgba(60, 35, 10, 0.2),
    0 6px 15px rgba(0, 0, 0, 0.15);

  /* 3. Styling & Typography for realism */
  color: #3b2b1e;
  font-family: "Georgia", "Times New Roman", serif;
  padding: 3.5vw;
  border-radius: .4vw;
  border: .1vw solid #c9b48b;
  max-width: auto;
  margin: 2vw auto; 
  text-align: center;
}

/** 
#intro_div {
    min-height: 50vw; 
    max-height: 50vw;
    width: 60%;
    margin: 0 auto 2vw auto;    
    text-align: center;
}
**/

/** begin special case for INTRO modal window **/
.bold-numbers li{
    margin-bottom: -.5vw;   
}

.bold-numbers li::marker {
    color: orange;
}

@counter-style alpha-paren {
    system: extends lower-alpha;
    suffix: ") ";
}

.paren-list {
    list-style-type: alpha-paren;
}
/** end special case for INTRO modal window **/

#preface_niv,
#preface_kjv,
#preface_nasb,
#preface_esv,
#content_intro {
    display: none;
}

:fullscreen,
:-webkit-full-screen,
:-moz-full-screen,
:-ms-fullscreen {
    user-select: text !important;
}

/* =================================================================
   8. HEADER LAYOUT & MISC HELPERS
   ================================================================ */
.site-header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    width: 100%;
    margin-top: 1vw;
    padding: 0 2vw;
    box-sizing: border-box;
}

.hidden-header {
    display: none !important;
}

#identify {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

.enterprise {
    font-family: var(--font-main);
    color: #3366DD;
    font-weight: normal;
    font-size: 1.5vw;
}

.quote-subtitle {
    font-size: 2vw; 
    font-family: 'chillerregular', 'Times New Roman', serif; 
    color: var(--gray-700);   
    font-weight: normal;
}

#discover {
    font-size: 1.4vw;
    cursor: pointer;
    font-family: "felix_titlingregular", serif;
    color: maroon;
}
#discover:hover {
    color: #3366DD;
}

#tmBookmark {
    font-size: 55%;
    vertical-align: 0.7vw;
    font-weight: normal;
}

#adjuster_two {
    position: relative;
    cursor: pointer;
    width: 8vw;
    min-width: 70px;
    text-align: center;
}

#trademark_rt_main {
    position: absolute;
    top: 1.5vw;
    right: .75vw;
    font-size: 0.5vw;
    font-family: var(--font-main);
    z-index: 100;
    color: var(--gray-600);
}

#logus_out img {
    width: 115%;
    height: auto;
}

#logus2 {
    display: none;
}

#trifin {
    font-size: 0.8vw;
    font-family: var(--font-main);
    color: var(--gray-600);
    text-align: right;
    margin-right: .4vw;
    margin-top: -1.6vw;
}

#trifin_reg {
    position: relative;
    font-size: 0.6vw;
    bottom: 0.2vw;
}

/* Other misc helpers & highlights */
.highlighted,
.highlight {
    background-color: yellow; 
}

.highlighter {
    background-color: orange; 
}

.hilite {
    background-color: #CCCCFF;
}

.controller1 {
    cursor: pointer;
}

P.paraquote { 
    display: block; 
    margin-top: 1.6vw; 
    margin-bottom: 1.6vw; 
}

DIV.cell { display: table-cell; width: 50%; border: 0 solid red; padding-left: 2.5vw; }
DIV.cell2 { display: table-cell; width: 50%; border: 0 solid red; padding-left: 5vw; }
DIV.cellspec { display: table-cell; width: 50%; border: 0 solid red; padding-left: 0; }

.snap, .snap3 { color: #800000; cursor: pointer; }
.snap:visited, .snap3:visited { color: #800000; }
.snap:hover, .snap:active, .snap3:hover, .snap3:active { color: #ffffff; }

.snap_apoc { color: var(--accent-blue); cursor: pointer; }
.snap_apoc:visited { color: var(--accent-blue); }
.snap_apoc:hover, .snap_apoc:active { color: #ffffff; }

.snap2 { color: #000; cursor: pointer; }
.snap2:visited { color: var(--gray-600); }
.snap2:hover { color: var(--gray-400); }
.snap2:active { color: var(--gray-600); }

#book_17, #book_18, #book_20, #book_21, #book_27, #book_28, #book_32 { 
    color: var(--accent-blue); 
    cursor: pointer; 
}
#book_17:visited, #book_18:visited, #book_20:visited, #book_21:visited, #book_27:visited, #book_28:visited, #book_32:visited { 
    color: var(--accent-blue); 
}
#book_17:hover, #book_18:hover, #book_20:hover, #book_21:hover, #book_27:hover, #book_28:hover, #book_32:hover,
#book_17:active, #book_18:active, #book_20:active, #book_21:active, #book_27:active, #book_28:active, #book_32:active { 
    color: #ffffff; 
}

#bigpic {
    position: absolute; 
    top: 20px; 
    left: 20px; 
    width: 28.85vw; 
    height: 28.85vw; 
    border: 0.2vw solid var(--gray-600); 
    background: Beige; 
    text-align: center; 
    border-radius: 1vw; 
    z-index: 100;
    box-sizing: border-box; 
}

#bigpic img {
    width: 100%;
    height: 100%; 
    object-fit: contain; 
    display: block;
}

#trademark_big {
    position: absolute; 
    left: 66.7%;       
    top: 8%;           
    font-size: 1.4vw; 
    font-family: var(--font-main); 
    z-index: 101; 
    color: var(--gray-600);
    margin: 0;         
}

#definer {
    position: absolute;
    bottom: 1.5vw;  
    left: 0;
    width: 100%;    
    margin: 0;      
    font-size: 1.2vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2vw;
}

#definer_sub1 { text-shadow: 0 0 1.8vw var(--gray-600); }
#definer_sub2 { color: var(--accent-red); font-size: 1.1vw; }

#trifin_big { font-size: 0.8vw; position: relative; bottom: 0.5vw; font-family: var(--font-main); color: var(--gray-800); cursor: pointer; border: 0 solid red; }

.drsElement { display: none; }
.drsMoveHandle { border-bottom: 2px solid var(--gray-600); cursor: move; }

#myText { width: 14.4vw; font-size: 0.97vw; padding: 0.1vw 0 0.1vw 0.1vw; border-radius: 0.5vw; font-family: var(--font-decorative); border-top-color: #AACCff; border-left-color: #AACCff; border-bottom-color: #6699ff; border-right-color: #6699ff; }
#myButton, #myButton2, #myButton3 { font-size: 0.97vw; padding: 0.1vw 0.5vw; border-radius: 0.5vw; font-family: var(--font-decorative); border-color: #6699ff; }
#myButton { width: 5.1vw; }
#myButton2, #myButton3 { width: 3.5vw; }

.showpsa_style, .showisa_style { width: 5.7vw; background: transparent; font-size: 0.97vw; padding: 0.1vw; font-family: var(--font-decorative); border: transparent; }

#howmany, #countthis { font-size: 1.2vw; }

#menu_manager { margin: 0; padding: 0; width: 100%; opacity: 0; text-align: center; font-size: 1.2vw; }

/* =================================================================
   9. OPTIMIZED BOOK BUTTON SELECTORS (CONSOLIDATED)
   ================================================================ */
[class*="_btns1"] { 
    display: block; 
    font-size: 1.2vw; 
}

[class*="_btns2"],
.psalms_btns2 { 
    display: block; 
    margin-bottom: -3vw; 
    font-size: 1.2vw; 
}

.psalms_btns3, 
.psalms_btns4, 
.psalms_btns5, 
.psalms_btns6, 
.isaiah_btns2, 
.isaiah_btns3 { 
    display: block; 
    font-size: 1.2vw; 
}




/* =================================================================
   9. Master Quotes layout
   ================================================================ */
   

        .quote-box {
    background: transparent;
    background-color: transparent;
	border: 0 solid red;
    padding: .2vw;
    max-width: 20vw;
    text-align: center;
    transition: opacity 0.5s ease-in-out;
    position: relative;
    bottom: 12.5vw;
    left: 76vw;
	cursor: pointer;
	user-select: none; /* Prevents text from being accidentally highlighted when clicking */
	z-index: 10;
        }

        #quote-text {
    font-family: "chillerregular", serif;
    background: transparent; /* Ensures the text paragraph itself has no background */
    background-color: transparent;
    font-size: 1.8vw;
    color: #333;
    font-style: normal;
    line-height: 1;
    margin: 0 0 1vw 0;
    z-index: 10;	
        }

        #quote-author {
    font-family: "chillerregular", serif;
    background: transparent;
    font-size: 1.8vw;
    color: #333;
    text-align: right; /* Pushes the dash and author name to the right side at the bottom */
    margin: 0;
	z-index: 10;
        }


/* =================================================================
   10. CSS for Bubble pointing to link to Introduction Modal Window
   ================================================================ */

/* Ensure the parent span acts as an anchor for the balloon */
.trifinitum-link {
    position: relative;
    cursor: pointer;
}

/* The balloon styling */
.intro-balloon {
    position: absolute;
    top: 150%; /* Adjust this if you need it further away from the text */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333333;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-family: Arial, sans-serif; /* Fallback, it will inherit yours if removed */
    white-space: nowrap;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.3);
    z-index: 1000;
    cursor: default; /* Prevents the balloon text from looking clickable */
    
    /* The bounce animation */
    animation: bounce 2s infinite;
}

/* The pointer triangle */
.intro-balloon::after {
    content: '';
    position: absolute;
    bottom: 100%; /* Positions the triangle at the top of the balloon */
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent #333333 transparent; 
}

/* The close button */
.close-balloon {
    background: none;
    border: none;
    color: #aaaaaa;
    margin-left: 10px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    padding: 0;
}

.close-balloon:hover {
    color: #ffffff;
}

/* Keyframes for the bounce */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
    40% { transform: translate(-50%, -8px); }
    60% { transform: translate(-50%, -4px); }
}



footer {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: .2vw .4vw;
    font-size: .9vw;
    color: #444;
    background: transparent;
    z-index: 9999;
}




@keyframes pulseSize {
   0%, 100% {
      transform: scale(1); /* Normal size */
   }
   50% {
      transform: scale(1.1); /* Peak size (1.25 = 125% of original) */
   }
}

.pulsing-text {
   display: inline-block;
   /* 2s controls the designated rate/speed. Change to 1s for faster, 4s for slower */
   animation: pulseSize 2s infinite linear; /* 'linear' could be 'ease-in-out' */
}