body {
	display: flex;
	justify-content: center;
	font-family: 'Poppins';
}

main {
	height: 100%;
	display: grid;
	align-items: center;
	margin: 20px 0px;
}

@media (width >=1024px) {
	main {
		width: clamp(560px, 40%, 640px);
		align-items: center;
	}
}

.myt-form-group {
	display: flex;
	flex-direction: column;
	font-family: "Manrope", "Arial", sans-serif;
	margin-bottom: 0.75rem;
}

.myt-form-label {
	color: black;
	font-size: 0.875rem;
	margin-bottom: 0.25rem;
}

.myt-form-input {
	border: 1px solid #17a1b7;
	border-radius: 8px;
	min-height: 33px;
	font-size: 15px;
	padding: 0rem 0.5rem;
	color: grey;
}

.myt-form-input:focus {
	outline: none;
	outline: 1.5px solid #17a2b8;
}

::placeholder {
	font-family: "Manrope", "Arial", sans-serif;
	color: var(--text-1);
}

.label {
	font-weight: 600;
	font-size: 1.15rem;
	margin-bottom: 0.5rem;
}

.input {
	padding: 0.5rem;
	font-family: "Urbanist", "Arial", sans-serif;
	font-size: 1rem;
	border: 1px solid black;
	border-radius: 8px;
	background-color: #f9f9f9;
	margin-bottom: 1.25rem;
}

.input:focus {
	outline: none;
	outline: 1.5px solid #17a2b8;
}

.btn-form {
	min-height: 48px;
	border: 1px solid transparent;
	border-radius: 8px;
	font-weight: 500;
	font-size: 0.875rem;
	background-color: #17a2b8;
	color: #fff;
}

.btn-form:hover {
	background-color: #17a2b8;
}

.opt {
	padding: 5px;
	border-radius: 10px;
	min-height: 33px;
	border: 1px solid #17a1b7;
	color: grey;
}

.btn-semak {
	border-radius: 5px;
	border: 1px solid white;
	padding: 8px 41px;
	color: white;
	background-color: #17a2b8;
}

.header {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 1.5rem;
}

.header h1 {
	margin: 0;
	margin-bottom: 0.5rem;
}

    .bck{
        width: fit-content;
    background: #00BCD4;
    color: white;
    padding: 3px 13px;
    border-radius: 5px;
    margin:5px;
    cursor:pointer;
    }
    
    h1{
        font-size:1.5rem;
    }