.bg {
  /* background-image: url("../images/R.jpg"); */
  font-family: Arial, Helvetica, sans-serif;
  height: auto;
  width: 100%;
  background-size: cover;
  filter: invert(100%);
  background-color:black;
  background-image:
  radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
  radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
  radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
  radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
  background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
  background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
  } 

.drawn {
  display:flex;
  align-items:center;
  justify-content:center;
  }  
  
/* SVG Sizing */
svg {
  width: 85%;
  height: auto;
  position: fixed;
  top: 3vh;
  opacity: 0.9;
} 

/* heading
.text {
  padding-top: 4vh;
  line-height: 5vw;
  font: bold;
  opacity: 1;
  writing-mode: vertical-lr;
  font-family: Arial, Helvetica, sans-serif;
  font-variant-caps: small-caps;
  font-size: 3vh;
} */

.svgtext {
  font-weight: bold;
  opacity: 1;
  float: left;
  transform: rotate(-90deg);
  font-variant-caps: small-caps;
  font-size: 4vh;
  transform-origin: top;
}

.svgtext:hover {
  fill: rgb(255, 0, 255);
}

.cursor {
  font-weight: normal;
  color: rgb(0, 0, 0);
}

/* back button */
.back {
  font-variant-caps: small-caps;
  font-size: 2vh;
  font: bold;
  fill: rgb(0, 0, 0);
}

.paragraph {
  margin-top: 45%;
  padding-top: 1%;
  padding-left: 7.5%;
  padding-right: 7.5%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.back:hover {
  fill: rgb(255, 0, 255);
}

/* background cladding */
.st0 {
  fill: none;
  stroke: #000000;
  stroke-width: 0.2;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 5s linear forwards;
  animation-delay: 12s;
}

/* OSB floor_joists window-frame*/
.st1 {
  fill: none;
  stroke: #000000;
  stroke-width: 0.3;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: dash 10s linear forwards;
  animation-delay: 10s;
}

/* floor_joists */
.st2 {
  fill: none;
  stroke: #000000;
  stroke-width: 0.1;
  stroke-miterlimit: 10;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: dash 10s linear forwards;
  animation-delay: 10s;
}

/* pile-plate screw-pile*/
.st3 {
  fill: none;
  stroke: #000000;
  stroke-width: 0.4;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: dash 10s linear forwards;
  animation-delay: 10s;
}

/* cladding GL_beams*/
.st4 {
  fill: none;
  stroke: #000000;
  stroke-width: 0.3;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: dash 10s linear forwards;
  animation-delay: 5s;
}

/* cladding_ends */
.st17 {
  fill: none;
  stroke: #000000;
  stroke-width: 0.4;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: dash 10s linear forwards;
  /* animation-delay: 1s; */
}

/* GL_beams */
.st5 {
  fill: none;
  stroke: #000000;
  stroke-width: 0.2;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: dash 10s linear forwards;
  animation-delay: 10s;
}

/* GL_beams */
.st6 {
  fill: none;
  stroke: #000000;
  stroke-width: 0.3;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: dash 10s linear forwards;
  animation-delay: 10s;
}

/* dia_posts */
.st7 {
  fill: none;
  stroke: #000000;
  stroke-width: 0.5;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: dash 10s linear forwards;
  animation-delay: 13s;
}

/* roof_joists cross_brace*/
.st8 {
  fill: none;
  stroke: #000000;
  stroke-width: 0.25;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: dash 7s linear forwards;
  animation-delay: 10s;
}

/* Window-frame */
.st9 {
  fill: none;
  stroke: #000000;
  stroke-width: 0.4;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 6s linear forwards;
  animation-delay: 12s;
}

/* Window-frame */
.st10 {
  fill: none;
  stroke: #000000;
  stroke-width: 0.3;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dash 6s linear forwards;
  animation-delay: 12s;
}

/* dia_beams */
.st11 {
  fill: none;
  stroke: #000000;
  stroke-width: 0.3;  
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: dash 5s linear forwards;
  animation-delay: 11s;
}

/* cladding */
.st12 {
  fill: none;
  stroke: #000000;
  stroke-dasharray: 550;
  stroke-dashoffset: 550;
  animation: dash 5s linear forwards;
  animation-delay: 5s;
}

/* Door_frame ViewportRectangle */
.st13 {
  fill: none;
  stroke: #000000;
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: dash 5s linear forwards;
}

/* Door_frame */
.st14 {
  fill: none;
  stroke: #000000;
  stroke-width: 0.75;
  stroke-dasharray: 550;
  stroke-dashoffset: 550;
  animation: dash 5s linear forwards;
}

/* Door_frame */
.st15 {
  fill: none;
  stroke: #000000;
  stroke-width: 0.5;
  stroke-dasharray: 550;
  stroke-dashoffset: 550;
  animation: dash 5s linear forwards;
}

/* Door_frame */
.st16 {
  fill: none;
  stroke: #000000;
  stroke-width: 0.75;
  stroke-dasharray: 550;
  stroke-dashoffset: 550;
  animation: dash 5s cubic-bezier(0, 0, 1, 0.73) forwards;
  animation-delay: 4.5s;
}

/* path */
#path {
  fill: none;
  stroke: #000000;
  opacity: 0;
}

.fin
{
stroke-width: 0.3px;
stroke: #000000;
fill: #ffffff;
}

/* cladding */

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}