/* Global Styles */
 input:focus,
select:focus,
button:focus,
textarea:focus {
	outline: none;
}

@font-face {
	font-family: 'Bosten'; /* Replace with your font's name */
	src: url('fonts/bostenregular-l3ljd.otf');
}

@font-face {
	font-family: 'Carltine';
	src: url('fonts/CarltineMedium-MVnzn.ttf');
}

@font-face {
	font-family: 'carltine';
	src: url('fonts/CarltineMedium-MVnzn.ttf');
}

@font-face {
	font-family: 'CarltineBold';
	src: url('fonts/CarltineBold-BWxy8.ttf');
}

body {
	font-family: 'Arial', sans-serif;
	background: url('image.jpeg') no-repeat center center fixed;
	background-color: #f1d7ac;
	background-size: cover;
	margin: 0;
	/* padding: 20px; */
	background-blend-mode: overlay;
}

#id_gender {
	width: 100%;
}

h1,
h2 {
	text-align: center;
	font-family: 'Courier New', Courier, monospace;
	color: #330307;
}
h3 {
	font-family: 'Carltine';
}

/* Registrations */
h1 {
	font-family: 'Bosten';
	font-style: bold;
	font-weight: 400;
	font-size: 40px;
	line-height: 89%;
	/* identical to box height, or 43px */
	text-align: center;

	color: #330307;
}

label,
button {
	font-family: 'Carltine';
}

h2 {
	font-family: 'Bosten';
	font-size: 1.8em;
	text-transform: uppercase;
	margin-bottom: 5px;
}

.container {
	max-width: 1000px;
	margin: 0 auto;
	z-index: 1;
	padding: 30px;
}

/* Form Styles */
.form-group {
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
}

label {
	font-family: 'Carltine';
	font-style: normal;
	font-weight: 500;
	color: #330307;
	margin-bottom: 5px;
	color: #6d2f1b;
}
/* Name * */

.form-control {
	padding: 10px;
	font-size: 16px;
	border-radius: 5px;
	border: 1px solid #330307;
}

/* Two-column layout for the form */
.form-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
}

.form-layout .form-group {
	width: 100%;
}

/* Buttons */
.btn {
	padding: 12px 20px;
	font-size: 16px;
	cursor: pointer;
	border-radius: 5px;
	color: #fff;
	border: none;
}

.btn-primary {
	background-color: #6d2f1b;
	margin-right: 10px;
}

.btn-danger {
	background-color: #f1d7ac;
	border: 2px solid #330307;
	border-radius: 8px;
	color: #330307;
}

/* Add styles for the same buttons you had */
#add-member-button,
.btn-danger {
	margin-top: 10px;
}

.error {
	color: red;
	font-size: 0.9em;
}

/* Specific styling for sections */
h3 {
	color: #330307;
	text-align: center;
	font-size: 1.5em;
	text-align: left;
	margin-top: 30px;
}

.teamSize {
	text-align: center;
	margin-top: 0px;
}
.cname {
	color: #330307;
}
.ename .cname {
	font-family: 'Bosten';
	font-family: 'Bosten';
	font-style: bold;
	font-weight: 400;
}
.astrick {
	color: red;
}

.ename {
	color: #b86234;
}

.form-row {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	/* justify-content: space-between;
    gap: 20px; */
}

.form-group {
	flex-basis: 45%; /* Fields take 48% of the width, leaving room for spacing */
	margin-bottom: 20px;
}
@media (max-width: 768px) {
	.form-group {
		flex-basis: 100%;
	}
}
input,
select {
	background: transparent;
	border: 2px solid;
	border-radius: 5px;
	color: #333;
	border-color: #330307;
}
label {
	font-family: carltine;
	color: #330307;
}

.disclaimer {
	position: absolute; /* or 'relative' depending on your layout */
	right: 10%;
	margin-bottom: 5%;
}

#registerbut {
	right: 20%;
	background-color: #b86234;
	width: 10em;
	font-family: 'carltine';
	color: #f1d7ac;
	float: right;
	margin-bottom: 2em;
	margin-top: 2em;
}
#add-member-button {
	background-color: #f1d7ac;
	border: 2px solid #330307;
	border-radius: 8px;
	color: #330307;
	width: 180px;
}

.team-member-form {
	display: block;
}

.team-member-form button {
	grid-column: span 2; /* Make the button span both columns */
	width: auto;
	/* justify-self: center; Optional: Center the button horizontally  */
}

.team-member-form label {
	color: #330307;
}

.team-member-form p {
	display: flex;
	/* border: 2px solid; 
        border-radius: 5px;
         border-color: #330307;  */
	width: 100%;

	border-radius: 5px;
}
.autofill-btn {
	color: #ff0000;
	background-color: transparent;
	border: none;
	cursor: pointer;
	margin-left: 0;
	font-size: 0.9em;
}

.form-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.form-header span {
	font-size: larger;
}

.preindex {
	color: #330307;
	font-family: 'carltine';
}

.index {
	color: #ee2745;
}

.input-group {
	display: flex;
	align-items: center;
	border: 1px solid #330307;
	border-radius: 5px;
}

.input-group input {
	flex-grow: 1;
	border: none;
	padding: 8px;
}

.btn-input-append {
	padding: 8px 12px;
	border: none;
	background-color: transparent;
	color: #ee2745;
	cursor: pointer;
	/* font-size: 1em; */
}



@media screen and (max-width: 600px) {
	.container {
		padding: 15px;
	}
	.form-layout {
		grid-template-columns: 1fr;
		grid-gap: 15px;
	}
	.btn {
		/* width: 100%; */
		margin-bottom: 10px;
	}
	h1 {
		font-size: 28px;
	}
	h2 {
		font-size: 1.5em;
	}
}

@media screen and (max-width: 768px) {
	.container {
		padding: 20px;
	}
	.form-layout {
		grid-template-columns: 1fr;
		grid-gap: 20px;
	}
	/* .btn {
        width: 100%;
    } */
}

@media screen and (min-width: 992px) {
	.container {
		max-width: 1000px;
		margin: 0 auto;
	}
}

.form-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
}

@media screen and (max-width: 768px) {
	.form-layout {
		grid-template-columns: 1fr;
	}
}

h1 {
	font-size: 40px;
	line-height: 1.2;
}

@media screen and (max-width: 768px) {
	h1 {
		font-size: 32px;
	}
}

@media screen and (max-width: 600px) {
	h1 {
		font-size: 28px;
	}
}

body {
	background: url('image.jpeg') no-repeat center center fixed;
	background-color: #f1d7ac;
	background-size: cover;
	background-blend-mode: overlay;
}

.btn {
	padding: 12px 20px;
}

/* @media screen and (max-width: 600px) {
    .btn {
        width: 100%;
    }
}  */
/* Base button styles */
.btn {
	padding: 12px 20px; /* Base padding */
	font-size: 16px; /* Base font size */
	width: 180px; /* Set a specific width for uniformity */
}
.btn btn-primary {
	width: 100px;
}

/* Media query for screens up to 768px */
@media screen and (max-width: 768px) {
	.btn {
		padding: 10px 18px; /* Adjust padding */
		font-size: 14px; /* Adjust font size */
		width: 160px; /* Adjust width for medium screens */
	}
}

/* Media query for screens up to 600px */
@media screen and (max-width: 600px) {
	.btn {
		padding: 8px 16px; /* Further adjust padding */
		font-size: 12px; /* Further adjust font size */
		width: 140px; /* Adjust width for smaller screens */
	}
	#add-member-button {
		background-color: #f1d7ac;
		border: 2px solid #330307;
		border-radius: 8px;
		color: #330307;
		width: 140px;
	}
}

#registerbut {
	font-family: 'Carltine';
	font-size: 1em;
}

@media screen and (max-width: 390px) {
	.btn-input-append {
		font-size: small;
	}
	.team-member-form button {
		grid-column: span 2; /* Make the button span both columns */
		width: auto;
		/* justify-self: center; Optional: Center the button horizontally  */
	}
}

@media screen and (max-width: 320px) {
	.btn-input-append {
		font-size: smaller;
	}
	.team-member-form button {
		grid-column: span 2; /* Make the button span both columns */
		width: auto;
		/* justify-self: center; Optional: Center the button horizontally  */
	}
}