html {
  border: 1px solid blue;
}

body {
  margin: 0;
  font-family: 'Times New Roman', Times, serif;
  background-color: snow;
}

p {
  margin-block-start: 0;
  margin-block-end: 0;
}

.dimensions-container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dimensions-info {
  position: absolute;
  z-index: 1; 
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 15rem;
  color: snow;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: blue;
}

#instructions-text {
  position: absolute;
  z-index: 3;
  color: blue;
  border-right: 1px solid blue;
  border-bottom: 1px solid blue;

  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  padding: 1rem;
}

#instructions-text:hover {
  background-color: blue;
  color: white;
  cursor: help;
}

.movedLines {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
}

line {
  stroke: blue;
  stroke-width: 1;
}

.dimensions-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}