body {
	width: 100%;
	margin: auto;
	background: #000;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	min-height: 100vh;
	overflow: auto;
	}
		
.modal-text {
	line-height:120%;
	margin-bottom:0.5em;
	font-size:1.1em;
	}

.modal-text-subtitle {
	line-height:120%;
	margin-bottom:0.5em;
	font-size:1.1em;
	color:#ffd86b;
	padding-top:0.8em;
	}

#Title-box {
	font-family: "Montserrat";
	background: #222B38;
	margin: 2px;
	border-radius: 15px 15px 0px 0px;
	}

#title {
	font-size: 2.2em;
	font-weight: 600;
	text-align: center;
	color: #FFD86B;
	padding: 15px 0px;
	}

.top-buttonsMenu {
	background: #2F3845;
	margin: 1px 2px 0px 2px;
	padding: 0px 0px 8px 0px;
	text-align: center;
	}

#startBtn2 {
	width:15ch;
	background: #175C17;
	border: 1px solid #000;
	padding: 6px 0px;
	margin-right: 5px;
	transition: background 0.5s;
	}
	
#startBtn2:hover {
	background: #03b603;
	color: #fff;
	opacity: 1;
	}
	
#staticPreviewBtn2 {
	width:15ch;
	background: #2D2D8F;
	border: 1px solid #000;
	padding: 6px 0px;
	margin-right: 5px;
	transition: background 0.5s;
	}
	
#staticPreviewBtn2:hover {
	background: #3e3ef9;
	color: #fff;
	opacity: 1;
	}
	
#saveParamsBtn {
	width:17ch;
	background: #414D5F;
	color: #eee;
	border: 1px solid #000;
	padding: 6px 0px;
	margin-right: 5px;
	transition: background 0.5s;
	}
	
#saveParamsBtn:hover {
	background: #155199;
	color: #fff;
	opacity: 1;
	}

#saveParamsBtn:active {
	background: #0095FF;
	border: 1px solid #aaa;
	opacity: 1;
	}
	
#resetBtn {
	width: 7ch;
	background:#A71010;
	border: 1px solid #000;
	padding: 6px 0px;
	margin-right: 5px;
	transition: background 0.5s;
	}

#resetBtn:hover {
	background: #D50202;
	color: #fff;
	opacity: 1;
	}
	
#resetBtn:active {
	background: #FD5454;
	border: 1px solid #aaa;
	color: #fff;
	opacity: 1;
	}

#aboutFontsBtn {
	width: 19ch;
	background: #414D5F;
	color: #eee;
	border: 1px solid #000;
	padding: 6px 0px;
	margin-right: 5px;
	transition: background 0.5s;
	}
	
#aboutFontsBtn:hover {
	background: #b53eb5;
	color: #fff;
	opacity: 1;
	}

#detailsBtn {
	width: 12ch;
	background: #414D5F;
	color: #eee;
	border: 1px solid #000;
	padding: 6px 0px;
	margin-right: 5px;
	transition: background 0.5s;
	}

#detailsBtnLink {
	text-decoration: none;
	color: #fff;
	}

#detailsBtn:hover {
	background: #01A59E;
	color: #fff;
	opacity: 1;
	}
	
#GooglefontPreviewBtn {
	width: 17ch;
	background: #414D5F;
	color: #eee;
	border: 1px solid #000;
	padding: 6px 0px;
	margin-right: 5px;
	transition: background 0.5s;
	}
	
#GooglefontPreviewBtn:hover {
	background: #DA5B00;
	color: #fff;
	opacity: 1;
	}
	
.settings-panel {
	width: 70%;
	margin: auto;
	background: #000;
	padding: 2px 2px 2px 2px;
	border: 0px solid #333;
	position: sticky;
	top: 0;
	z-index: 10;
	transition: box-shadow 0.2s;
	box-shadow: 0 2px 8px #000a;
	}

.settings-panel label {
	margin-right: 8px;
	font-size: 1em;
	}

.settings-panel input {
	text-align: right;
	margin-right: 6px;
	margin-top: 0px;
	font-size: 1em;
	padding: 2px 4px;
	}
	
.settings-panel select {
	text-align: right;
	margin-right: 6px;
	margin-top: -10px;
	font-size: 0.95em;
	padding: 2px 4px;
	}

.settings-panel textarea {
	font-size: 1em;
	font-family: inherit;
	background: #1B222C;
	display: block;
	width: 97%;
	max-width: 950px;
	height: 160px;
	margin: 6px 0 0 0;
	padding: 10px;
	border-radius: 10px;
	border: 2px solid #2F3845;
	color: #eee;
	resize: vertical;
	box-sizing: border-box;
	}
	
.textBoxTitle {
	display: block; 
	margin-bottom: 5px; 
	font-weight: bold; 
	color:lightblue;
	}

.settings-panel button {
	margin-top: 7px;
	padding: 6px 14px;
	font-size: 1em;
	background: #333;
	color: #fff;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	transition: background 0.2s;
	}

.settings-panel button:hover {
	background: #444;
	}


/* CUSTOM FONT TOOLTIP START **********************************/
.input-with-tooltip {
    position: relative;
    display: inline-block;
}

.tooltip-text {
    visibility: hidden;
	opacity: 0;
	font-size: 0.83em;
    width: 345px;   /* Width of the tooltip. Adjust according to text length */
    background-color: #FAFAD2;
    color: #000;
	border: 1px solid #000;
    text-align: center;
    border-radius: 3px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    left: 100%;
	top: 1;
	margin-left: -75%;
	margin-top: -25px;
    transform: translateX(10%);
    transition: opacity 0.3s ease-in-out, visibility 0.0s ease-in-out;
}

.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 100%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.input-with-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* CUSTOM FONT TOOLTIP END ******************************************/

.show-settings-btn, .replay-btn {
	display: none;
	position: fixed;
	top: 5px;
	z-index: 100;
	background: #555;
	color: #fff;
	border: 1px solid #000;
	border-radius: 4px;
	padding: 4px 10px;
	font-size: 1em;
	cursor: pointer;
	box-shadow: 0 2px 8px #000a;
	opacity: 1;
	transition: opacity 0.2s;
	}

.show-settings-btn {
	left: 50px;
	}

.replay-btn {
	left: 195px;
	background: #008000;
	transition: background 0.5s;
	}

.replay-btn:hover {
	background-color: #00aa00;
	transition: background 0.5s;
	}
	
.replay-btn:active {
	background-color: #00aa00;
	border: 1px solid #aaa;
	}

.show-settings-btn:hover {
	opacity: 1;
	background: #333;
	}

.text-container {
	position: fixed;
	padding-top: ;
	padding-left: 40px;
	margin: 0 16px 20px 16px;
	z-index: 1;
	font-family: Arial, Helvetica, sans-serif;
	white-space: pre-wrap;
	word-break: break-word;
	max-width: calc(100vw - 32px - 80px);
	min-height: 100px;
	transition: color 0.3s, background 0.3s, font-size 0.3s, font-family 0.3s;
	opacity: 1;
	visibility: visible;
	}

.text-container p {
	margin: 0 0 1em 0;
	padding: 0;
	display: block;
	}



.letter {
	opacity: 0;
	transition: opacity 0.3s;
	display: inline-block;
	}

.letter.visible {
	opacity: 1;
	}


@media (max-width: 600px) {
	.settings-panel textarea {
		font-size: 1em;
		}

	.text-container {
		font-size: 6vw !important;
		}

	.show-settings-btn,
	.replay-btn {
		font-size: 0.9em;
		padding: 5px 10px;
		}
	}
	
.tooltip-container {
	position: relative;
	display: inline-block;
	cursor: help;
	}

.info-bubble {
	visibility: hidden;
	opacity: 0;
	font-size: 0.83em;
	background-color: #FAFAD2;
	color: #000;
	text-align: center;
	border: 1px solid #000;
	border-radius: 3px;
	padding: 5px;
	position: absolute;
	z-index: 2;
	left: 100%;
	top: 1;
	margin-left: -100%;
	margin-top: -55px;
	transform: translateX(10%);
	transition: opacity 0.3s, visibility 0.0s;
	}

.tooltip-container:hover .info-bubble {
	visibility: visible;
	opacity: 1;
	}

.white-input-box {
	padding-left: 0px;
	}

.left-text-column {
	width: 22ch;
	}

.left-column {
	width: 470px;
	background: #2F3845;
	vertical-align: top;
	padding: 20px 0px 40px 16px;
	margin-left: 10px;
	border-radius: 0px 0px 0px 15px;
	}

.right-column {
	background: #222B38;
	vertical-align: top;
	padding: 16px 0px 20px 16px;
	margin-left: 10px;
	border-radius: 0px 0px 15px 0px;
	}
	
	
/* Settings Names + Inputs colors */
input[type="checkbox"] {
	width: 16px;
	height: 16px;
	}
	
input[type="number"] {
	background-color: #fff;
	opacity: 1;
	}

input[type="color"] {
	width:72px; 
	height: 26px; 
	border: ; 
	padding: 0px 2px;
	}

/*	
input[type="color"] {
	-webkit-appearance: ;
	width:26px; 
	height: 26px; 
	border: none; 
	padding: 0px 0px;
	border-radius: 6px;
	}
	
input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 2px;
	background-color: #fff;
}
input[type="color"]::-webkit-color-swatch {
	border: 1px solid #666;
	border-radius: 5px;
}
*/

.dropdown-slide {
	box-sizing: border-box;
	width: 155px;
	color: #FFF0A0;
	padding: 0px;
	margin-left: -8px;
	background-color: #2F3845;
	border: 0;
	border-radius: 0;
	position: relative;
    display: inline-block;
	cursor: help;
}

@-moz-document url-prefix() {
    .dropdown-slide {
        margin-left: -4px; /* Adjust for Firefox */
    }
}


.dropdown-slide:hover {
    background-color: #232A34;
    position: relative;
    display: inline-block;
    }


#settingsSeparator {
	text-align: left; 
	margin: 4px 0 4px 0; 
	border: 1px 0 0 0; border-color: #666F7F; 
	width: 460px
	}
	
#setting-text-delay   {color: #A3FEA3 ;} /* Green */
#setting-text-pause   {color: #d0f0ff ;}
#setting-text-text    {color: #EEEEEE ;}
#setting-text-effects {color: #FFF0A0 ;}

#initialDelay         {background-color: #E1FFE1 ;}

#delay,
#fadeInTime,
#bulgeAmount,
#slideAmount,
#vertSlideAmount,
#dropAmount           {background-color: #FFFBE4;}

#paragraphDelay,
#sentenceEndDelay,
#commaDelay,
#lineDelay            {background-color: #E1F5FF;}
	
#customFontInput {
	text-align: left;
	}

#small-typing-instructions {
	font-size: 0.9em;
	color: #d0f0ff;
	padding: 10px 0px 5px 0px;
	margin: 0;
	font-weight: normal;
	}

.notes {
	margin: 0;
	padding: 8px 0px 0px 18px;
	}

/* Modal Overlay */
.modal-overlay {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0; top: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.65);
	justify-content: center;
	align-items: center;
	animation: fadeInBg 0.4s;
	}

/* Modal Overlay */
.modal-overlay {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0; top: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,0.65);
	justify-content: center;
	align-items: center;
	animation: fadeInBg 0.4s;
	}

/* Modal Content */
.modal-content {
	background: #2F3845;
	color: #f7f7ff;
	border-radius: 14px;
	box-shadow: 0 10px 40px #000b, 0 2px 8px #0007;
	padding: 36px 32px 28px 32px;
	width: 60vw;           /* Make modal 60% of viewport width */
	max-width: 80vw;       /* Prevent it from exceeding 80vw */
	min-width: 340px;      /* Optional: keep a minimum width */
	max-height: 80vh;
	font-family: 'Montserrat', 'Nunito', Arial, sans-serif;
	position: relative;
	opacity: 0;
	transform: scaleX(0.6) scaleY(0.8);
	animation: modalExpand 0.5s cubic-bezier(.4,1.7,.5,1) forwards;
	display: flex;
	flex-direction: column;
	}

.modal-body {
	overflow-y: auto;
	margin-top: 12px;
	max-height: 52vh;
	padding-right: 8px;
	}

/* Modal Title */
.modal-content h2 {
	margin-top: 0;
	margin-bottom: 8px;
	font-size: 1.35em;
	font-weight: bold;
	color: #ffd86b;
	letter-spacing: 0.02em;
	}

/* Modal Body Paragraphs */
.modal-body p {
	line-height: 1.7;
	color: #e3e3e3;
	margin-bottom: 1em;
	}

/* Close Button */
.modal-close {
	position: absolute;
	top: 10px;
	right: 18px;
	background: none;
	border: none;
	font-size: 2em;
	color: #ffd86b;
	cursor: pointer;
	transition: color 0.2s;
	}
.modal-close:hover { color: #fff; }

@keyframes modalExpand {
	0% {
		opacity: 0;
		transform: scaleX(0.6) scaleY(0.8);
		}
	70% {
		opacity: 1;
		transform: scaleX(1.05) scaleY(1.08);
		}
	100% {
		opacity: 1;
		transform: scaleX(1) scaleY(1);
		}
	}

@keyframes fadeInBg {
	from { background: rgba(0,0,0,0); }
	to   { background: rgba(0,0,0,0.65); }
	}

.start-resetArea {
	text-align: right;
	}