/* Pancoda Schriftarten */
@font-face {
    font-family: 'comfortaa';
    src: url('https://4d886bbc.rocketcdn.me/wp-content/uploads/2023/11/comfortaa-v45-latin-regular.woff2') format('woff2'),
         url('path/to/your/pancoda-sans-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'comfortaa';
    src: url('https://4d886bbc.rocketcdn.me/wp-content/uploads/2023/11/comfortaa-v45-latin-700.woff2') format('woff2'),
         url('path/to/your/pancoda-sans-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

:root {
  --bricks-color-swofww: #203a3d;
  --bricks-color-pwxicc: #fefef6;
  --bricks-color-intcow: #15846e;
  --bricks-color-fhnrmp: #1c3236;
  --bricks-color-whbuhq: #354c4f;
  --bricks-color-fnrbun: #88918f;
  --bricks-color-mwmwvr: #94d6cb;
  --bricks-color-gmepie: rgba(24, 43, 47, .8);
  --bricks-color-cvypkq: #1cb095;
  --bricks-color-vojqtr: #00c7ac;
  --bricks-color-fcsnwx: #fefdf5;
  --bricks-color-nsbcqf: #404040;
  --bricks-color-rkgklw: #84a45a;
  --bricks-color-isvakc: #d7692d;
  --font-h1: clamp(calc(1rem * (24 / var(--base-font))), calc(1rem * ((((-1 * var(--min-viewport)) / var(--base-font)) * ((50 - 24) / var(--base-font)) / ((var(--max-viewport) - var(--min-viewport)) / var(--base-font))) + (24 / var(--base-font)))) + (((50 - 24) / var(--base-font)) / ((var(--max-viewport) - var(--min-viewport)) / var(--base-font)) * 100) * var(--clamp-unit), calc(1rem * (50 / var(--base-font))));
  --font-h2: clamp(calc(1rem * (24 / var(--base-font))), calc(1rem * ((((-1 * var(--min-viewport)) / var(--base-font)) * ((40 - 24) / var(--base-font)) / ((var(--max-viewport) - var(--min-viewport)) / var(--base-font))) + (24 / var(--base-font)))) + (((40 - 24) / var(--base-font)) / ((var(--max-viewport) - var(--min-viewport)) / var(--base-font)) * 100) * var(--clamp-unit), calc(1rem * (40 / var(--base-font))));
  --font-h3: clamp(calc(1rem * (22 / var(--base-font))), calc(1rem * ((((-1 * var(--min-viewport)) / var(--base-font)) * ((26 - 22) / var(--base-font)) / ((var(--max-viewport) - var(--min-viewport)) / var(--base-font))) + (22 / var(--base-font)))) + (((26 - 22) / var(--base-font)) / ((var(--max-viewport) - var(--min-viewport)) / var(--base-font)) * 100) * var(--clamp-unit), calc(1rem * (26 / var(--base-font))));
  --font-h4: clamp(calc(1rem * (20 / var(--base-font))), calc(1rem * ((((-1 * var(--min-viewport)) / var(--base-font)) * ((24 - 20) / var(--base-font)) / ((var(--max-viewport) - var(--min-viewport)) / var(--base-font))) + (20 / var(--base-font)))) + (((24 - 20) / var(--base-font)) / ((var(--max-viewport) - var(--min-viewport)) / var(--base-font)) * 100) * var(--clamp-unit), calc(1rem * (24 / var(--base-font))));
  --font-h5: clamp(calc(1rem * (18 / var(--base-font))), calc(1rem * ((((-1 * var(--min-viewport)) / var(--base-font)) * ((22 - 18) / var(--base-font)) / ((var(--max-viewport) - var(--min-viewport)) / var(--base-font))) + (18 / var(--base-font)))) + (((22 - 18) / var(--base-font)) / ((var(--max-viewport) - var(--min-viewport)) / var(--base-font)) * 100) * var(--clamp-unit), calc(1rem * (22 / var(--base-font))));
  --font-h6: clamp(calc(1rem * (18 / var(--base-font))), calc(1rem * ((((-1 * var(--min-viewport)) / var(--base-font)) * ((20 - 18) / var(--base-font)) / ((var(--max-viewport) - var(--min-viewport)) / var(--base-font))) + (18 / var(--base-font)))) + (((20 - 18) / var(--base-font)) / ((var(--max-viewport) - var(--min-viewport)) / var(--base-font)) * 100) * var(--clamp-unit), calc(1rem * (20 / var(--base-font))));
  --font-body: clamp(calc(1rem * (15 / var(--base-font))), calc(1rem * ((((-1 * var(--min-viewport)) / var(--base-font)) * ((16 - 15) / var(--base-font)) / ((var(--max-viewport) - var(--min-viewport)) / var(--base-font))) + (15 / var(--base-font)))) + (((16 - 15) / var(--base-font)) / ((var(--max-viewport) - var(--min-viewport)) / var(--base-font)) * 100) * var(--clamp-unit), calc(1rem * (16 / var(--base-font))));
  --font-lead: clamp(calc(1rem * (17 / var(--base-font))), calc(1rem * ((((-1 * var(--min-viewport)) / var(--base-font)) * ((19 - 17) / var(--base-font)) / ((var(--max-viewport) - var(--min-viewport)) / var(--base-font))) + (17 / var(--base-font)))) + (((19 - 17) / var(--base-font)) / ((var(--max-viewport) - var(--min-viewport)) / var(--base-font)) * 100) * var(--clamp-unit), calc(1rem * (19 / var(--base-font))));
}

body {
    font-family: 'comfortaa', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: var(--bricks-color-swofww);
    background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('./background-flares.webp');
  color: var(--bricks-color-mwmwvr);
  font-size: var(--font-body);
  line-height: 1.8;
}

.container {
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 600px;
    z-index: 4;
    text-align: center;
    border-radius: 1rem;
    border: 2px solid var(--bricks-color-whbuhq);
  background-color: var(--bricks-color-gmepie);
  color: var(--bricks-color-mwmwvr);
}

h1 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--bricks-color-fcsnwx);
}

p {
    font-size: 16px;
    margin-bottom: 20px;
    color: var(--bricks-color-mwmwvr);
}

.input-group {
    margin-bottom: 20px;
    text-align: left;
}

label {
    display: block;
    margin-bottom: 5px;
}

textarea {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    font-family: 'Pancoda Sans', sans-serif;
    font-size: 14px;
    line-height: 1.8;
    color: var(--bricks-color-fcsnwx);
    background-color: var(--bricks-color-fhnrmp);
    resize: none;
}

button {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;

    border: 1px solid var(--bricks-color-fnrbun);
  border-radius: 10rem;
  padding-top: 1em;
  padding-right: 2.2em;
  padding-bottom: 1em;
  padding-left: 2.2em;
  font-size: 1rem;
  font-weight: 700;
  font-family: comfortaa;
  transition: all .3s ease-in-out;
  color: var(--bricks-color-fcsnwx);
  background-color: var(--bricks-color-cvypkq);
}

button:hover {
    background-color: #0056b3;
}

.message {
    margin-top: 10px;
    font-size: 14px;
    color: #28a745;
    display: none;
}

footer {
    text-align: center;
    margin-top: 20px;
}

footer p {
    font-size: 14px;
    color: var(--bricks-color-mwmwvr);
}

footer a {
    color: var(--bricks-color-cvypkq);
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .container {
        padding: 20px;
    }

    h1 {
        font-size: 20px;
    }

    button {
        font-size: 14px;
    }

    textarea {
        font-size: 13px;
    }
}