@import url("https://fonts.googleapis.com/css?family=KoHo");
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');
.head_in {
  text-align: center;
  position: top;
  width: 100%;
  color: white;
  background-color: gray;
  background: url("../imgs/jakob-owens-224352.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 100% 90%;
  height: 475px;
}
.page_wrapper {
  display: inline-block;
  background-color: RGBA(0,0,0,0);
  width: 100%;

}
body {
  background-color: rgb(8, 8, 8);
}
.aboutMe {
    font-size: 20px;
    color: white;
    font-family: "KoHo";
}
.lols {
  width: 50px;
  height: 50px;
  border: #000 1px solid;
}
.nav {
  display: inline-block;
  position: relative;
  right: 0px;
}
.nav-item {
  display: block;
  float: left;
}
.nav-link {
    color: RGBA(255, 115, 32, 1);
    display: inline;
    padding: 0;
    text-decoration: underline;
}
.nav-link:hover {
  color: #FFF;
}
.headers {
  width: 100%;
  font-size: 36px;
}

.side1, .side2 {
  width: 50%;
  display: inline;
}
.side2 {

  margin-left: -7px;
}
.side1 {
  color: RGBA(255, 115, 32, 1);
}
h2 {
  font-size: 1rem;
}
.footerImg {
  margin: auto;
  border-radius: 50%;
  position: relative;
}
.personalPic {
  border-radius: 50%;
  width: 8%;
  border: 2px white solid;
  display: block;
  margin: auto;
}
.mySig {
  width: 78px;
  display: block;
  margin: auto;
}
.container {
    background-color: transparent;
    display: inline;
    align-items: center;
    justify-content: center;
    min-height: 0vh;
}

svg {
    max-width: 45rem;
    width: 100%;
    height: auto;
    fill: none;
    stroke: white;
    stroke-width: 4;
}

tspan > tspan {
    stroke-dasharray: 1500;
    stroke-dashoffset: -1500;
}

    tspan > tspan:nth-of-type(1) {
        animation: draw 300ms 150ms forwards;
    }

    tspan > tspan:nth-of-type(2) {
        animation: draw 300ms 300ms forwards;
    }

    tspan > tspan:nth-of-type(3) {
        animation: draw 300ms 450ms forwards;
    }

    tspan > tspan:nth-of-type(4) {
        animation: draw 300ms 600ms forwards;
    }

    tspan > tspan:nth-of-type(5) {
        animation: draw 300ms 750ms forwards;
    }

    tspan > tspan:nth-of-type(6) {
        animation: draw 300ms 900ms forwards;
    }

    tspan > tspan:nth-of-type(7) {
        animation: draw 300ms 1050ms forwards;
    }

    tspan > tspan:nth-of-type(8) {
        animation: draw 300ms 1200ms forwards;
    }

    tspan > tspan:nth-of-type(9) {
        animation: draw 300ms 1350ms forwards;
    }

    tspan > tspan:nth-of-type(10) {
        animation: draw 300ms 1500ms forwards;
    }

    tspan > tspan:nth-of-type(11) {
        animation: draw 300ms 1650ms forwards;
    }
		
	
	


@keyframes draw {
	
	100% {
		stroke-dashoffset: 0;
	}
	
}
/* PROJECTS PAGE */


.card {
  width: 100%;
  height: auto;
  position: relative;
  display: block;
  flex-direction: row;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: .25rem;
}
.card .card-image .card-title a{
  color: transparent;
}
.card .card-image:hover .card-title a{
  color: black;
}
.card-image:hover img{
  opacity: .15;
  width: 100%;
}
.card .card-image {
  width: 100%;
}
.grid {
  line-height: 0;
  column-count:5;
  column-gap:0px;
}
@media (max-width: 1200px) {
  .grid {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  .grid {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  .grid {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  .grid {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}
.card .card-image:hover .card-title{
  color: black !important;
}

.card .card-image .card-title {
  color: transparent !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  max-width: 100% !important;
  padding: 24px!important;
}
/*Interests Page*/
.clipArt {
  border-radius: 50%;
  width: 15%;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
  background-color: #111;
}