:root {
    --color1: #52b122;
    --color1-light: oklch(from  var(--color1) calc(l + 0.2) c h);
    --color1-lightest: oklch(from  var(--color1) calc(l + 0.6) calc(c - 0.1) h);
    --color1-shadow: oklch(from var(--color1) calc(l - 0.2) c h / 0.5);
    --color1-greyish: oklch(from var(--color1) calc(l - 0.2) calc(c - 0.1) h);
    --color1-greyish-light: oklch(from var(--color1) calc(l + 0.2) calc(c - 0.1) h);
    --color1-trans-10: oklch(from var(--color1) l c h / 0.1);
    --color1-trans-20: oklch(from var(--color1) l c h / 0.2);
    --color2: oklch(from var(--color1) l c calc(h - 180));
    --gradient: linear-gradient(135deg, var(--color1) 0%, oklch(from var(--color1) calc(l + .02) c h) 100%);
    --gradient-light: linear-gradient(135deg, oklch(from  var(--color1) calc(l + 0.15) c h) 0%, oklch(from var(--color1) calc(l + .03) c h) 100%);
    --white: #e9e9e9;
    --white-trans-10: oklch(from var(--white) l c h / 0.1);
    --grey-lightest: oklch(from var(--white) calc(l - 0.05) c h);
    --grey-dark: oklch(from var(--white) calc(l - 0.8) calc(c - 0.1) h);
    --black: #030303;
    --black-trans-70: from( var(--black) l c h / 0.7);
    --box-shadow: 0 0 10px rgba(0,0,0, 0.2);
    --text-color: var(--white);

    --text-s: clamp(0.7292rem, 0.7152rem + 0.0701vw, 0.7502rem);
    --text-m: clamp(0.875rem, 0.7917rem + 0.4167vw, 1rem);
    --text-l: clamp(1.05rem, 0.8613rem + 0.9433vw, 1.333rem);
    --text-xl: clamp(1.26rem, 0.9154rem + 1.723vw, 1.7769rem);
    --text-2xl: clamp(1.512rem, 0.9409rem + 2.8553vw, 2.3686rem);
    --text-3xl: clamp(1.8144rem, 0.9191rem + 4.4764vw, 3.1573rem);
    --text-4xl: clamp(2.1773rem, 0.823rem + 6.7715vw, 4.2087rem);

    --space-3xs: clamp(0.25rem, 0.25rem + 0vw, 0.25rem);
    --space-2xs: clamp(0.4375rem, 0.3958rem + 0.2083vw, 0.5rem);
    --space-xs: clamp(0.6875rem, 0.6458rem + 0.2083vw, 0.75rem);
    --space-s: clamp(0.875rem, 0.7917rem + 0.4167vw, 1rem);
    --space-m: clamp(1.3125rem, 1.1875rem + 0.625vw, 1.5rem);
    --space-l: clamp(1.75rem, 1.5833rem + 0.8333vw, 2rem);
    --space-xl: clamp(2.625rem, 2.375rem + 1.25vw, 3rem);
    --space-2xl: clamp(3.5rem, 3.1667rem + 1.6667vw, 4rem);
    --space-3xl: clamp(5.25rem, 4.75rem + 2.5vw, 6rem);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img, svg {
    width: 100%;
    height: auto;
}

html {
    font-family: "IBM Plex Sans", sans-serif;
    line-height: 1.6;
    min-height: 100dvh;
    background: 
    rgba(0, 0, 0, 0.7) 
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAMUlEQVR4AbTPwQoAAAQD0PH//4wdSVwoDqtXawrAticKM98vklre1XFIch1KgOEOOQAAAP//fQ6DKgAAAAZJREFUAwCFGAoKZOreOwAAAABJRU5ErkJggg==) /* Das Base64 PNG */
    repeat;
}

.container {
    width: min(100%, 800px);
    margin-inline: auto;
    padding: var(--space-m) var(--space-l);
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* TYPO */

*:focus {
    outline: 1px solid var(--color2);
}

:where(h1,h2,h3) {
    font-family: "IBM PLex Mono";
    font-weight: 600;
    color: var(--color1);
}

h1 {
    font-size: var(--text-3xl);
    text-align: center;

}

p, label {
    color: var(--text-color)
}

/* Buttons */

.btn {
    padding: var(--space-xs) var(--space-s);
    background: none;
    color: white;
    border: 1px solid var(--white);
    cursor: pointer;
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--text-s);
    text-align: center;

    &:hover {
        background-color: var(--white-trans-10);
    }
    &[type="submit"] {
        background-color: var(--black);

        &:hover {
            background-color: var(--grey-dark);
        }
    }
}

/* Header */

.siteheader {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1rem;
    background-color: var(--black);
} 

.siteheader__container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo {
    width: 160px;
    height:auto
}

/* Form Section */

.form-container {
    display: grid;
    gap: 1.5rem;
}

form {
    display: grid;
    gap: 1rem;

}

fieldset {
    border: 0.5px solid var(--color1);
    border: 0.5px solid var(--white);
    padding: var(--space-l);
    padding-top: var(--space-3xl);
    margin-bottom: 1rem;
    border-radius: 0;
    background-color: var(--color1-trans-10);
    background-color: var(--black);
    position: relative;

    legend {
        font-family: "IBM Plex Mono";
        font-size: var(--text-xl);
        font-weight: 600;
        color: var(--color1);
        color: var(--white);
        position: absolute;
        top: var(--space-m);
        left: var(--space-l);
        background-color: transparent;
        padding: 0;
    }
}

label {
    margin: var(--space2xs) 0;
    cursor: pointer
}

.conversion-form__select-group {
    display: grid;
    gap: var(--space-2xs);
}

/* Inputs & Checkboxes */

input:where([type="checkbox"], [type="radio"]) {
    -webkit-appearance: none;
    appearance: none;
    width: var(--text-m);
    height: var(--text-m);
    vertical-align: top;
    margin: var(--space-3xs) 0.25rem 0 0;
    border: 2px solid var(--white);
    border-radius: 4px;
    background: var(--color1-trans-10) no-repeat center center;
    position: relative;
    top: 1px;
    cursor: pointer;
}

input:where([type="checkbox"]) {
    top: -3px
}

input[type="radio"] {
    border-radius: 50%;
}

input:where([type="checkbox"], [type="radio"]):disabled {
    background: var(--color1-greyish-light);
}

input[type="checkbox"]:checked {
    background-image: url('../images/checkbox.svg');
}

input[type="radio"]:checked {
    background-image: url('../images/radio.svg');
}


/* Drag and Drop Area Styles */
.drop-area {
    border: 2px dashed var(--white);
    background-color: var(--color1-trans-10);
    padding: var(--space-m);
    padding-bottom: var(--space-s);
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s;
    display: grid;
    gap: var(--space-xs);
    justify-items: center;

    p {
        font-size: var(--text-s);
    }

    &.highlight {
        background-color: var(--color1-lightest);
    }

    > div {
        position: relative;
        top: var(--space-xs);
        display: grid;
        gap: var(--space-xs);
    }
}

.file-info {
    font-size: var(--text-s);
    position: relative;
    top: var(--space-3xs);
}

.file-list {
    list-style: none;
    padding: 0;
    margin-top: var(--space-m);
    text-align: left;

    li {
        background: var(--color1-lightest);
        padding: var(--space-xs);
        margin-bottom: var(--space-3xs);
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: var(--text-s);

        button {
            background: none;
            border: none;
            color: rgb(185, 13, 13);
            cursor: pointer;
            font-weight: 600;
            margin-left: var(--space-m);
        }
    }
}

.options-group {
    display: grid;
    gap: var(--space-l);
}

.reference-upload label {
    display: block;
    margin-bottom: var(--space-xs);
    font-size: var(--text-m);
}

.drop-area-small {
    padding: var(--space-s);
    gap: var(--space-2xs);

    p {
        font-size: var(--text-s);
        margin: 0;
    }

    .btn {
        padding: var(--space-2xs) var(--space-xs);
        font-size: var(--text-s);
    }
}
.zip-option {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);

    label {
        margin: 0;
        cursor: pointer;
    }

    input[type="checkbox"] {
        cursor: pointer;
    }
}