/* input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
} */

body {

    font-family: 'Arial', sans-serif;

    background: linear-gradient(135deg, #3b8d99, #6d4b9d);

    margin: 0;

    padding: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

}

form label {
    display: inline-block;
    margin-right: 15px;
}

iframe {
    margin: 0;

    padding: 0;

    width: 100%;

    max-width: 1000px;

    max-height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;
}

.container {

    background: #ffffff;

    width: 100%;

    max-width: 1000px;

    border-radius: 15px;

    padding: 30px;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);

    text-align: center;
}

h2 {

    font-size: 15px;

    color: #333;

    margin-bottom: 20px;

    font-weight: 600;

}

label {

    font-size: 16px;

    color: #555;

    margin-bottom: 5px;

    text-align: left;

    display: block;

}

input[type="text"],
input[type="number"],
input[type="range"] {

    width: 100%;

    padding: 12px;

    margin-bottom: 20px;

    border-radius: 8px;

    border: 1px solid #ddd;

    box-sizing: border-box;

    font-size: 16px;

    transition: border-color 0.3s;

}

input[type="text"]:focus,
input[type="number"]:focus {

    border-color: #6d4b9d;

    outline: none;

}

input[type="range"] {

    -webkit-appearance: none;

    appearance: none;

    height: 8px;

    background: #ddd;

    border-radius: 5px;

    transition: background-color 0.3s;

}

input[type="range"]:focus {

    background: #6d4b9d;

}

input[type="range"]::-webkit-slider-thumb {

    -webkit-appearance: none;

    appearance: none;

    height: 20px;

    width: 20px;

    background: #6d4b9d;

    border-radius: 50%;

    cursor: pointer;

    transition: background 0.3s;

}

input[type="range"]:active::-webkit-slider-thumb {

    background: #3b8d99;

}

.slider-container {

    margin-bottom: 20px;

}

.slider-container input[type="number"] {

    width: 60px;

    display: inline-block;

    margin-right: 15px;

}

.result,
.error {

    font-size: 18px;

    color: #333;

    font-weight: 600;

}

.result {

    color: #4caf50;

}

.error {

    color: #f44336;

}

.footer {

    font-size: 14px;

    color: #aaa;

    margin-top: 30px;

}

/* TAB CONTENT */

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
    background-color: inherit;
    float: center;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}