:root {
	--bg-main-color: #1f2029;
	--toned-down-white: #f1f1f1;
	--highlight-main: rgb(228, 217, 120);
  }
 
  h2 {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 40px;
	transition: 0.3s linear;
  }
 
  #btn-wrapper {  
	text-align: left;
	margin-top: 10px;
	margin-left: 10px;
	font-size: 12px;
  }
  
  /* sets the size the switch's body, this is the label element, and our container -- the band of the slider*/
  .switch {
	position: relative;
	display: inline-block;
	width: 86px;
	height: 28px;
  }
  

/* Handle on hover */
.switch:hover { 
	--toned-down-white: #f1f1f1;
	--highlight-main: #b3b000; 
  }
  

  /* hides the checkbox's default ticking box, we don't need to show it, we only need it's "checked" functionality to keep track of when user clicks*/
  .switch input {
	opacity: 0;
	width: 0;
	height: 0;
  }
  
  /* this is a span nested inside label container, that takes the width and position of its container -- it definies the position of the slider*/ 
  .slider {
	position: absolute;
	cursor: pointer;
	top: 0px; 
	width: inherit;
	height: 28px;
	background-color: var(--highlight-main);
	font-weight: 600;
	transition: 0.35s;
  }
  
	#pickUporDeliver {
	position: absolute;
	cursor: pointer;
	top: 50%;
	transform: translateY(-50%);
	right: 6px;
	left: auto;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	color: #1a1914;
	text-decoration: none;
	white-space: nowrap;
	font-family: system-ui,-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
  }
  
  /* this is the toggle circle that moves, setting its inital position and size -- this is the circle*/
  .slider:before {
	position: absolute;
	content: "";
	top: 0;
	left: -2px;
	height: 28px;
	width: 28px;
	background-color: var(--toned-down-white);
	transition: 0.35s;
	color: var(--highlight-main);
	font-size: 9px;
  }
  
  /* color change on slider circle when input container is clicked.because label element is container, clicking anywhere in it triggers input:checked */
  input:checked + .slider {
	background-color: var(--toned-down-white);
  }
  
  /* when input is focused show shadow on slider */
  input:focus + .slider {
	box-shadow: 0 0 1px #2196f3;
  }
  
  /* when label cointainer is clicked change toggle circle color, and move it to the right */
  input:checked + .slider:before {
	background-color: var(--highlight-main);
	content: "";
	transform: translateX(56px);
  }
  
  /* make the label container rounded*/
  .slider.round {
	border-radius: 999px;
  }
  
  /* make the roggle circle round */
  .slider.round:before {
	border-radius: 50%;
  }