:root {
    --bg-1: #26245d;
    --bg-2: rgb(201, 201, 201);
    --fg: black;
    color: var(--fg);
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    justify-content: space-between;

}

.input-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* This will space out your columns evenly */
    row-gap: 20px; /* This sets the vertical spacing between rows */
}

.input-group {
    flex-basis: calc(33.333% - 20px); /* Subtracts the desired spacing from the flex-basis */
    margin: 10px; /* Adds some space around each input-group for better spacing */
    position: relative;
    box-sizing: border-box; /* Ensures the padding and border are included in the width */
}

.input {
    width: 100%; /* This ensures the input takes up the full width of its parent .input-group */
    box-sizing: border-box; /* Ensures the padding and border are included in the width */
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.user-label {
    position: absolute;
    top: -10px;
    left: 10px;
    background-color: #fff;
    padding: 0 5px;
    transition: all 200ms ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .input-group {
        flex-basis: 100%; /* Stacks the input groups on smaller screens */
        margin: 10px 0; /* Adjusts the margin for a vertical layout */
    }
}

.input:focus, input:valid {
    outline: none;
}

.input:focus ~ .user-label, .input:valid ~ .user-label {
    transform: translateY(-50%) scale(0.8);
    padding: 0 0.2em;
    background-color: white;
    left: 0;
}

.address-container {
    word-wrap: break-word;
    max-width: 240px; /* Adjust as needed */
}

button {
    padding: 1rem;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 100ms ease;
}

button:hover {
    border-radius: 5px;
}

button:active {
    scale: 0.9;
}

#signaturePreview {
    border: 1px solid black;
    margin-top: 1rem;
    width: 552px;
    vertical-align: baseline;
}

#copy-button {
    margin-bottom: 1rem;
}



#notification{
    background-color: #ff6464;
    border: 1px solid black;
    border-radius: 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding-left: 1rem;
    padding-right: 1rem;
    width: 7rem;
    height: 2rem;

    position: fixed;
    top: 1rem;
    right: -100rem;

    transition: all 200ms ease;
}