body {
    margin-top: 0;
    margin-right: 0;
    height: auto;
}

.fade-in {
    opacity: 0;
    transform: translateY(10px);
}

a {
    text-decoration: none;
    color: #7e7e7e;
}

.link_a {
    /* color: #666; */
    box-shadow: inset 0 -10px 0 #F5DAAD;
    border-radius: 3px;
}

.link_a:hover {
    color: orange;
    box-shadow: inset 0 -22px 0 rgb(240, 240, 240);
    border-radius: 0;
}

.logo_container img {
	float: left;
    width: 3%;
    top: 8%;
    left: 10%;
	/* height: 100%; */
	/* margin: 10% 0 0 12%; */
	position: fixed;
}

.about_wrapper {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1vw;
    line-height: 150%;
    color: #969696;
    width: 30%;
    top: 25%;
    left: 10%;
    float: left;
    position: fixed;
}

.about_wrapper #name {
    font-family: 'Raleway', sans-serif;
    font-size: 5.5vw;
    font-weight: 700;
    letter-spacing: -2px;
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .1em solid orange; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    /* margin: 0.5rem; Gives that scrolling effect as the typing happens */
    animation: 
      typing 2s steps(30, end),
      blink-caret .5s step-end infinite;
}
  
  /* The typing effect */
  @keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }
  
  /* The typewriter cursor effect */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange }
  }

.scrolldown {
    position: fixed;
    margin-left: 10%;
    bottom: 2rem;
}

#circle--shape {
    animation: animateShape 1.6s ease-in-out infinite;
}
  
  
  @keyframes animateShape {
    50% { cy: 80; opacity: .1 }
  }
  
    
  @keyframes animateHeight {
    50% { height: 105px }
}

#profile_pic img{
    float: right;
    height: 100vh;
    max-width: 50%;
    top: 0;
    margin: 0;
}

.greeting_wrapper .socialmedia_copy {
    position: fixed;
    /* margin-left: 10%; */
    bottom: 3%;
}

.greeting_wrapper .socialmedia_copy a {
	text-decoration: none;
	outline: none;
    border: 0;
}

.greeting_wrapper .socialmedia_copy a svg {
	fill: #a6a6a9;
	stroke: #000;
	stroke-width: 10;
	stroke-opacity: 0;
}

.greeting_wrapper .socialmedia_copy a svg #gmail:hover {
	fill: #D14836;
}

.greeting_wrapper .socialmedia_copy a svg #linkedin:hover {
	fill: #0077B5;
}

.greeting_wrapper .socialmedia_copy a svg #github:hover {
	fill: #181717;
	stroke-width: 10;
}

.greeting_wrapper .socialmedia_copy a svg #instagram:hover {
	fill: #E4405F;
	stroke-width: 10;
}


.greeting_wrapper .socialmedia_copy a svg path,
.greeting_wrapper .socialmedia_copy a svg path:after,
.greeting_wrapper .socialmedia_copy a svg path:before {
    transition: all .3s;
}

.footer {
    font-family: 'Montserrat', sans-serif;
    position: fixed;
    right: 3%;
    bottom: 4%;
    color: #fff;
    font-size: 1vw;
}

.proj_overview {
    background-color: #fafafb;
    width: 100%;
    /* font-size: 1vw; */
}

.proj_overview_wrapper {
    width: 50%;
    padding-top: 20px;
    margin: 0 auto;
    padding-bottom: 40px;
}

.proj_overview_title {
    color: #AA4B6B;
    font-weight: 700;
    margin-top: 20px;
}

.latest_proj_header {
	text-align: center;
	margin-top: 100px;
    margin-bottom: 40px;
}

.proj_slide img {
    width: 68%;
    display: block;
    margin: auto;
    margin-top: 50px;
}