diff --git a/BMI calculator/index.html b/BMI calculator/index.html
index 4a9e50b..94652dc 100644
--- a/BMI calculator/index.html
+++ b/BMI calculator/index.html
@@ -17,17 +17,17 @@
Body Mass
Index
-
Gender:
+
Gender
-
Height:
-
CM
+
Height (cm)
+
Age
-
+
Weight
diff --git a/BMI calculator/style.css b/BMI calculator/style.css
index a643331..c4ffeeb 100644
--- a/BMI calculator/style.css
+++ b/BMI calculator/style.css
@@ -1,3 +1,15 @@
+/* Disable increment/decrement arows from Number input */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+input[type=number]{
+ -moz-appearance: textfield;
+}
+
+
body{
display: flex;
align-items: center;
@@ -66,6 +78,10 @@ body{
margin: 0px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
+#symbol {
+ font-family: 'Courier New', Courier, monospace;
+ font-size: 18px;
+}
.heading{
margin-top: 10px;
font-size: 40px;
@@ -78,10 +94,10 @@ body{
font-weight: 100;
}
.subheading{
- font-size: 30px;
- text-decoration: underline;
- font-weight: 100;
+ font-size: 25px;
+ font-weight: 80;
}
+
select {
cursor: pointer;
display: inline-block;
@@ -100,13 +116,9 @@ select {
font-size: 20px;
color: black;
}
- .symbol{
- margin-left: 20px;
- font-size: 30px;
- font-weight: 100;
- }
+
.heightInput{
- width: 80%;
+ width: 95%;
border: 2px solid rgba(255, 0, 0, 0.386);
height: 40px;
border-radius: 10px;
@@ -125,8 +137,10 @@ select {
align-items: center;
}
.WeightInput,.AgeInput{
- font-size: 60px;
+ font-size: 20px;
+ text-align: center;
width: 50%;
+ height: 50px;
border: 2px solid rgba(255, 0, 0, 0.386);
border-radius: 10px;
}