body {

  font-family: futura;
  text-align: center;
  color: white;
}

.main {
  background-color: black;
  height: 100vh;
}

.projects {
  color: black;
}

.skills {
  color: black;
}

.contact {
  color: black;
}

.alink {
  display: inline;
  padding: 1em;
}

h1 {
  font-weight: lighter;
  letter-spacing: 2px;
}

h4 {
  letter-spacing: 2px;
}

h5 {
  padding: 0;
}

img {
  border: solid black;
}

svg {
  padding-top: 5%;
  width: 70%;
  height: 30%;
  position: relative;
  z-index: 2;
  padding-bottom: 10%;
}

hr {
  color: black;
  background-color: black;
}

a {
  text-decoration: none;
  color: grey;
}

.skill {
  /*border: solid red;*/
  color: black;
  display: inline-block;
  width: 20%;
}

li {
  padding-left: 0;
  text-align: left;
}

polyline {
  stroke: turquoise;
  stroke-width: 9;
  stroke-dasharray: 5000;
  stroke-dashoffset: 5000;
  animation: dash 5s linear infinite;
}

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

.flip-container {
	perspective: 1000px;
}

.flip-container:hover .flipper, .flip-container.hover .flipper {
	transform: rotateY(180deg);
}

.flip-container, .project-front, .project-back{
	width: 100%;
  height: 350px;
}

.flipper {
	transition: 0.8s;
	transform-style: preserve-3d;
	position: relative;
}

.project-front, .project-back {
  -webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

.project-front {
	z-index: 2;
	transform: rotateY(0deg);
}

.project-back {
	transform: rotateY(180deg);
}

@media (max-width: 450px) {
  svg {
     padding-top: 5%;
     width: 70%;
     position: relative;
     z-index: 2;
     padding-bottom: 10%;
  }

  img {
    width: 100%;
  }

.skill {
    display: flex;
    width: 100%;
  }
}