html, body {
  margin: 0;
  padding: 0;
  background-image:url("https://upload.wikimedia.org/wikipedia/commons/c/c6/Fleet_5_nations.jpg");
}
canvas {
  display: block;
  border:5px solid black;
}

h1 {
  padding-left:10px;
  padding-top: 10px;
  padding-bottom:10px;
}

#main {
  width: auto;
  margin:auto;
}
img {
  padding:10px;
  width:40px;
  height:40px;
}

#flagCount {
  padding-left: 10px;
  padding-bottom: 10px;
}

body {
  display:grid; 
  grid-template-rows: repeat(1, 1fr);
  grid-template-columns: repeat(2, 1fr);
}

div {
  display: block;
}

#buttonContainer {
  display: block;
}


button,.slidercontainer {
  display:block;

  height: 100px;
  width: 200px;
    margin: auto;

  margin-top:100px;
  margin-bottom:100px;
  border-radius: 5px;

}

input {
  display:block;

  height: 100px;
  width: 200px;
    margin: auto;

  margin-bottom:100px;
  border-radius: 5px;
}

#volImage {
  margin:auto;
  background-color:darkgreen;

}