.magni{
    font color:#f5eee7;
    font-size:30px;
           }    
body {
    background-attachment: fixed;
    background-color: #2b2b2b;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #d3c6aa;
    font-family: 'Noto Serif JP', serif;
    font-size: 20px;
    margin: 20px;
    padding: 20px;
    position: relative;
    word-wrap: break-word;
    box-shadow: inset 0 0 20px rgba(43, 43, 43, 0.8);
}

/* Enhanced Button Styling */
button {
    background: linear-gradient(135deg, #8a7a5b 0%, #b7a57a 50%, #6b5b4b 100%);
    border: 3px solid #6b5b4b;
    border-radius: 12px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.2);
    color: #2b2b2b;
    cursor: pointer;
    padding: 8px 16px;
    transition: all 0.3s ease-in-out;
}

button:hover {
    background: linear-gradient(135deg, #b7a57a 0%, #d3c6aa 50%, #8a7a5b 100%);
    transform: translateY(-2px);
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.5);
}

/* Header Styling */
.HeaderStyle {
    background: radial-gradient(circle at center, #3a3a3a 0%, #524e4d 50%, #2b2b2b 100%);
    border: 4px double #6b5b4b;
    border-radius: 8px;
    color: #b7a57a;
    font-family: 'Noto Serif JP', serif;
    font-size: 20px;
    padding: 10px;
    text-shadow: 2px 2px 6px rgba(107, 91, 75, 0.7);
}

/* Enhanced Textarea and Input */
textarea, input {
    background: linear-gradient(to bottom, #3a3a3a 0%, #2f2f2f 100%);
    border: 3px solid transparent;
    border-image: linear-gradient(45deg, #6b5b4b, #867b74, #b7a57a) 10;
    border-radius: 6px;
    box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.6), inset -2px -2px 6px rgba(255, 255, 255, 0.1);
    color: #d3c6aa;
    font-family: 'Noto Serif JP', serif;
    font-size: 20px;
    outline: none;
    padding: 8px;
    transition: all 0.3s ease;
    width: 100%;
}

textarea:hover, input:hover {
    box-shadow: inset 4px 4px 12px rgba(0, 0, 0, 0.7), inset -3px -3px 8px rgba(255, 255, 255, 0.15);
    border-image: linear-gradient(45deg, #b7a57a, #867b74, #6b5b4b) 10;
}

/* Links */
a:link, a:visited {
    color: #a89984;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover, a:active {
    color: #f4bf75;
    text-shadow: 0 0 5px rgba(244, 191, 117, 0.5);
}

/* Output Container */
#outputContainer {
    background: radial-gradient(circle at top left, #3a3a3a 0%, #2b2b2b 70%, #1f1f1f 100%);
    border: 4px double #6b5b4b;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    color: #d3c6aa;
    padding: 15px;
    white-space: pre-wrap;
    width: 100%;
}

/* Fancy HR */
hr {
    background: linear-gradient(to right, transparent, #6b5b4b, #b7a57a, #6b5b4b, transparent);
    border: none;
    height: 4px;
    position: relative;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

hr::after {
    content: "✤";
    color: #b7a57a;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #2b2b2b;
    padding: 0 10px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* Enhanced Select Menu */
#typeSelector {
    background: linear-gradient(to bottom, #3a3a3a 0%, #2f2f2f 100%);
    border: 3px solid transparent;
    border-image: linear-gradient(45deg, #6b5b4b, #867b74, #b7a57a) 10;
    border-radius: 8px;
    box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.5), inset -1px -1px 4px rgba(255, 255, 255, 0.1);
    color: #d3c6aa;
    font-family: 'Noto Serif JP', serif;
    font-size: 16px;
    padding: 8px 24px 8px 12px; /* Extra padding on right for dropdown arrow */
    transition: all 0.3s ease;
    appearance: none; /* Remove default styling */
    -webkit-appearance: none; /* Chrome */
    -moz-appearance: none; /* Firefox */
}

/* Dropdown Arrow */
#typeSelector {
    position: relative;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23b7a57a" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
}

#typeSelector:hover {
    background: linear-gradient(to bottom, #454545 0%, #3a3a3a 100%);
    box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.6), inset -2px -2px 6px rgba(255, 255, 255, 0.15);
}

#typeSelector:focus {
    border-image: linear-gradient(45deg, #b7a57a, #f4bf75, #6b5b4b) 10;
    box-shadow: 0 0 8px rgba(183, 165, 122, 0.5);
}

/* Browser-Specific Enhancements */

/* Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #typeSelector {
        background-image: -webkit-linear-gradient(to bottom, #3a3a3a 0%, #2f2f2f 100%);
    }
    button {
        -webkit-box-reflect: below 1px linear-gradient(transparent, rgba(0, 0, 0, 0.2);
    }
    textarea, input {
        -webkit-backdrop-filter: blur(2px);
    }
}

/* Firefox */
@-moz-document url-prefix() {
    #typeSelector {
        padding-right: 28px; /* Extra space for arrow in Firefox */
    }
    textarea, input {
        scrollbar-color: #6b5b4b #3a3a3a;
        scrollbar-width: thin;
    }
    hr {
        -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    }
}

/* Edge */
@supports (-ms-ime-align:auto) {
    #typeSelector {
        background: -ms-linear-gradient(to bottom, #3a3a3a 0%, #2f2f2f 100%);
    }
    button {
        -ms-transition: all 0.3s ease-in-out;
    }
    textarea, input {
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }
}