@font-face {
    font-family: Arial, Helvetica,"Montserrat";
    font-weight: normal;
    font-style: normal;
}

{
padding: 0;
margin: 0;
box-sizing: border-box;
}
#scratch {
    background-color: white;
    z-index: 4;
    border-width: thin;
    border-style: solid;
}
h1{ /*Title "Ergo Compute"*/
    font-family: Helvetica, sans-serif;
    font-size: 128pt;
    font-style: normal;
    padding-left: 10%;
    position: absolute; /*keeps it in place*/
    z-index: 4;
}

h2{ /*Title "Introduction"*/
    font-family: Helvetica, sans-serif;
    background-color: black;
    color: white;
    position: relative;
    box-sizing: border-box;
    padding-left: 1%; /*Moves the text within*/
    font-size: 40pt;
    z-index: 4; /*sets the level to put over and under other object*/
    width: 30vw; /*sets the width of the box*/
    left: 10%; /*Moves the border and text towards from the left*/
    top: 620px; /*Moves text down*/
}
#introduction{
    background-color: black;
    position: relative;
    box-sizing: border-box;
    z-index: 2;
    top: 600px;
    width: 50vw;
    height: 80vh;
    padding: 10%;

}
p{
    font-family: Helvetica, sans-serif;
    background-color: black;
    color: white;
    font-size: 18pt;
    width: 30vw;
    position: relative;
    top: 620px;
    left: 10%;
    z-index: 4;
}
body{
    max-width: 2000px;
    background-color: black;
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
}
#torsoBorder{
    position: absolute;
    background-color: red;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60vw;
    height: 160vh;
    padding: 10%;
    z-index: 2;
}
#Torso{
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: auto; /*Maintains aspect ratio*/
    z-index: 3;
}
#Torso path:nth-child(1){
    stroke-dasharray: 13600.6767578125px;
    stroke-dashoffset: 13600.6767578125px;
    animation: line-anim 2s ease forwards 0.4s;
}
#Torso path:nth-child(2){
    stroke-dasharray: 8504.201171875px;
    stroke-dashoffset: 8504.201171875px;
    animation: line-anim 2s ease forwards;
}

@keyframes line-anim {
    to{
        stroke-dashoffset: 0;
    }

}