:root {
  --main-bg-color: #fce6bd;
  /* --main-text-color: #096332; */
  --main-text-color: #004225;
  --secondary-text-color: #3d0000;
  /* --parent-margins:  0.5em 8em; */
  --parent-margin: 2em;
  --parent-font-size: 1.4em;
}
html, body {
  margin: 0;
  padding: 0;
}
body{
  overflow-x: hidden;
  font-family: Helvetica, sans-serif;
  font-size: var(--parent-font-size );
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
  text-align: center;
  /* margin: 0 auto 0; */
}

p.main{
  text-align: justify;
  /* margin: var(--parent-margins); */
}
details {
  text-align: justify;
  margin: var(--parent-margin);
}
details p{
  /* margin: var(--parent-margins); */
  margin: 0;
  text-align: justify;
}

/* Headings */
h1.fancy-title {
  /* this is probably overcomplicated */
  font-size: calc(var(--parent-font-size) * 1.5);
  background-color: var(--main-text-color);
  color: var(--main-bg-color);
  letter-spacing: 1em;
  text-transform: uppercase;
  font-family: 'Times New Roman', Times, serif;
  margin: 0;
  /* padding: 1em; */
  background-clip: padding-box;
  /* reset margin */
  margin: calc(var(--parent-font-size)*-0.25) 0em 1em 0em;
  /* padding: 0.5em 0em; */
  /* set width to 100% of viewport */
  width: 100vw;
  height: calc(var(--parent-font-size) * 1.25);
  line-height: calc(var(--parent-font-size) * 1.25);
  /* Allows position properties i.e. left */
  position: relative;
  /* Set left edge to 50% of container (i.e. the middle) */
  left: 50%; 
  /* shift whole box 50% left */
  transform: translateX(-50%); 
}

h1.fancy-title-linebreaking {
  font-size: calc(var(--parent-font-size) * 1.5);
  box-sizing: border-box;  background-color: var(--main-text-color);
  color: var(--main-bg-color);
  letter-spacing: 1em;
  overflow-wrap: anywhere; /*Word breaks as last resort*/
  /* TODO: Scale text dynamically instead of word breaking */
  text-transform: uppercase;
  font-family: 'Times New Roman', Times, serif;
  margin: 0; 
  background-clip: padding-box;
  padding: 0.2em 0 0.3em;
  width: 102vw
}
  h2 {
    font-family: 'Courier New', Courier, monospace;
    font-size: calc(var(--parent-font-size) * 1.25);
    text-decoration: underline;
    text-align: justify;
    margin: 0;
    padding: 0;
  }
/* Gauges */
.gauges{
  font-family: 'Courier New', Courier, monospace;
  text-align: center;
}
.gauge{
  display: inline-block;
  margin:0;
  padding: 0;
}
.gauge h1{
  font-weight: lighter;
  font-size: calc(var(--parent-font-size) * 1.25);
  padding: 0;
}