html {
    max-height: 100vh;
    color: black;
    /* background-color: white; */
    font-size: 1vw;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    animation: pageTransition 0.5s linear forwards;
}

@keyframes pageTransition {
    from {
        /* background-color: black; */
        opacity:0;
        transform: scale(.9);
    }
    to {
        /* background-color: white; */
        opacity:1;
        transform: scale(1);
    }
}

body {
    margin: 0;
}

.aboutPage {
    max-width: 100vw;
    max-height: 100vh;
    display: flex;
}

.aboutLeft {
    display: flex;
    width: 50vw;
    max-width: 50vw;
    height: 90vh;
    justify-content: center;
    align-items: center;
}

.aboutRight {
    display: inline-flex;
    width: 50vw;
    height: 90vh;
    justify-content: center;
    align-items: center;
}

ul {
    width: 50vw;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

ul li {
    list-style-type: none;
    display: flex;
    margin-left: 2vw;
    margin-right: 2vw;
}

li a#nav {
    text-decoration: none;
    font-size: 2.5rem;
    font-weight: 300;
    transition: .15s;
    color: black;
}

li a#nav:hover {
    color: #7644C3;
    transform: scale(1.2);
}

.navBar {
    height: 10vh;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 100vw;
}

.paragraph {
    width: 80%;
    padding-left: 3rem;
    padding-right: 3rem;
    padding-bottom: 1rem;
    font-size: 1.5rem;
}

h1 {
    font-size: 2rem;
}

.coloredText {
    color: #7644C3;
}

.icons {
    display: flex;
    justify-content: space-between;
}

.icons a {
    font-size: 4rem;
    color: #7644C3;
    transition: .2s;
}

.icons a:hover {
    color: black;
    transform: scale(1.25);
}

.SVG {
    width: 40vw;
    height: 75vh;
    display: flex;
    justify-content: center;
}

.topsvg {
    justify-content: center;
}


/* SVG Inidividual Layer Colors */
.st0 {
    fill: #CBAF7F;
}

.st1 {
    fill: #303030;
}

.st2 {
    fill: #D8D5D5;
}

.st3 {
    fill: #C5AA7B;
}

.st4 {
    fill: #7644C3;
}

/* SVG Logo animation stuff */
#Head {
    stroke-width: .15rem;
    fill-opacity: 0;
    stroke-dasharray: 2417.6455078125;
    stroke-dashoffset: 2417.6455078125;
    animation: dashHead 5s 0.4s forwards;
}

@keyframes dashHead {
    from {
        stroke: #7644C3;
        stroke-dashoffset: 2417.6455078125;
        stroke-dashoffset: -2417.6455078125;
    }
    to {
        stroke-dashoffset: 2417.6455078125;
        stroke: black;
        fill-opacity: 1;
    }
}

#Nose {
    stroke-width: .15rem;
    fill-opacity: 0;
    stroke-dasharray: 392.4127197265625;
    stroke-dashoffset: 392.4127197265625;
    animation: dashNose 5s 0.4s forwards;
}

@keyframes dashNose {
    from {
        stroke: #7644C3;
        stroke-dashoffset: 392.4127197265625;
        stroke-dashoffset: -392.4127197265625;
    }
    to {
        fill-opacity: 1;
        stroke-dashoffset: 392.4127197265625;
        stroke: black;
    }
}

#Chin_Beard {
    stroke-width: .15rem;
    stroke-dasharray: 356.55267333984375;
    stroke-dashoffset: 356.55267333984375;
    fill-opacity: 0;
    animation: dashChin_Beard 5s 0.4s forwards;
}

@keyframes dashChin_Beard {
    from {
        stroke: #7644C3;
        stroke-dashoffset: 356.55267333984375;
        stroke-dashoffset: -356.55267333984375;
    }
    to {
        fill-opacity: 1;
        stroke-dashoffset: 356.55267333984375;
        stroke: black;
    }
}

#Top_Hair {
    stroke-width: .15rem;
    fill-opacity: 0;
    stroke-dasharray: 1577.5140380859375;
    stroke-dashoffset: 1577.5140380859375;
    animation: dashTop_Hair 5s 0.4s forwards;
}

@keyframes dashTop_Hair {
    from {
        stroke: #7644C3;
        stroke-dashoffset: 1577.5140380859375;
        stroke-dashoffset: -1577.5140380859375;
    }
    to {
        fill-opacity: 1;
        stroke-dashoffset: 1577.5140380859375;
        stroke: black;
    }
}

#Beard_Hair {
    stroke-width: .15rem;
    fill-opacity: 0;
    stroke-dasharray: 2825.279052734375;
    stroke-dashoffset: 2825.279052734375;
    animation: dashBeard_Hair 5s 0.4s forwards;
}

@keyframes dashBeard_Hair {
    from {
        stroke: #7644C3;
        stroke-dashoffset: 2825.279052734375;
        stroke-dashoffset: -2825.279052734375;
    }
    to {
        fill-opacity: 1;
        stroke-dashoffset: 2825.279052734375;
        stroke: black;
    }
}

#Eyebrows {
    stroke-width: .15rem;
    fill-opacity: 0;
    stroke-dasharray: 334.45965576171875;
    stroke-dashoffset: 334.45965576171875;
    animation: dashEyebrows 5s 0.4s forwards;
}

@keyframes dashEyebrows {
    from {
        stroke: #7644C3;
        stroke-dashoffset: 334.45965576171875;
        stroke-dashoffset: -334.45965576171875;
    }
    to {
        fill-opacity: 1;
        stroke-dashoffset: 334.45965576171875;
        stroke: black;
    }
}

#Neck {
    stroke-width: .15rem;
    fill-opacity: 0;
    stroke-dasharray: 863.0379638671875;
    stroke-dashoffset: 863.0379638671875;
    animation: dashNeck 5s 0.4s forwards;
}

@keyframes dashNeck {
    from {
        stroke: #7644C3;
        stroke-dashoffset: 863.0379638671875;
        stroke-dashoffset: -863.0379638671875;
    }
    to {
        fill-opacity: 1;
        stroke-dashoffset: 863.0379638671875;
        stroke: black;
    }
}

#Lens {
    stroke-width: .15rem;
    stroke-dasharray: 768.1332397460938;
    stroke-dashoffset: 768.1332397460938;
    fill-opacity: 0;
    animation: dashLens 5s 0.4s forwards;
}

@keyframes dashLens {
    from {
        stroke: #7644C3;
        stroke-dashoffset: 768.1332397460938;
        stroke-dashoffset: -768.1332397460938;
    }
    to {
        fill-opacity: 1;
        stroke-dashoffset: 768.1332397460938;
        stroke: black;
        fill-opacity: 1;
    }
}

#Black_part_1 {
    stroke-width: .15rem;
    stroke-dasharray: 88.43235778808594;
    stroke-dashoffset: 88.43235778808594;
    fill-opacity: 0;
    animation: dashBlack_part_1 5s 0.4s forwards;
}

@keyframes dashBlack_part_1 {
    from {
        stroke: #7644C3;
        stroke-dashoffset: 88.43235778808594;
        stroke-dashoffset: -88.43235778808594;
    }
    to {
        fill-opacity: 1;
        stroke-dashoffset: 88.43235778808594;
        stroke: black;
    }
}

#Black_part_2 {
    stroke-width: .15rem;
    stroke-dasharray: 298.1716003417969;
    stroke-dashoffset: 298.1716003417969;
    fill-opacity: 0;
    animation: dashBlack_part_2 5s 0.4s forwards;
}

@keyframes dashBlack_part_2 {
    from {
        stroke: #7644C3;
        stroke-dashoffset: 298.1716003417969;
        stroke-dashoffset: -298.1716003417969;
    }
    to {
        fill-opacity: 1;
        stroke-dashoffset: 298.1716003417969;
        stroke: black;
    }
}

#White_part {
    stroke-width: .15rem;
    stroke-dasharray: 299.6165466308594;
    stroke-dashoffset: 299.6165466308594;
    fill-opacity: 0;
    animation: dashWhite_part 5s 0.4s forwards;
}

@keyframes dashWhite_part {
    from {
        stroke: #7644C3;
        stroke-dashoffset: 299.6165466308594;
        stroke-dashoffset: -299.6165466308594;
    }
    to {
        fill-opacity: 1;
        stroke-dashoffset: 299.6165466308594;
        stroke: black;
    }
}

#Ear {
    stroke-dasharray: 492.46600341796875;
    stroke-dashoffset: 492.46600341796875;
    stroke-width: .15rem;
    fill-opacity: 0;
    animation: dashEar 5s 0.4s forwards;
}

@keyframes dashEar {
    from {
        stroke: #7644C3;
        stroke-dashoffset: 492.46600341796875;
        stroke-dashoffset: -492.46600341796875;
    }
    to {
        fill-opacity: 1;
        stroke-dashoffset: 492.46600341796875;
        stroke: black;
    }
}

#Shirt {
    stroke-dasharray: 1424.636474609375;
    stroke-dashoffset: 1424.636474609375;
    stroke-width: .15rem;
    fill-opacity: 0;
    animation: dashShirt 5s 0.4s forwards;
}

@keyframes dashShirt {
    from {
        stroke: #7644C3;
        stroke-dashoffset: 1424.636474609375;
        stroke-dashoffset: -1424.636474609375;
    }
    to {
        fill-opacity: 1;
        stroke-dashoffset: 1424.636474609375;
        stroke: black;
    }
}