@charset "utf-8";

*, *[class*=material-symbols] {
	margin: 0;
	padding: 0;
	float: none;
	list-style: none;
	line-height: 1.5;
	font-size: 10px;
}

*[class*=material-symbols] {
	line-height: 1;
}

button {
    border: none;
    cursor: pointer;
}

*, *::after, *::before{
	box-sizing: border-box;
	font-family: arial, sans-serif;
    padding: 0;
    margin: 0;
}	

br {
	display:block;
	content:"";
	margin-block: 4px;	
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

form {
	:is(input[type=text],input[type=number],input[type=password],textarea,select,optgroup,option) {
		font-size: 1.6rem;
		color: #000;
		background: hsl(0,0%,97%);
	}
	:is(input[type=text],input[type=number],input[type=password],textarea,select,optgroup,option)::placeholder {
		color: hsl(0,0%,80%);
	}
	:is(input[type=text],input[type=number],input[type=password],textarea,select,optgroup,option):focus {
		border-color: yellow;
	}
	:is(input[type=text],input[type=number],input[type=password],textarea) {
		width:100%;
		height:auto;
		padding:8px 4px;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		border-radius:10px;
	}
	textarea {
		min-height:200px;
	}
	select {
		padding: 4px 16px;
		border:solid 1px hsl(var(--col),100%,90%);
	}
	button {
		cursor: pointer;
		padding: 4px 24px;
		font-size: 1.6rem;
		color: hsl(var(--col),0%,30%);
	}
}

body:is(.find.shops, .top-lebel, .info, .about) {
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: #fff;
}

body:is(.find.shops, .top-lebel, .info, .about) > * {
	width: 100%;
}