form {
    /* Display, Position, Margin and Padding */
    width: 70%;

    @media (max-width: 900px) {
        width: 100%;
    }

    input,
    label,
    p,
    textarea {
        color: var(--MainTextColor);
    }

    section {
        /* Display, Position, Margin and Padding */
        margin: 50px 0;
    }

    input {
        /* Display, Position, Margin and Padding */
        width: 100%;
        padding: 0;
    }

    input[type="text"],
    input[type="email"] {
        /* Display, Position, Margin and Padding */
        margin: 16px 0;
        padding: 12px 0;

        /* Background and border */
        background-color: transparent;
        border-bottom: 2px solid var(--MainTextColor);
        outline: none;

        /* Font */
        font-size: var(--Body);
    }

    #name,
    #city {
        /* Font */
        text-transform: capitalize;
    }

    textarea {
        /* Font */
        font-size: var(--Body);

        /* Background and border */
        background-color: transparent;
        border: none;
        border-bottom: 2px solid var(--MainTextColor);
        border-radius: 0;
        outline: none;

        resize: none;
    }

    #drop-zone {
        /* Display, Position, Margin and Padding */
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
    
        /* Background and border */
        background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='black' stroke-width='4' stroke-dasharray='20%2c 20' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    
        @media (prefers-color-scheme: dark) {
            background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='white' stroke-width='4' stroke-dasharray='20%2c 20' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    
        }
        cursor: default;
    
        span {
            /* Font */
            color: var(--Blue);
            font-weight: 700;
            text-decoration: underline;
    
            cursor: pointer;
        }
    }
    
    #file-input {
        /* Display, Position, Margin and Padding */
        display: none;
    }
    
    #preview {
        /* Display, Position, Margin and Padding */
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        padding: 0;
        gap: 0.5em;
    
        list-style: none;
    }
    
    #preview li {
        /* Display, Position, Margin and Padding */
        display: flex;
        align-items: center;
        margin: 0;
        width: 100%;
        height: 100px;
        gap: 0.5em;
    }
    
    #preview img {
        /* Display, Position, Margin and Padding */
        width: 100px;
        height: 100px;
    
        object-fit: cover;
    }
    
    p.message {
        /* Font */
        color: var(--Red);
        font-weight: 500;
        letter-spacing: 2%;
    }
    
    input.wrong {
        /* Background and border */
        border-bottom-color: var(--Red) !important;
    }
    
    input[type="submit"] {
        /* Display, Position, Margin and Padding */
        width: 70%;
        padding: 10px 16px;
    
        @media (max-width: 900px) {
            width: 100%;
            padding: 16px;
        }
    
        /* Background and border */
        background-color: var(--MainTextColor);
        border: 3px solid var(--MainTextColor);
    
        /* Font */
        color: var(--SecondaryTextColor);
        font-size: var(--Body);
        font-weight: 700;
    
    
        cursor: pointer;
    
    }
    
    input[type="submit"].disabled {
        opacity: .4;
        cursor: not-allowed;
    }

}

p.disclaimer {
    text-align: justify;
    width: 100%;
    font-size: 0.8em;
    letter-spacing: normal;
}