@charset "UTF-8";

/*
html, body {animation: bgColor 3s cubic-bezier(1,0,.5,1);}
html, body {animation: textColor 3s cubic-bezier(1,0,.5,1);}
*/


.line {
    width: .5px;
    height: 100vh;
    background-color: #ccc;
    position: absolute;
    top: 0;
    left: 10rem;
  }
  .line:nth-of-type(1) {
    left: 8vw;
  }
  .line:nth-of-type(2) {
    left: calc(8vw + (100vw - 8vw - 6.5vw) * .35);
  }
  .line:nth-of-type(3) {
    left: auto;
    right: var(--padding);
  }
  .line:nth-of-type(4) {
    width: 100vw;
    height: .5px;
    left: 0;
    top: calc((6.5px * 1.35) + 5vh + 45px);
  }
  .line:nth-of-type(5) {
    width: 100vw;
    height: .5px;
    left: 0;
    top: calc((6.5px * 1.35) + 5vh + 45px + 7.5vh);
  }
  .line:nth-of-type(6) {
    width: 100vw;
    height: .5px;
    left: 0;
    top: calc((6.5px * 1.35) + 5vh + 45px + 7.5vh + 155.5px + 8vh);
  }