body {
    font-family: 'Arial', sans-serif;
    background-color: var(--site-color);
    color: var(--text-color);
    padding: 0;
    margin: 0;
}

hr {
    color: var(--text-color);
}

.customization-panel {
    text-align: center;
    margin-bottom: 20px;
}

.container {
    background-color: var(--bg-color);
    width: 80%;
    max-width: 800px;
    margin: 0 auto;
    padding-left: 7%;
    padding-right: 7%;
    padding-top: 2%;
    padding-bottom: 7%;
    border-radius: 0 0 20px 20px;
    
    text-align: left;
}

div {
    /* background-color: #e76e0b; */

}

h1, h2, h3, p {

     /* color: #0d47a1; */
}

h1 {
    font-size: 32px;
    /* color: #0d47a1; */
    /* margin-bottom: 20px; */
}

h2 {
    font-size: 24px;
    /* color: #3949ab; */
    /* margin-bottom: 15px; */
}

p {
    /* font-size: 16px; */
    /* color: #000000; */
    /* margin-bottom: 15px; */
}

.small-print {
    font-size: 11px;
    /* color: #000000; */
    /* margin-bottom: 15px; */
}

.descriptionLong {
    margin-top: 20px;
    font-size: 11px;
    /* color: #000000; */
    margin-bottom: 15px;
    padding-right: 20%;
    /*background-color: #e76e0b;*/
}

.myURL {
    color:  var(--primary-color);
}

.main-title {
    /* background-color: #b89a14; */
}

.security{
    margin-top: 20px;
    margin-bottom: 24px;
    padding-right: 20%;
    /* background-color: #d162b0; */
}

.desc-text{
    margin-top: 20px;
    /* background-color: #48b814; */
    padding-right: 20%;
}

.privacy-circle {
    background-color: #eeeeee;
    border-radius: 50%;
    width: 250px; /* Adjusted width for perfect circle */
    height: 250px; /* Adjusted height for perfect circle */
    padding: 40px; /* Adjusted padding for text fit */
    display: inline-block;
    margin: 20px;
    text-align: center;
    vertical-align: middle;
    line-height: 1.5;
}

.input-group {
    margin-top: 20px;
    /* background-color: #148ab8; */
}

.output-group {
    margin-top: 20px;
    margin-bottom: 40px;
    /* background-color: #9d14b8; */
}

input[type="text"], button {
    color: var(--placeholder-text-color);
    /* color: red; */
    width: 90%;
    padding: 12px;
    border: 0px solid #5c6bc0;
    border-radius: 4px;
    font-size: 16px;
    margin-bottom: 10px;
    background-color: var(--placeholder-bg-color);
    
}

input[type="text"]::placeholder {
    color: var(--placeholder-text-color);
}

button {
    width: 50%;
    border: none;
    background-color: var(--primary-color);
    color: var(--button-text-color);
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 24px;
    font-style: italic;
    font-weight: bold;
}

button:hover {
    background-color: var(--hover-color);
    color:  var(--primary-color);
}

.output-link {
    width: 90%;
    word-break: break-all;
    background-color: var(--placeholder-bg-color);
    padding: 12px;
    border-radius: 4px;
    color: var(--placeholder-text-color);
}


/* Applying color scheme variables */
:root {
    --site-color:#DADCD0;
    --bg-color:#EEEFE9;
    --primary-color: #ED8008;  /* Define a variable */
    --secondary-color: #a74432;
    --hover-color: #ffffff;
    --text-color: #3d3d3d;
    --placeholder-text-color:#95968f;
    --placeholder-bg-color:#fdfff4;
    --button-text-color:#ffffff;
}