Delete style.css

/* Base Reset & Typography */
body {
padding: 2rem;
font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
background-color: #f9f9f9;
color: #1a1a1a;
line-height: 1.6;
}

/* Headings */
h1 {
font-size: 20px;
margin-top: 0;
color: #111827;
}

/* Paragraph */
p {
color: rgb(107, 114, 128);
font-size: 15px;
margin-bottom: 10px;
margin-top: 5px;
}

/* Card Component */
.card {
max-width: 620px;
margin: 0 auto;
padding: 16px;
border: 1px solid #d1d5db;
border-radius: 16px;
background-color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.card p:last-child {
margin-bottom: 0;
}

/* Input Controls */
input[type="text"],
textarea,
select,
button {
font-size: 16px;
padding: 10px 12px;
margin-top: 10px;
border: 1px solid #ccc;
border-radius: 8px;
width: 100%;
box-sizing: border-box;
transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus,
textarea:focus,
select:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
outline: none;
}

button {
background-color: #3b82f6;
color: white;
border: none;
cursor: pointer;
}

button:hover {
background-color: #2563eb;
}

/* Responsive Design for Android (Mobile) */


@media
(max-width: 600px) {
body {
padding: 1rem;
}

h1 {
font-size: 18px;
}

.card {
padding: 12px;
border-radius: 12px;
}

input,
textarea,
button {
font-size: 16px;
}
}

/* Additional Styles for Desktop (PC) */


@media
(min-width: 601px) {
h1 {
font-size: 24px;
}

.card {
padding: 24px;
}

input,
textarea,
button {
font-size: 18px;
}
}

style.css

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}