body {
    width: 780px;
    margin: auto;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='48' viewBox='0 0 60 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='fancy-rectangles' fill='%23efefef' fill-opacity='1'%3E%3Cpath d='M6 12h6v12H6V12zm12 0h6v12h-6V12zm6-12h6v12h-6V0zM12 0h6v12h-6V0zm0 24h6v12h-6V24zM0 0h6v12H0V0zm6 36h6v12H6V36zm12 0h6v12h-6V36zm12-12h6v12h-6V24zM42 0h6v12h-6V0zm-6 12h6v12h-6V12zm12 0h6v12h-6V12zM36 36h6v12h-6V36zm12 0h6v12h-6V36zm-6-12h6v12h-6V24zm12 0h6v12h-6V24z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    font-family: 'Inter', 'Inter', Helvetica, sans-serif;
    color: #272727;
    margin-top: 10px;
}

a { color: #272727; }
a:visited { color: #272727; }

h2 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    font-weight: bold;
}

textarea {
    resize: none;
    border: 1px solid #272727;
    padding: 10px;
    border-radius: 15px;
}

.button-holder { margin: 10px 0px 10px 0px; }

button {
    padding: 10px;
    border-radius: 15px;
    border: 1px solid #272727;
    padding: 0.75rem 1.25rem;
    border-radius: 10rem;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.15rem;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    box-shadow: 2px 2px #272727;
}

.copy-button:hover,
.download-button:hover,
#generate-keys-button:hover {
    text-decoration: underline;
}

.title {
    margin: 0px;
    margin-bottom: 10px;
    font-size: 24px;
}

#keys-holder {
    padding: 0px 40px 20px 40px;
    border: 1px solid #272727;
    border-radius: 15px;
    background-color: #efefef;
    box-shadow: 4px 4px;
    width: 340px;
    float: right;
}

.copy-button { color: #272727; }
.download-button { background: #272727; color: white; }

#title-holder {
    background-color: #efefef;
    padding: 15px;
    text-align: left;
    border-radius: 15px;
    border: 1px solid #272727;
    box-shadow: 4px 4px;
    line-height: 150%;
}

#parameters-holder, #faq-holder {
    background-color: #efefef;
    padding: 15px;
    margin: 20px 0px;
    text-align: left;
    border-radius: 15px;
    border: 1px solid #272727;
    box-shadow: 4px 4px;
}

#copyright-holder { clear: both; margin-top: 10px; }

/* FAQ Specifics */
#faq-holder p { padding: 10px 0px; line-height: 1.5; }
#faq-holder li { padding: 5px 0px; line-height: 1.5; }
.faq-alert { padding: 15px; border-radius: 5px; margin: 15px 0; font-size: 0.95em; line-height: 1.5; }
.faq-tip { background-color: #e8f5e9; border-left: 5px solid #4caf50; color: #1b5e20; }
.faq-warning { background-color: #fff3e0; border-left: 5px solid #ff9800; color: #e65100; }
.faq-item h3 { margin-top: 25px; margin-bottom: 5px; }

/* Popup / Modals */
html .popup-body { text-align: left; }
html .popup-body p { margin: 5px; }
html .popup.about .popup-body { font-size: unset; margin-bottom: 15px; }
html .popup.about .popup-content { background-color: #ffffff; width: min(600px, 90vw); }
html .popup-title { margin-top: 22px; font-size: min(20px, 11vw); font-weight: 600; }

/* Form Elements */
#parameters-holder label { display: block; margin: 5px 0px; }
#generate-keys-button {
    padding: 48px;
    border: 1px solid #272727;
    margin: 20px 0px;
    color: white;
    background: #272727;
}
#parameters-holder select, #parameters-holder input {
    padding: 5px;
    border: 1px solid #272727;
    border-radius: 5px;
}
#parameters-holder div { margin-bottom: 10px; }
#generate-key-button-holder { margin: auto; display: flex; align-items: center; justify-content: center; }
#textinput-holder { margin: auto; width: 186px; }
#parameters-holder select { width: 107%; }
#parameters-holder input { width: 100%; }
.key-size-select-holder { display: none; }
#title-and-parameters-holder { width: 340px; float: left; }

/* Mobile / Responsive */
@media (max-width: 768px) {
    body { width: 100%; padding: 10px; }
    #keys-holder {
        padding: 0px 40px 20px 40px;
        border: 1px solid #272727;
        border-radius: 15px;
        background-color: #efefef;
        box-shadow: 4px 4px;
        width: 85%;
        float: left;
    }
    #title-and-parameters-holder { width: 85%; float: left; }
    #title-holder { width: 100%; }
    /* FAQ page specific override for title holder if needed, or rely on 100% */
    body > #title-holder { width: 84%; } 
    
    #parameters-holder { width: 100%; }
    #faq-holder { width: 84%; }
    #copyright-holder { margin-top: 10px; margin-bottom: 10px; float: left; }
    #keys-holder-parent { width: 85%; float: left; }
    textarea { width: 100%; }
    #keys-holder button { padding: 0.5rem 0.5rem; }
    .security-banner { width: 85%; }
}