html {
    box-sizing: border-box;
    height: 100%;
    scroll-behavior: smooth;
}

body {
    background: linear-gradient(90deg, transparent 55%, #fcedd5 45%);
    height: 100%;
    margin: 0;
    position: relative;
}

.content_wrapper {
    flex: 1 0 auto;
}

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

.indexnav {
    position: fixed;
    right: 0;
    top: 40%;
    margin: 1rem;

}

.indexnav ul {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
	cursor: default;
}

.indexnav li {
	position: relative;
	display: block;
    margin: 1.2rem;
	width: 0.8rem;
	height: 0.8rem;
	cursor: pointer;
}

.indexnav li a {
	width: 100%;
	height: 100%;
    border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.795);
	text-indent: -999em;
	cursor: pointer;
	position: absolute;
}

.indexnav li a:hover {
    background-color: rgba(255, 166, 0, 0.5);
}

.indexnav ul li a,
.indexnav ul li a:before,
.indexnav ul li a:after {
	transition: all .3s;
}

.highlight {
    background-color: orange !important;
}

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;
}

.greeting_wrapper {
    font-family: 'Montserrat', sans-serif;
    width: 30%;
    top: 24%;
    left: 10%;
    float: left;
    position: fixed;
}

.greeting_wrapper .greeting {
    font-size: 1.2vw;
    margin-top: 1.3rem;
    line-height: 1.5;
    color: #969696;
}

.greeting_wrapper #name {
    font-family: 'Raleway', sans-serif;
    font-size: 5.5vw;
    font-weight: 700;
    letter-spacing: -2px;
    width: 7ch;
    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 */
    animation:
      typing 2s steps(40, end),
      blink-caret 1s step-end infinite;
    animation-delay: 1s;
}
  
  /* The typing effect */
  @keyframes typing {
    from { width: 0 }
    to { width: 80% }
  }
  
  /* The typewriter cursor effect */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange }
  }

.scrolldown {
    position: fixed;
    left: 10%;
    bottom: 1.5rem;
}

.scrolldown .svg_container {
    display: inline-block;
	position: relative;
	width: 100%;
	padding-bottom: 100%; 
	vertical-align: middle; 
	overflow: hidden; 
}

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

.project_wrapper {
    position: absolute;
    display: block;
    top: 27%;
    left: 50%;
    right: 10%;
    scroll-snap-type: y mandatory;
}

.project_wrapper img {
    position: relative;
    width: 90%;
}

.project_desc {
    position: relative;
    /* top: 10%; */
    padding-bottom: 35%;
    padding-left: 16%;
}

.project_title {
    position: relative;
    font-family: 'Raleway', sans-serif;
    font-size: 1.2vw;
    display: block;
    text-transform: uppercase;
    
}

.project_title:before {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    top: 2vw;
    width: 3vw;
    height: .3vh;
    background: #000;
    content: '';
}

.project_type {
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1vw;
    margin: 0 auto;
    padding-top: 0.5rem;
}

.footer {
    font-family: 'Montserrat', sans-serif;
    padding: 1rem;
    color: #969696;
    right: -20%;
    bottom: .55%;
    position: absolute;
    font-size: 1vw;
}

.greeting_wrapper .socialmedia_copy {
    position: fixed;
    margin-top: 2rem;
    margin-left: 0.2rem;
}

.greeting_wrapper .socialmedia_copy a {
	text-decoration: none;
	outline: none;
    border: 0;
    margin-right: 0.5rem;
}

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

.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;
}