.generator-stevil-container {
    display: flex;
    flex-wrap: wrap;
}

.generator-stevil-left {
    flex: 1;
    min-width: 300px;
	background:#f7f8f9;
	padding:30px;
	color:#000000;
	border-radius:7px 0 0 7px;
}

.generator-stevil-right {
    flex: 0 0 400px;
	background:#ffffff;
	padding:20px;
	color:#000000;
	border-radius:0 7px 7px 0;
}

.generator-stevil-right h3 {
	text-align:center!important;
	margin-top:20px;
	}

.input-field {
    margin: 5px 0;
    width: 100%;
    padding: 8px;
}

.generate-button-container {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.generate-button {
    margin: auto 10px;
    padding: 10px 20px;
    cursor: pointer;
	border-radius:5px;
}

.result {
    font-weight: 700;
    margin: auto 20px auto 0;
	text-align:center;
	font-size:4rem;
}

.gs-two-column-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Columns setup */
.gs-left-column,
.gs-right-column {
    flex: 1;
    padding: 10px 0;
    box-sizing: border-box;
    min-width: 300px;
}

/* Ensure both columns have the same height */
.gs-two-column-container > div {
    display: flex;
    flex-direction: column;
}

/*3 column design*/
.gs-three-column-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.gs-three-column {
    flex: 1;
    min-width: 150px;
    box-sizing: border-box;
}

@media (max-width: 660px) {
.generator-stevil-container {
        flex-direction: column;
    }

.generator-stevil-left {
	border-radius:7px 7px 0 0;
}

.generator-stevil-right {
	border-radius:0 0 7px 7px;
}
}

@media (max-width: 480px) {
.gs-two-column-container {
        flex-direction: column;
    }
}