/* Global styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
}

body {
  font-family: 'Noto Sans', sans-serif;
}

/* Outer layout */
#outer {
  width: 100%;
  height: 100%;
}

#inner {
  width: 100%;
}

/* Head section */
#headsection {
  background-color: rgb(245,245,245);
}

#inner_headsection {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

#title {
  text-align: center;
  padding: 20px 0 5px;
}

#authors,
#subtitle {
  text-align: center;
  padding: 0;
}

#abstract {
  margin: 0;
}

#abstract_txt {
  padding: 10px 0;
  text-align: justify;
}

/* Figure styling */
.figure {
  background-color: rgb(255,255,255);
}

.figure:nth-child(odd) {
  background-color: rgb(245,245,245);
}

.inner_figure {
  width: 90%;
  max-width: 800px;
  margin: auto;
  padding: 10px;
}

.figure_title {
  padding: 5px 0;
}

.figure_caption {
  margin: 5px 0;
  padding: 10px 5px;
  border-left: 2px solid grey;
}

/* Link styles */
a {
  color: rgb(50,50,50);
}

/* Interactive elements */
#selection_div {
  position: relative;
  width: 100%;
}

#selection_canvas,
#selection_svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

#selection_canvas {
  background-color: #222;
}

/* Slider container */
#slider_container {
  display: grid;
  grid-template-columns: 80% 20%;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  width: 100%;
}

#size_slider {
  width: 100%;
}

#slider_value {
  text-align: center;
  font-weight: bold;
}

/* Citation box */
#citebox {
  margin: 10px;
  padding: 10px;
  border: 2px dashed black;
  background-color: lightgrey;
  color: black;
  line-height: 100%;
  font-family: monospace;
  display: block;
  white-space: pre-wrap;
}

/* Slider component */
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 40px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

.slider:hover {
  opacity: 1;
}

/* Slider thumb styles for Webkit */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 35px;
  background: #04AA6D;
  cursor: pointer;
  border: 1px solid black;
  border-radius: 2px;
}

/* Slider thumb styles for Firefox */
.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

/* Additional interactive elements */
.selection {
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 5px;
}

.content-div {
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  opacity: 0.5;
  transition: opacity 0.3s, background-color 0.3s;
}