html *{
    font-family: Arial, monospace,sans-serif;
}

body{
	background-color: #F5F6F9;
	margin:0;
	/*padding:10px;*/
	color: #060A1B;
}

section{
	margin: 48px 0px;
	padding: 24px 24px;
}

h1{
	font-size: 2.5rem;
	margin:0
}
nav{
	padding: 24px;
}

nav ul{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

ul{
  padding: 0;
  margin :0;
}

li{
  list-style-type: none;
}

a{
	color: inherit;
	text-decoration: inherit;
}

a>img{
	vertical-align : middle;
}

li>*{
	line-height: 50px;
}
li br{
	line-height:20px;
}

fieldset{
	 border-radius: 10px;
	 border:none;
	 background: #F5F6F9;
	 border-width: 1px;
	 margin: 15px 0;
	 padding: 24px;
}
input{
	border-radius: 10px;
	border-style: solid;
	border-width: 1px;
	border-color: #CDD9E1;
	min-height: 27px;
}
textarea{
	border-radius: 10px;
	border-style: solid;
	width:100%;
	padding: 10px 0;
}
textarea::placeholder {
	margin: 0px 
}


button {
  border-radius: 40px;
  color: white;
  background: blue;
  cursor:pointer;
  height: 50px;
  padding: 0px 20px;
  display: block;
  font-weight: bold;
  border: 0;
  height: 48px;
  padding: 0px 24px;
}
button img{
	vertical-align: middle;
}

form > button{
	width: 100%
}

form p{
	font-weight:700;
	margin: 0 0 24px 0;
}

strong{
	color: #0029FF
}



/*#description{
	padding:24px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}*/

footer{
	background:#060A1B;
	color: white
}

main, footer ul{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

footer p{
	margin:0
}

dialog{
	position: absolute;
	left: 50%;
	width: 83vw;
	top: 50%;
	transform: translate(-50% , -50%);
	border: none;
}

dialog::backdrop {
  background-image: linear-gradient(
    45deg,
    magenta,
    rebeccapurple,
    dodgerblue,
    green
  );
  opacity: 0.75;
}



.button-radio input[type="radio"] {
	opacity: 0;
	z-index:100;
	width:0;
	display: none;
}

.button-radio input[type="radio"]:checked+label{
  background: #0029FF;
  color:white
}


/*.button-radio input{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}*/

.button-radio label {
  border: 1px solid #CCC;
  font-weight : 700;
  border-radius : 22px;
  padding: 0px 0px;
  background: white;
  cursor: pointer;
  z-index: 90;
  display: block;
  width: 100%;
  height: 44px;
  line-height: 44px;
  text-align: center;
}

.button-radio label:hover {
  background: #DDD;
}

#answer-selection{
	display: flex;
	flex-direction: column;
	gap: 8px;
}
}

.optional{
	display:none;
}

.desktop{
	display:none
}

#shop-owner-btn{
	background: #00001a;
}

.visible{
	display: initial !important;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/*#description{
  max-width: 66vw;
}*/


/*#demo{
	display: none;
}*/
#brand{
	font-size: xx-large;
	font-family: Poppins, Helvetica, Helvetica Neue, Arial;
	font-size:1.6rem;
	font-weight:600;
	letter-spacing: -0.05rem;
}

#cta {
	display:flex
}

#contact{
 background: #EAEDEF;
 border-radius: 10px;
 padding: 24px;
 margin: 40px 0;
}

#shop-owner-interview{
	background-color: white;
}

@media (min-width: 30em)
{

	.desktop{
		display:initial
	}
	.mobile{
		display:none
	}
	
	main,footer{
		  flex-direction: row;
		  align-items: start;
		  background-color:inherit;
		  color:black		  
	}

	#description{	
		max-width: 35vw;
	}

	#description > p{
		margin: 27px 0px;
	}	
	
	header{
		min-height:20vh
	}

	main{
		min-height:70vh;
		flex-flow: row;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows:  1fr 1fr;
	}

	main , footer ul{
		flex-direction:row;
	}
	

	button{
		display:initial;
		font-size: 1.2rem;
	}

	.button-radio label {
		background: #EAEDEF;
		/*display : inline;*/
	}

	h1{
		font-size: 5rem;
		font-family: Arial Black, Arial Bold,Arial;
		letter-spacing: -0.18rem;
	}
	h2{
		font-size: 2.5rem;
	}

	nav  button{
		display:block
	}

	ul{
		justify-content: space-between;
	}
	#cta {
		display:none
	}

	#shop-owner-interview{
		grid-column: 1 / 3;
		grid-row: 2;
	}
	#shop-owner-interview > h1, #shop-owner-interview > h2 , #shop-owner-interview > form{
		padding: 0 3vW
	}

	#answer-selection{
		flex-direction:row;
		justify-content: space-between;
	}
	.binary-choice{
		width:45%
	}

	main > section {
		justify-self: center;
	}

	#contact{
		display:none
	}

	fieldset{
		background:none;
		border:none
	}

	textarea{
		border:none;
		background:#EAEDEF;	
	}

	form{
		max-width: 800px;
		margin: auto;
	}

	form p{
		font-size: 1.5rem
	}

	
}

/*@media (min-height: 360px)
{
	#demo{
		display: initial;
	}

}*/