diff --git a/Calculators/GPA-Calculator/style.css b/Calculators/GPA-Calculator/style.css index 2dd949778..8248b6371 100644 --- a/Calculators/GPA-Calculator/style.css +++ b/Calculators/GPA-Calculator/style.css @@ -11,13 +11,13 @@ body { } .calculator { - background-color: #4e5a68; /* Change to a blue color */ + background-color: #4e5a68; width: 85%; padding: 20px; - border-radius: 16px; /* Increase border-radius for a smoother neomorphic effect */ - box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7), -10px -10px 20px rgba(255, 255, 255, 0.3); /* Add neomorphic box-shadow */ + border-radius: 16px; + box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7), -10px -10px 20px rgba(255, 255, 255, 0.3); display: flex; - flex-direction: row; + flex-direction: column; justify-content: space-around; gap: 10%; } @@ -38,7 +38,7 @@ td { border: 1px solid #00bcd4; padding: 8px; text-align: left; - background-color: #4e5a68; /* Change to a blue color */ + background-color: #4e5a68; color: #fff; } @@ -49,7 +49,7 @@ th { select { width: 100%; padding: 8px; - background-color: #57697a; /* Change to a darker blue color */ + background-color: #57697a; color: #fff; border: 1px solid #00bcd4; border-radius: 4px; @@ -65,10 +65,26 @@ button { cursor: pointer; font-weight: bold; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5), -3px -3px 8px rgba(255, 255, 255, 0.1); - transition: background-color 0.3s ease; /* Add a smooth transition for the background color change */ - + transition: background-color 0.3s ease; } button:hover { - background-color: #008ba3; /* Change to a darker shade of blue on hover */ + background-color: #008ba3; +} + +/* Media query for responsiveness */ +@media only screen and (max-width: 768px) { + .calculator { + width: 90%; + gap: 5%; + } + + table { + font-size: 14px; + } + + input, select { + width: 100%; + font-size: 14px; /* Adjust font size for smaller screens */ + } }