/* // Developed by Ronak Laungani while he was in lock down during the COVID-19 Pandemic. Imagine how bored he was. Show some love at http://www.ronaklaungani.com. Thanks! */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');


body { padding: 30px; }

h1 { font-family: ubuntu; }

p { font-family: ubuntu;
	line-height: 30px; }

button { font-family: ubuntu;
			color: white;
			background-color: black;
			border: none;
			padding: 10px;
			margin: 10px 0px;
			border-radius: 30px;
			cursor: pointer; }

button:hover { font-family: ubuntu;
			color: white;
			background-color: #1e1e1e;
			border: none; }


#scroller {		height: 40px;
				/*position: fixed;*/
				border: none;
				background-color: #00000010;
				border-radius: 30px;
				overflow-x: auto;
  				overflow-y: hidden;
  				scroll-snap-type: x mandatory;
        		scroll-snap-stop: always;
 			 	 }

#scroller::-webkit-scrollbar {
  				display: none;
}


#scroller-block { 
				overflow: visible;
				display: grid;
				 }

.numberInScroller { text-align: center;
						line-height: 22px;
						height: 30px;
						margin: 0px;
						padding-top: 10px;
						scroll-snap-align: center;
						 }


#selectedValueIndicator { height: 40px;
						border-radius: 30px;
						background-color: transparent;
						border: solid;
						border-width: 1px;
						border-color: #00000050;
						z-index: +1;
						position: relative;
						margin-top: -40px;
						pointer-events: none;
						box-shadow: inset 0 0 10px #00000050;
					}