@font-face {
    font-family: tiny;
    src: url('assets/fonts/Pixolletta8px.otf') format('opentype'), /* OTF format */
    url('assets/fonts/Pixolletta8px.ttf') format('truetype');
}

@font-face {
    font-family: super_tiny;
    src: url('assets/fonts/PIXY.otf') format('opentype'), /* OTF format */
    url('assets/fonts/PIXY.ttf') format('truetype');
}

@font-face {
    font-family: digital;
    src: url('assets/fonts/digital-7.otf') format('opentype'), /* OTF format */
    url('assets/fonts/digital-7.ttf') format('truetype');
}

body {
    margin: 0;
    background-color: black;
    background: url("index_page/bright_bg.png") repeat;
}

.background {
    background: url("index_page/bg\ copy.png") repeat;
}

.left_button:hover {
  content: url('radio/left_button_hover.png');
}
.left_button:active {
  content: url('radio/left_button_on.png');
}
.right_button:hover {
  content: url('radio/right_button_hover.png');
}
.right_button:active {
  content: url('radio/right_button_on.png');
}

.normalText {
    color: white; z-index: 2; font-family: 'tiny'; font-size: 8px; line-height: 9px; 
}

.tinyText {
    color: white; z-index: 2; font-family: 'super_tiny'; font-size: 8px; line-height: 7px; 
}

.mainArea {
    width: 400px; 
    margin: 0 auto;
}

.button {

}

.button:hover {
    filter: brightness(1.75);
}



#radio-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 105px;
  height: 32px;
  background: transparent;
  position: absolute;
  left: -5px;
  top: -9px;
  z-index: 10;
  margin: 0;
  padding: 0;
}
#radio-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  transform: translateY(-2px);
  background: url('index_page/widget_buttons/scrollbar_knob.png') no-repeat center center;
  background-size: contain;
  cursor: pointer;
  border: none;
}
#radio-slider::-moz-range-thumb {
  width: 13px;
  height: 13px;
  transform: translateY(0px);
  background: url('index_page/widget_buttons/scrollbar_knob.png') no-repeat center center;
  background-size: contain;
  cursor: pointer;
  border: none;
}
#radio-slider::-ms-thumb {
  transform: translateY(-2px);
  width: 13px;
  height: 13px;
  background: url('index_page/widget_buttons/scrollbar_knob.png') no-repeat center center;
  background-size: contain;
  cursor: pointer;
  border: none;
}
#radio-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
}
#radio-slider::-ms-fill-lower,
#radio-slider::-ms-fill-upper {
  border-radius: 4px;
}
#radio-slider::-moz-range-track {
  height: 8px;
  border-radius: 4px;
}
#radio-slider:focus {
  outline: none;
}



#color-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 135px;
  height: 32px;
  background: transparent;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 10;
  margin: 0;
  padding: 0;
}
#color-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  transform: translateY(-2px);
  background: url('index_page/widget_buttons/scrollbar_knob.png') no-repeat center center;
  background-size: contain;
  cursor: pointer;
  border: none;
}
#color-slider::-moz-range-thumb {
  width: 13px;
  height: 13px;
  transform: translateY(0px);
  background: url('index_page/widget_buttons/scrollbar_knob.png') no-repeat center center;
  background-size: contain;
  cursor: pointer;
  border: none;
}
#color-slider::-ms-thumb {
  transform: translateY(-2px);
  width: 13px;
  height: 13px;
  background: url('index_page/widget_buttons/scrollbar_knob.png') no-repeat center center;
  background-size: contain;
  cursor: pointer;
  border: none;
}
#color-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
}
#color-slider::-ms-fill-lower,
#color-slider::-ms-fill-upper {
  border-radius: 4px;
}
#color-slider::-moz-range-track {
  height: 8px;
  border-radius: 4px;
}
#color-slider:focus {
  outline: none;
}

input[type="radio"] {
    width: 8px;
    height: 8px;
    margin: 2px;
    vertical-align: middle;
    accent-color: blue;  /* Makes the radio button blue when checked */
}

/* Sticker conveyor styles */
#sticker_conveyor_belt_region {
    overflow: hidden;
}

.draggable-sticker {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.draggable-sticker:active {
    cursor: grabbing !important;
}