/* Center all content */
body {
    max-width: 800px;
    margin: 0 auto; /* centers the whole page */
    padding: 20px;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #fafafa;
}

/* Header and footer styling */
.site-header, .site-footer {
    text-align: center;
    padding: 20px 0;
    /* border-bottom: 1px solid #ddd; /* optional for header */
}

.site-footer {
    /*border-top: 1px solid #ddd; /* optional for footer */
    font-size: 14px;
    color: #666;
    margin-top: 20px
}

/* Line under h1 (page title) */
h1 {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 2px solid #333;
    margin-bottom: 0;
}

/* Any other global styles */
.banner {
    width: 100%;
    margin: 0;
    padding: 0;
   /* height: 0; 
    padding-bottom: 30%;
    background-size: cover;
    background-position: center; 
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    overflow: hidden;*/
}
.banner-icon {
    width: 100%;
    height: auto;
    display: block;
}
/*@media (max-width: 768px) {
    /*.banner {
        padding-bottom: 20%
    }*/
    .banner {
        height: 200px;
    }*/
    .banner-icon{
        width: 100%;
        height: 100%;
        max-height: 200px;
        object-fit: cover;
    }   
}*/
.error {
    color: red;
}
.instructions {
    text-align: center;
    margin: 5px 0;
    font-style: italic;
}
.citation {
    text-align: center;
    font-size: 0.8em;
    color: #666;
    margin-top: 5px;
}
.converter-form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap; /* allows wrapping on small screens */
    margin-bottom: 20px;
}
.rating-slider {
    text-align: center;
    margin: 30px 0;
}
.slider-container {
    position: relative;
    width: 300px;
    margin: 0 auto;
    height: 40px;
}
#rating {
    width: 100%;
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 2;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}
#banana-pointer {
    position: absolute;
    top: -2px;
    left: 0;
    font-size: 30px;
    line-height: 1;
    pointer-events: none;
    z-index: 3;
    transform: translateX(-15px); /* center over thumb */
}
/* Hide the default thumb in WebKit browsers */
#rating::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1px; /* make it tiny */
    height: 1px;
    background: transparent;
}

/* Hide in Firefox */
#rating::-moz-range-thumb {
    width: 1px;
    height: 1px;
    background: transparent;
    border: none;
}

/* Keep the track visible */
#rating {
    background: #ddd;
    height: 8px;
    border-radius: 4px;
}

/* For Firefox, also need to set track color */
#rating::-moz-range-track {
    background: #ddd;
    height: 8px;
    border-radius: 4px;
}