*,
*::after,
*::before {
  box-sizing: border-box;
}
ul {
  list-style: none;
}
body {
  padding: 0.5em;
  font-family: Monteserrat, Poppins, "Segoe UI", verdana;
}
h1, h2, h3, h4, h5, h6{
	font-family: Poppins, Verdana, Geneva, Tahoma, sans-serif;
}
h1 {
  font-size: 1.5em;
}

.details {
  font-style: italic;
  margin-left: 1em;
}
img.cake {
  width: 100%;
  border-radius: 1em;
}

.title {
  color: rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
  font-size: 0.7em;
}
.specs {
  color: rgba(250, 100, 50);
}
.info > ul {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  /* gap: 1em; */
  align-items: center;
}
.info li {
  display: inline-flex;
  align-items: center;
  font-size: 0.8em;
  justify-content: space-between;
  padding: 0;
  margin: 0.5em;
  /* gap: .5em; */
}
.info li > p {
  display: flex;
  flex-direction: column;
  margin-left: 0.4em;
}
.specs svg, .timing svg{transform: scale(1.5);}
.ingredients > section {
  display: flex;
  flex-direction: column;
}
.ingredients h3 {
  font-style: italic;
  font-weight: normal;
  font-size: 1.1em;
}
.ingredients label {
  font-size: .9em;
  padding: .5em;
  margin: 1em 0 1em 1.5em;
}
.ingredients input{
	transform: scale(1.8);
	margin-right: 1em;
	position: relative;
}
.ingredients input:checked~span{font-size: .8em;}
.instructions{counter-reset: steps}
.step{margin: .5em .5em 1em 4em;position: relative;}
.step::before{
	counter-increment: steps;
	content: counter(steps);
	position: absolute;
	left: -3em;
	width: 2em;
	height: 2em;
	text-align: center;
	line-height: 2em;
	background-color: rgba(236, 170, 50);
	color: #fff;
	border-radius: 5px;
}
.source{
	font-family: cursive;
	color: rgba(0, 0, 0, 0.6);
	font-weight: bold;
	font-size: .9em;
	margin: 0 0 2em 1em;
	overflow-x: auto;
	text-align: center;
	text-decoration: underline;
}
.source a{color: inherit;}

footer{
	text-align: center;
	margin: 0 auto;
	font-size: .8em;
	margin-top: 1em;
	padding: .5em;
	color: rgba(125, 125, 125);
}

@media screen and (max-width: 699px){
	img.cake{
		max-width: 500px;
		position: relative;
		left: 50%;
		transform: translateX(-50%);}
}

@media screen and (min-width: 700px){
	body{
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		box-sizing: border-box;
		min-width: 500px;
		padding: 1em 5em;
		overflow-x: hidden;
		width: 100%;
	}
	.prepare{
		display: flex;
		flex-flow: nowrap row-reverse;
		align-items: flex-start;
	}
	.ingredients>section{
		max-width: 80%;
	}
	.instructions>.step{
		max-width: 80%;
	}
	.info{
		margin-top: 10em;
		align-items: center;
		height: max-content;
		min-width: 150px;
		box-shadow: 0 0 1em 1px rgba(0, 0, 0, .1);
	}
	.info>ul{
		flex-direction: column;
		align-items: flex-start;
	}
	.info li{
		position: relative;
		left: 10%;
	}
}
@media screen and (min-width: 800px){
	img.cake{
		width: 50%;
	}
	.dots{top:1em !important;transform: scale(1.5);}
	.details{width: 90%;}
	body>.contxt{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.step{padding: 1em;}
	.step:hover{
		box-shadow: 0 0 1em 0 rgba(125, 125, 125, 0.3);
		border-radius: 5px;
	}
}