:root {
  --text-dark-color: #3A4D39;
  --text-light-color: #ECE3CE;
  --main-bg-color: var(--text-light-color);
  --progress-color: #4F6F52;
  --progress-color-transparent: #4F6F5255;
  --progress-bar-color: #739072;
  --progress-bar-color-transparent: #73907255;
  --personal-deadline-color: var(--text-dark-color);
  --font-family: 'Cousine';
  --scale-ratio: 1.618;
}

* {
  font-size: 1rem;
}

body{
  font-family: var(--font-family), monospace;
  background-color: var(--main-bg-color);
  color: var(--text-dark-color);
  width: 100%;
}

h1 {
  font-size: clamp(2rem, 5vw, calc(.5rem * var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio)));
}

h2 {
  font-size: clamp(1rem, 5vw, calc(.5rem * var(--scale-ratio) * var(--scale-ratio)));
}

h3 {
  font-size: clamp(1rem, 5vw, calc(.5rem * var(--scale-ratio)));
}

p {
  font-size: clamp(.5rem, 5vw, .8rem);
}

header {
  position: sticky;
  top: 0;
  background-color: var(--main-bg-color);
  z-index: 1;
}

header > h1 {
  padding: clamp(.5rem, 5vw, 1.5rem);
}

.headerProgressBar {
  display:flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: var(--text-dark-color) solid 1px;
  padding: clamp(.5rem, 5vw, 1.8rem);
  margin-bottom: clamp(.2em, 5vw, .5em);
}

.headerProgressText {
  color: var(--text-light-color);
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: clamp(.5em, 5vw, 1.8em) auto 0;
}

main > section {
  width: 90vw;
  max-width: 120ch;
}

.moduleContainer {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-light-color);
  padding: clamp(1em, 5vw, 2em);
  border-radius: .8rem .8rem .2rem .2rem;
  margin-bottom: clamp(.5rem, 5vw, .8rem);
}

.moduleContainer > h2 {
  min-width: 30ch;
}

.subModulesCompleted {
  min-width: 9ch;
  font-weight: 100;
  color: var(--text-light-color);
  text-align: right;
}

.subModule {
  border-bottom: var(--progress-bar-color) solid .05rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(.5em, 5vw, 1.2em);
}

.subModule > p {
  max-width: 66ch;
}

.subModule:last-child {
  margin-bottom: .5rem;
  border-radius: .8rem;
  border-width: 0.15rem;
}

.displayBlock {
  display: block;
}

.displayNon {
  display: none;
}

.status {
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  color: var(--text-dark-color);
  background-color: #00000000;
  border-radius: 30rem;
  min-width: 14ch;
  font-size: clamp(.2rem, 5vw, calc(.5rem * var(--scale-ratio)));
  padding: clamp(.1em, 5vw, .5em);
}

.completed {
  border: var(--progress-color) 1px solid;
  background-color: var(--progress-bar-color-transparent);   
}

.inProgress {
  border-bottom: var(--progress-color-transparent) 1px solid;;
}