.flex {
	align-items: center;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	flex: 1;
	justify-content: space-between;
	height: 100vh;
}

ul, ol {
margin: 0.2rem 0;
}

.description {
	display: flex;
	flex-basis: 60%;
  max-width: 50%;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem;
	color: white;
}

body {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
	height: 100vh;
	background: rgb(0,18,79);
	background: linear-gradient(180deg, rgba(0,18,79,1) 0%, rgba(0,72,149,1) 100%);
}

#get {
  background-color: white;
}

.icons {
	font-size: 1.5rem!important;
	padding: 0;
	margin: 0;
}

h3 {
	padding: 0;
	margin: 1.5rem 0 0.5rem 0;
	line-height: 1.6;
}

h4 {
	padding: 0;
	margin: 1rem 0 0 0;
}

p {
	line-height: 1.6;
}

ul, ol {
	padding-left: 1rem;
}

li {
	padding-bottom: 0.75rem;
	line-height: 1.6;
}

.container {
	margin: 0 auto;
	max-width: 1400px;
	width: 100%;
}

a {
	color: white;
}

.main-heading h1 {
	font-size: 2.25rem;
}

.main-heading p {
	font-size: 1.2rem;
	line-height: 1.6;
}

.sources {
	font-size: 0.8rem;
}

.calculatorContainer {
	display:flex;
	flex-basis: 40%;
  max-width: 40%;
	flex-direction: column;
  justify-content: center;
  padding: 2rem;
}

#fastingCalculator {
  border-radius: 8px;
  text-align: center;
	padding: 2rem;
	background: #ffffff;
}

#fastingCalculator .title {
  border-radius: 15px 15px 0 0;
  padding: 1rem;
}

#fastingCalculator #icon {
  height: 30px;
}

#fastingCalculator form {
  padding: 1rem;
}

#fastingCalculator form .row {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 1rem;
  align-items: center;
}

#fastingCalculator form .row .time {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#fastingCalculator form .row .time * {
  margin-left: 5px;
}

#fastingCalculator form select:hover {
font-size: 1.1rem;
cursor: pointer;
border: 1px solid orange!important;
}

#fastingCalculator form select {
   padding: 0.5rem;
   border-radius: 4px;
   border: 1px solid #bcbcbc;
}

select {
font-size: 1rem;
}

/* Button CSS */
#fastingCalculator button {
  padding: 1.5rem 2.5rem;
  width: 100%;
  border-radius: 4px;
  border: 1px solid orange; 
  color: #000000;
  cursor: pointer;
  font-weight: 500;
  font-size: 1rem;
  margin-top: 1rem;
  background: #F6C33D;
   background-image: -webkit-linear-gradient(top, #F6C33D, #EBA525);
   background-image: -moz-linear-gradient(top, #F6C33D, #EBA525);
   background-image: -ms-linear-gradient(top, #F6C33D, #EBA525);
   background-image: -o-linear-gradient(top, #F6C33D, #EBA525);
}

.lastBite .time {
font-weight: bold;
font-size: 1.1rem;
background-color: #ffffff;
}

.lastBite {
	font-weight: bold;
	padding: 2rem 0;
}

#fastingCalculator button:hover {
  filter: brightness(110%);
}

#fastingCalculator button:active {
  filter: brightness(90%);
}

@media only screen and (max-width: 900px) {
  body {
		height: auto;
		padding-bottom: 2rem;
	}
	.flex {
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
    display: flex;
    flex: 1;
    justify-content: space-between;
		height:auto;
	}
	.calculatorContainer {
		align-self: flex-start;
		flex-basis: 100%;
    width: 85%;
    max-width: 100%;
    padding: 0 0 0 1.5rem;
	}
	.description {
		flex-basis: 100%;
		max-width: 100%;
		padding: 1.2rem;
	}
	#fastingCalculator {
		padding: 2rem 1rem;
		width: 90%;
	}
}