/* Make the container responsive */
/*.container {
	width: 95%;
	max-width: 800px; 
	margin: 20px auto;
	padding: 20px;
	box-sizing: border-box;
}*/

/* Ensure tables don't break layout */
/*table {
	width: 100%;
	overflow-x: auto;
	display: block;
}*/

/* Improve input fields on smaller screens */
/*input, select {
	width: 100%;
}*/

/* Adjust button sizes */
button {
	width: 100%;
	max-width: 200px;
	margin-top: 10px;
}

.subject-details {
/*    display: flex;
	flex-direction: column; 
	gap: 10px;
}

@media (max-width: 600px) {
.header h1 {
	font-size: 1.5em;
}
.subject-details {
	flex-direction: column;
}
.subject-details > div {
	width: 100%;
}
button {
	width: 100%;
}
}
*/

/*.container {
	width: 90%; /* Instead of 100% */
	max-width: 800px;
	margin: auto;
	padding: 15px;
}
@media (max-width: 600px) {
.subject-details {
	flex-direction: column; /* Stack elements vertically */
    }
button {
	width: 100%;
	margin-bottom: 10px;
}
}
@media (max-width: 600px) {
.output table {
	display: block;
	overflow-x: auto;
	white-space: nowrap;
}
}
@media (max-width: 600px) {
h1, h2, h3 {
	font-size: smaller;
}
}*/

<!--@media print {
body {
	background-color: transparent !important;
}
.container {
	background-color: white !important;
	box-shadow: none !important;
	border: 2px solid black; /* Outline on all sides */
	padding: 10px;
}
.no-print {
	display: none !important;
}
.main-footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	text-align: center;
}
table {
	width: 100%;
	border-collapse: collapse;
	white-space: nowrap;
}
td {
	padding: 5px;
	vertical-align: middle;
	white-space: nowrap;
}
}
-->

body {
	font-family: 'Arial', sans-serif;
	background-color: #f4f4f9;
	color: #333;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
}
        .container {
            background-color: #fff;
            padding: 20px;
            border-radius: 30px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 800px;
            margin-top: 30px;
			top: 30px;
        }
        .header {
            text-align: center;
            margin-bottom: 20px;
        }
        .header h1 {
            font-size: 2em;
            margin: 0;
        }
        .sub-header {
            text-align: center;
            margin-bottom: 10px;
        }
        .sub-header h2, .sub-header h3 {
            margin: 5px 0;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"], input[type="number"], select {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .subjects {
            margin-bottom: 20px;
        }
        .subject {
            border-bottom: 1px solid #ccc;
            padding-bottom: 10px;
            margin-bottom: 10px;
        }
        .subject:last-child {
            border-bottom: none;
        }
        .subject-details {
            display: flex;
            justify-content: space-between;
            gap: 10px;
        }
        .subject-details > div {
            flex: 1;
        }
        button {
            padding: 10px 20px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:last-child {
            background-color: #28a745;
        }
        button:hover {
            opacity: 0.9;
        }
        .output {
            display: none;
            margin-top: 20px;
        }
        .output table {
            width: 100%;
            border-collapse: collapse;
        }
        .output th, .output td {
            border: 2px solid #000;
            padding: 10px;
            text-align: center;
        }

.tamil {
	font-family: bamini;
}
@font-face {
	font-family: sego;
	font-weight: bold;
	src: url('SEGOEUIL.TTF');
}
.sego {
	font-family: bamini;
}
.tamil {
	font-family: bamini;
}
@font-face {
	font-family: valluvan;
	font-weight: bold;
	src: url('valluvan.TTF');
}
.vtamil {
	font-family: valluvan;
}
.title{
	margin:0px;
	text-align:center;
	line-height:22px;
}
.subtitle{
	margin:0px;
	text-align:center;
	font-size: 12px;
	line-height:22px;
}
.ftitle { font-size:26px; }
.stitle { font-size:24px; }
.ttitle,.fotitle { font-size:20px; }
input[type=text]:focus {
 background-color:cyan
}

	.print-only {
		display: none;
	}
<!--@media print
{
.no-print{
	display:none;
}
.table {
	width:100% ! important;
}
}-->

@media print {
    body {
        background-color: transparent !important;
    }
    .container {
        background-color: white !important;
        box-shadow: none !important;
    }
    .no-print {
        display: none !important;
    }
	.main-footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;
	}
	table {
		width: 100%;
		border-collapse: collapse;
		white-space: nowrap;
	}
	td {
		padding: 5px;
		vertical-align: middle;
		white-space: nowrap;
	}
	.print-only {
		display: block;
	}
}


a{
	text-decoration: none;
	color: blue;
}