styleweb.css

h1,h2,h3,p{
    font-family:Tahoma, Geneva, sans-serif;
    text-align: center;

}

body, html {
  height: 100%;
}

* {
  box-sizing: border-box;
}

.bg-image {
  background-image: url("concert.jpg");
  filter: blur(8px);
  -webkit-filter: blur(8px);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Position text in the middle of the page/image */
.container {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 2px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
  word-wrap: break-word;
}


.slidercontainer{
    width:100%
}

.slider{
  -webkit-appearance: none;
  width: 50%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  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: rgb(139, 68, 180);
    cursor: pointer;
  }


input[type=number]{
  border:1px;
  width:80px;
  padding-left: 5px;
  margin-left: 5px;
  margin-right: 10px;
  margin-top: 10px;
  border: 1px solid gray;
}

#info{
font-size: 12px;

}