body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  font-family: "Cabin sketch", cursive;
}

main {
  flex: 1 0 auto;
  background-image: url("../images/woodBackdrop.jpg");
  background-size: cover;
 
}

.flow-text {
  font-size: 18px;
}


#card {
  margin-top: 30px;
}

.card-title {
  font-size: 5vh;
}

h1 {
  margin-top: -10px;
  color: rgb(204, 202, 202);
  font-size: 6vh;
  animation: entry 2s forwards;
}

img {
  height: 40vh;
}

#wave1 {
  animation: chippy1 3s forwards;
}

#wave2 {
  animation: chippy2 4s forwards;
}

#wave3 {
  animation: chippy3 5s forwards;
}

#wave4 {
  margin: 5vh;
  animation: socially 6s forwards;
}

#work {
  font-size: 5vh;
  padding-top: 60px;
  padding-bottom: 20px;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  /* border-right: .15em solid orange; The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  animation: 
    typing 3.5s steps(45, end),
          .75s step-end infinite;
}

/* social media buttons */
.btn.social > :first-child,
.btn-large.social > :first-child,
.col.social > :first-child {
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.btn.social,
.btn-large.social,
.col.social {
  padding: 0 2rem 0 0;
}
.btn.social i,
.btn-large.social i,
.col.social i {
  padding: 0 1rem;
  margin-right: 1rem;
}
.btn.social-icon,
.btn-large.social-icon,
.col.social-icon {
  padding: 0;
}
.btn.social-icon i,
.btn-large.social-icon i,
.col.social-icon i {
  padding: 0 1rem;
  margin-right: 0;
}
.btn-large.social-icon {
  padding: 0 1rem;
}
.col.social {
  width: 100%;
  text-align: left;
}
.col.social i.fa-fw {
  width: 3.2rem;
}
.github {
  background-color: #444444;
  color: #fff !important;
  margin-bottom: 10px
}
.github i {
  color: #fff !important;
}
.github:hover {
  background-color: #5e5e5e !important;
}

.linkedin {
  background-color: #007bb6;
  color: #fff !important;
}
.linkedin i {
  color: #fff !important;
}
.linkedin:hover {
  background-color: #009de9 !important;
}



@keyframes entry {
  from {
    transform: translate(0px, 1000px);
  }
  to {
    transform: translate(0px, 0px)
  }
}

@keyframes chippy1 {
  from {
    transform: translate(0px, 1000px);
  }
  to {
    transform: translate(0px, 0px)
  }
}

@keyframes chippy2 {
  from {
    transform: translate(0px, 1000px);
  }
  to {
    transform: translate(0px, 0px)
  }
}

@keyframes chippy3 {
  from {
    transform: translate(0px, 1000px);
  }
  to {
    transform: translate(0px, 0px)
  }
}

@keyframes socially {
  from {
    transform: translate(0px, 1000px);
  }
  to {
    transform: translate(0px, 0px)
  }
}

@keyframes presenting {
  from {
    transform: translate(-1000px, 0px);
  }
  to {
    transform: translate(0px, 0px);
  }
}

/* The typing effect */
@keyframes typing {
  from { width: 0}
  to { width: 100%; overflow: hidden;}
}

@media screen and (min-width: 993px){
  .brand-logo {
    margin-left: 4vh;
  }
}