body, div, p,h1,h2, h3{
			box-sizing:border-box;
			}
		b{
			font-family: 'Ballon-Dor-Extrabold';
			}
		:root {
			--backslider: #d3d3d3;
			--bd: #8e6203;
			--b: #aa7504;
			--bc: #aa750466;
			--bct: #fbb31941;
			--x-bct: #aa750440;
			}
		.square-circle{
			max-width:400px;
			width: 70%;
			background: #fefefe;
			position:relative;
			margin: 20px auto;
			aspect-ratio: 1/1;
			-webkit-aspect-ratio: 1/1;
			}
		.square-circle .square,
		.square-circle .circle,
		.square-circle .sc-result{
			position: absolute;
			left:50%;
			top:50%;
			background-color:transparent;
			border:4px solid var(--bct);
			}
		.square-circle .square{
			width:300px;
			height:300px;
			margin:-150px;
			z-index:1;
			}
		.square-circle .circle{
			width:338px;
			height:338px;
			border-radius:169px;
			margin:-169px;
			z-index:2;
			}
		.square-circle .sc-result{
			background-color:var(--bc);
			border:0px;
			width:300px;
			height:300px;
			margin-left:-150px;
			margin-top:-150px;
			z-index:3;
			}
		.slidecontainer,
		.instruktion{
		  width: 70%;
		  position:relative;
		  margin: 20px auto;
		  text-align:center;
		}
		.instruktion{
		  margin-top: 40px;
		  max-width: 400px;
		  }
		.instruktion p, .button, p.thanks{
			font-size:25px;
			line-height:32px;
			margin:0.5em 0;
			}
		button, .button{
			display:inline-block;
			background-color:var(--bd);
			color:white;
			padding:3px 16px 0 16px;
			border-radius: 20px;
			box-shadow: -5px -10px 10px inset rgba(107,74,3,0.8);
			}

		br.small-only{
			display:none;
			}

		@media(max-width:500px){
			.slidecontainer, .instruktion{
				width: 90%;
				}
			.square-circle{
				margin: 60px auto;
				}
			.instruktion p, .button{
				font-size: 21px;
				line-height: 24px;
				}
			br.small-only{
				display:block;
				}
			}
		.slider {
		  -webkit-appearance: none;
		  width: 70%;
		  height: 10px;
		  border-radius: 5px;  
		  background: var(--backslider);
		  outline: none;
		  opacity: 0.7;
		  -webkit-transition: .2s;
		  transition: opacity .2s;
		}
		
		.slider::-webkit-slider-thumb {
		  -webkit-appearance: none;
		  appearance: none;
		  width: 25px;
		  height: 25px;
		  border-radius: 50%; 
		  background: var(--b);
		  cursor: pointer;
		}
		
		.slider::-moz-range-thumb {
		  width: 25px;
		  height: 25px;
		  border-radius: 50%;
		  background: var(--b);
		  cursor: pointer;
		}