body {
    font-family: Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    position: relative;
    min-height: 100vh;
    padding-top: env(safe-area-inset-top); /* Handles safe area on iOS devices */
}
@viewport {
    viewport-fit: cover;
}
.page-header {
    background-color: #333;
    color: #fff;
    padding: 3rem 0 1.5rem;
    margin: 0 0 2rem;
}
.page-header h1 {
    font-size: 2.25rem;
    line-height: 1.2;
    transition: all 0.5s ease;
}
.form-label {
    font-weight: 800;
}
.wrapper {
    max-width: 768px;
    margin: auto;
    position: relative;
}
@media (max-width: 767px) {
    .wrapper {
        max-width: 100%;
        margin: auto 20px;
    }
    .page-header h1 {
        font-size: 2.5rem;
    }
}
.input-group {
  display: block;
}
#hexInput,
#opacityInput {
  width: 100%;
  border-radius: 6px;
}

@media (max-width: 767px) {
    /*.d-flex {
        flex-direction: column;
    }*/
    .btn-convert {
        width: 100%; /* Ensure the button takes the full width for smaller screens */
    }
}
#output {
  font-family: monospace;
  white-space: pre-wrap;
  font-size: 1rem;
  padding: 12px 20px;
  border-radius: 6px;
  min-height: 12rem; /* Minimum height */
  overflow-y: auto;
  resize: auto;
  background-color: rgb(55 65 81) !important;
  border: 1px solid #ddd;
  color: #b1b7c3;
  max-height: 400px;
}
input::placeholder,
textarea::placeholder {
  color: #999 !important; /* Light gray color */
  opacity: 1; /* Ensures full color opacity */
}
#colorPreview {
    display: none; /* Hide by default */
    border: 1px solid #ccc;
	border-radius: 6px;
    padding: 20px;
    /*background: var(--bs-gray-100);*/
    opacity: 0;
    transition: opacity 0.5s ease-in-out; /* Adds a fade-in effect */
}
#colorIndicator {
  min-height: auto;
  border: 1px solid #ccc;
  padding: 20px;
}
#colorIndicator p {
  margin: unset;
}
#textSample h3,
#textSample p {
  margin: 0;
  padding: 5px 0;
}
.text-black {
  color: #000;
}
/* Instructions slide-down effect */
#instructions {
  transition: max-height 0.5s ease, opacity 0.5s ease;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
}

#instructions.show {
  max-height: 500px; /* Adjust as needed */
  opacity: 1;
}

/* Opacity slider (custom-range) */
.custom-range {
	width: 100%;
	height: 1.4rem;
	padding: 0;
	background-color: rgba(0,0,0,0);
	appearance: none
}
.custom-range:focus {
	outline: 0
}
.custom-range:focus::-webkit-slider-thumb {
box-shadow:0 0 0 1px #fff, 0 0 0 .2rem rgba(0,123,255,.25)
}
.custom-range:focus::-moz-range-thumb {
box-shadow:0 0 0 1px #fff, 0 0 0 .2rem rgba(0,123,255,.25)
}
.custom-range:focus::-ms-thumb {
box-shadow:0 0 0 1px #fff, 0 0 0 .2rem rgba(0,123,255,.25)
}
.custom-range::-moz-focus-outer {
border:0
}
.custom-range::-webkit-slider-thumb {
width:1rem;
height:1rem;
margin-top:-0.25rem;
background-color:#007bff;
border:0;
border-radius:1rem;
transition:background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
appearance:none
}

@media(prefers-reduced-motion: reduce) {
.custom-range::-webkit-slider-thumb {
transition:none
}
}
.custom-range::-webkit-slider-thumb:active {
background-color:#b3d7ff
}
.custom-range::-webkit-slider-runnable-track {
width:100%;
height:.5rem;
color:rgba(0,0,0,0);
cursor:pointer;
background-color:#dee2e6;
border-color:rgba(0,0,0,0);
border-radius:1rem
}
.custom-range::-moz-range-thumb {
width:1rem;
height:1rem;
background-color:#007bff;
border:0;
border-radius:1rem;
transition:background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
appearance:none
}

@media(prefers-reduced-motion: reduce) {
.custom-range::-moz-range-thumb {
transition:none
}
}
.custom-range::-moz-range-thumb:active {
background-color:#b3d7ff
}
.custom-range::-moz-range-track {
width:100%;
height:.5rem;
color:rgba(0,0,0,0);
cursor:pointer;
background-color:#dee2e6;
border-color:rgba(0,0,0,0);
border-radius:1rem
}
.custom-range::-ms-thumb {
width:1rem;
height:1rem;
margin-top:0;
margin-right:.2rem;
margin-left:.2rem;
background-color:#007bff;
border:0;
border-radius:1rem;
transition:background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
appearance:none
}

@media(prefers-reduced-motion: reduce) {
.custom-range::-ms-thumb {
transition:none
}
}
.custom-range::-ms-thumb:active {
background-color:#b3d7ff
}
.custom-range::-ms-track {
width:100%;
height:.5rem;
color:rgba(0,0,0,0);
cursor:pointer;
background-color:rgba(0,0,0,0);
border-color:rgba(0,0,0,0);
border-width:.5rem
}
.custom-range::-ms-fill-lower {
background-color:#dee2e6;
border-radius:1rem
}
.custom-range::-ms-fill-upper {
margin-right:15px;
background-color:#dee2e6;
border-radius:1rem
}
.custom-range:disabled::-webkit-slider-thumb {
background-color:#adb5bd
}
.custom-range:disabled::-webkit-slider-runnable-track {
cursor:default
}
.custom-range:disabled::-moz-range-thumb {
background-color:#adb5bd
}
.custom-range:disabled::-moz-range-track {
cursor:default
}
.custom-range:disabled::-ms-thumb {
background-color:#adb5bd
}
#opacityInput {
	flex-grow: 1; /* Ensures the slider takes up available space */
}
#opacityValue {
	min-width: 50px; /* Ensures the value display has enough space */
	text-align: center; /* Centers the text */
}