style.css

	.dark-mode {
	background: linear-gradient(to right, #1e1e1e, #223149, #1e1e1e);
	color: #e9ebee;
	}
	.dark-output {
	background: linear-gradient(to right, #a5c7b7, #daebe2) !important;
	color: black;
	}

	*,
	*::before,
	*::after {
	box-sizing: border-box;
	font-family: Gotham Rounded, sans-serif;
	font-weight: normal;
	}

	body {
	padding: 0;
	margin: 0;
	background: linear-gradient(to right, #a3bded, #6587cc, #4d6cb7, #3b5998, #2d4373);
	}
	}

	/* SCROLLBAR */
	/* Scrollbar Styling */
	::-webkit-scrollbar {
		width: 10px;
	  }
	  
	  /* Track */
	  ::-webkit-scrollbar-track {
		background: #f1f1f1; 
	  }
	   
	  /* Handle */
	  ::-webkit-scrollbar-thumb {
		background: #888; 
	  }
	  
	  /* Handle on hover */
	  ::-webkit-scrollbar-thumb:hover {
		background: #555; 
	  }
	.calculator-grid {
	display: grid;
	justify-content: center;
	align-content: center;
	min-height: 100vh;
	grid-template-columns: repeat(4, 100px);
	grid-template-rows: minmax(120px, auto) repeat(5, 100px);
	}

	.sci-calculator-grid {
		display: grid;
		justify-content: center;
		align-content: center;
		min-height: 100vh;
		grid-template-columns: repeat(4, 100px);
		grid-template-rows: minmax(120px, auto) repeat(5, 100px);
	}

	.pro-calculator-grid {
		display: grid;
		justify-content: center;
		align-content: center;
		min-height: 100vh;
		grid-template-columns: repeat(4, 100px);
		grid-template-rows: minmax(120px, auto) repeat(5, 100px);	
	}

	.name {
	text-align: center !important;
	color: white;
	padding-left: 10px;
	}
	.navbar {
	justify-content: space-between !important;
	}

	.calculator-grid > button {
	cursor: pointer;
	font-size: 2rem;
	border: 1px solid white;
	outline: none;
	background-color: rgba(255, 255, 255, 0.75);
	}

	.calculator-grid > button:hover {
	background-color: rgba(255, 255, 255, 0.9);
	}

	.sci-calculator-grid > button {
		cursor: pointer;
		font-size: 1.5rem;
		border: 1px solid white;
		outline: none;
		background-color: rgba(255, 255, 255, 0.75);
	}


	.pro-calculator-grid > button {
		cursor: pointer;
		font-size: 1.5rem;
		border: 1px solid white;
		outline: none;
		background-color: rgba(255, 255, 255, 0.75);
	}
	
	.pro-calculator-grid > button:hover {
		background-color: rgba(255, 255, 255, 0.9);
	}

	.span-two {
	grid-column: span 2;
	border-bottom-right-radius: 10px;
	}
	.span {
	grid-column: span 2;
	}
	.bottom-left {
	border-bottom-left-radius: 10px;
	}

	.output {
	grid-column: 1 / -1;
	background: rgb(238, 231, 231);
	color: black;
	display: flex;
	align-items: flex-end;
	justify-content: space-around;
	flex-direction: column;
	padding: 10px;
	word-wrap: break-word;
	word-break: break-all;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	}

	.output #previous-operand,
	#sci-previous-operand,
	#pro-previous-operand {
	color: rgba(255, 255, 255, 0.75);
	font-size: 1.5rem;
	}

	.output #current-operand,
	#sci-current-operand,
	#pro-current-operand {
	color: white;
	font-size: 2.5rem;
	
	}
	#pro-chnge-output {
		height: 180px;
	}
	#sci-chnge-output {
		height: 170px;
	}
	.number-convert{
		position: absolute;
		right: 0;
		bottom: 0;
		margin-right: 600px;
		background: transparent;
	}
	.switch {
	position: absolute;
	display: inline-block;
	width: 60px;
	height: 34px;
	margin-left: 35px;
	}

	.switch input {
	opacity: 0;
	width: 0;
	height: 0;
	}

	.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #e9ebee;
	-webkit-transition: 0.4s;
	transition: 1s;
	}

	.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: #2196f3;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	}

	input:checked + .slider {
	background-color: #e9ebee;
	}

	input:focus + .slider {
	box-shadow: 0 0 1px #e9ebee;
	}

	input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
	}

	/* Rounded sliders */
	.slider.round {
	border-radius: 34px;
	}

	.slider.round:before {
	border-radius: 50%;
	}

	.sidenav {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background: linear-gradient(to bottom, #2e3b40, #2e3b40, #2e3b40 , #54646c) !important;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 60px;
	}

	.sidenav a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 25px;
	color: rgb(163, 138, 138);
	justify-content: left;
	display: block;
	transition: 1s;
	}

	.sidenav a:hover {
	color: #151b25;
	cursor: pointer;
	text-decoration: none;
	background-color: #f0eeee;
	filter: contrast(100%);
	/* border: 1px solid #2196F3; */
	}

	.sidenav .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
	}

	.closebtn {
	color: #2196f3;
	}

	.closebtn:hover {
	cursor: pointer;
	color: #daebe2;
	}

	.sidenav img {
	filter: contrast(20%);
	}

	#standard {
	transition: margin-left 0.5s;
	padding: 16px;
	}

	/* .operation-history{


		} */
	.flex-container {
	display: flex;
	}
	.flex-child {
	flex: 1;
	border: 2px solid yellow;
	}
	.flex-child:first-child {
	margin-right: 20px;
	}

	#operation-history,
	#pro-operation-history,
	#sci-operation-history {
	display: none;
	border: 1px solid #000000;
	border-radius: 10px;
	height: 450px;
	overflow-x: hidden !important;
	transition: 2s;
	margin-top: -450px;
	position: static;
	background: linear-gradient(to right, #6587cc, #4d6cb7,  #6587cc);
	-webkit-animation: expand 1s;
	}
	@-webkit-keyframes expand {
	0% {
		height: 100px;
	}
	100% {
		height: 450px;
	}
	}

	#display-operation-history,
	#sci-display-operation-history,
	#pro-display-operation-history {
	display: block;
	margin-top: -450px;
	}
	.mobile-history {
	float: right !important;
	border-radius: 1rem !important;
	cursor: pointer;
	margin: 5px;
	}

	.display-history {
	/* height: 400px; */
	overflow: auto !important;
	font-size: 23px;
	text-align: center;
	position: static;
	}

	.clear-history {
	right: 15px;
	position: absolute;
	bottom: 15px;
	}
	.pro-clear-history {
	position: absolute;
	right: 70px;
	margin-top: -45px;
	}

	.date-type{
		padding: 30%; 
		padding-top: 2%;
	}
	
	#id-date-cal {
		display: none;
	}


	/* Currency con */
	.currency {
		display: flex;
		align-items: center;
	}
	.middle {
		color: #f59300;
		display: flex;
		margin-top: 1.5rem !important;
	}
	.middle button {
		background-color: #fff;
		border: 2px solid #ecf0f1;
		border-radius: 50%;
		cursor: pointer;
		color: #f59300;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 40px;
		width: 40px;
		transform: rotate(90deg);
		margin-left: 180px;
	}
	.middle img{
		width: 35px;
		height: 35px;
	}
	.middle .rate {
		background-color: #fff;
		border: 2px solid #2c2c2c;
		border-radius: 10px;
		padding: 5px;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 30px;

	   }
	   
	/* Theme and all */
	.lightimg,
	.darkimg {
	margin: 6px;
	transition: 1s;
	}
	.darkimg {
	margin-left: 32px;
	transition: 1s;
	}
	#lighttheme {
	display: none;
	}
	#darkheme {
	display: block;
	margin-left: 10px !important;
	}

	#Programmer {
	display: none;
	overflow: hidden;
	}

	#Scientific {
	display: none;
	overflow: hidden;
	}

	#cal-dates, #diff-dates {
		display: none;
	}

	@media screen and (max-height: 450px) {
	.sidenav {
		padding-top: 15px;
	}
	.sidenav a {
		font-size: 18px;
	}
	
	}

	@media screen and (max-width: 480px) {
	.calculator-grid {
		display: grid;
		justify-content: center;
		align-content: center;
		min-height: 90vh;
		grid-template-columns: repeat(4, 75px);
		grid-template-rows: minmax(120px, auto) repeat(5, 90px);
		margin: auto;
	}
	.sci-calculator-grid , .pro-calculator-grid{
		display: grid;
		justify-content: center;
		align-content: center;
		min-height: 90vh;
		grid-template-columns: repeat(5, 55px);
		grid-template-rows: minmax(120px, auto) repeat(7, 50px);
		margin: auto;

	}
	.sci-calculator-grid > button , .pro-calculator-grid > button {
		cursor: pointer;
		font-size: 1rem;
		border: 1px solid white;
		outline: none;
		background-color: rgba(255, 255, 255, 0.75);
	}
	.number-convert {
		position: relative;
		right: 10px;
	}

	#operation-history,
	#pro-operation-history,
	#sci-operation-history {
		width: 286px !important;
		margin: auto;
		margin-top: -450px;
	}
	.date-type{
		padding: 10%; 
		padding-top: 2%;
	}
	.dates{
		padding: 0%; 
		padding-bottom: 0%;
	}
	.middle button {
		margin-left: 100px;
	}
	#calc-type{
		font-size: x-large;
	}
	#con-from-to{
		font-size: large;
	}
	}

	/* Tablet */
	@media screen and (min-width: 480px) {
	.calculator-grid {
		display: grid;
		justify-content: left;
		align-content: left;
		min-height: 0vh;
		margin: auto 50px auto;
		grid-template-columns: repeat(4, 155px);
		grid-template-rows: minmax(120px, auto) repeat(5, 80px);
		margin-top: -10px;
		margin: auto;
	}
	.sci-calculator-grid ,.pro-calculator-grid{
		display: grid;
		justify-content: left;
		align-content: left;
		min-height: 0vh;
		margin: auto 50px auto;
		grid-template-columns: repeat(5, 135px);
		grid-template-rows: minmax(120px, auto) repeat(7, 60px);
	}
	
	#operation-history,
	#pro-operation-history,
	#sci-operation-history {
		width: 586px !important;
		margin: auto;
		margin-top: -480px;
	}
	.dates{
		padding: 0%; 
		padding-bottom: 0%;
	}
	.pro-clear-history {
		right: 120px;
	}
	}

	@media screen and (min-width: 780px) {
	.calculator-grid {
		display: grid;
		justify-content: left;
		align-content: left;
		margin: auto 50px auto;
		grid-template-columns: repeat(4, 155px);
		grid-template-rows: minmax(120px, auto) repeat(5, 80px);
		margin-top: -10px;
		margin: auto;
	}
	.sci-calculator-grid ,.pro-calculator-grid{
		display: grid;
		justify-content: left;
		align-content: left;
		min-height: 0vh;
		margin: auto 50px auto;
		grid-template-columns: repeat(5, 135px);
		grid-template-rows: minmax(120px, auto) repeat(7, 60px);
		margin-top: -10px;
		margin: auto;

	}
	#operation-history,
	#pro-operation-history,
	#sci-operation-history {
		width: 586px !important;
		margin: auto;
		margin-top: -500px;
	}
	
	}

	/*Greater than mini laptop */
	@media screen and (min-width: 1025px) {
	.calculator-grid {
		display: grid;
		justify-content: left;
		align-content: left;
		min-height: 0vh;
		margin: auto 50px auto;
		grid-template-columns: repeat(4, 195px);
		grid-template-rows: minmax(120px, auto) repeat(5, 80px);
	}
	.sci-calculator-grid {
		display: grid;
		justify-content: left;
		align-content: left;
		min-height: 0vh;
		margin: auto 50px auto;
		grid-template-columns: repeat(5, 165px);
		grid-template-rows: minmax(120px, auto) repeat(7, 55px);
	}
	.pro-calculator-grid {
		display: grid;
		justify-content: left;
		align-content: left;
		min-height: 0vh;
		margin: 10px 60px auto;
		grid-template-columns: repeat(5, 165px);
		grid-template-rows: minmax(120px, auto) repeat(6, 58px);
	}
	#pro-chnge-output{
		height: 200px;
	}

	.mobile-history {
		display: none;
		visibility: hidden;
	}

	#operation-history {
		display: block;
		margin: auto;
		width: 386px !important;
		margin-top: 10px;
	}
	.pro-mobile-history {
		display: none;
		visibility: hidden;
	}
	.dates{
		padding: 20%;
		padding-top: 2%; 
		padding-bottom: 0%;
	}
 
	#operation-history,
	#pro-operation-history,
	#sci-operation-history {
		display: block;
		margin: auto;
		width: 386px !important;
		margin-top: 10px;
	}
	}

	/*/#6200ed blue */
	/* #6200ed */