body {
  margin: 0px auto;
  padding: 0px;
  text-align: center;
  width: 100%;
  font-family: 'Noto Sans SC', sans-serif;
  background-color: #fffff2;
  height: 100vh;
  overflow: hidden;
}

#header {
  top: 0;
  height: 80px;
  width:100%;
  opacity: .9;
  margin:0px auto;
  text-align:center;
  line-height:70px;
  position: fixed;
  background-color: #fffff2;
}

#header li {
 display:inline-block;
 margin:0 3% 0 3%;
 font-size:17px;
 color:#46494c;
 font-weight:bold;
 cursor:pointer;
 background-color: transparent;
}

#header li:hover {
  color: #fffff2;
}

.allsection {
  height: 100vh;
  overflow: scroll;
  scroll-snap-type: y mandatory;
}


.section {
  margin-top:100px;
  height:auto;
  width:100%;
  box-sizing:border-box;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

#home {
  height:500px;
  padding:150px;
  background-color:#46494c;
  color:#fffff2;
}

#about {
  padding:80px;
  background-color:#fffff2;
  color:#46494c;
}

#skills {
  padding:80px;
  background-color:#46494c;
  color:#fffff2;
}

img {
  max-width: 100%;
  height: auto;
}

#experience {
  padding:80px;
  background-color:#fffff2;
  color:#46494c;
}

#projects {
  padding:80px;
  background-color:#46494c;
  color:#fffff2;
}

#resume {
  padding:10px;
  background-color:#fffff2;
  color:#46494c;
}

#home h1 {
 font-size:40px;
}
#home p {
 font-size:20px;
}
#about p {
 font-size:20px;
}

#experience h2 {
  font-size: 20px;
}

#projects a:link {
  color: #6a6d6f;
  background-color: transparent;
  text-decoration: none;
}
#projects a:visited {
  color: #383a3c;
  background-color: transparent;
  text-decoration: none;
}
#projects a:hover {
  color: #46494c;
  background-color: transparent;
  text-decoration: underline;
}
#projects a:active {
  color: #6a6d6f;
  background-color: transparent;
  text-decoration: underline;
}

#resume a:link {
  color: #000000;
  background-color: transparent;
  text-decoration: none;
}
#resume a:visited {
  color: #ccccc1;
  background-color: transparent;
  text-decoration: none;
}
#resume a:hover {
  color: #e5e5d9;
  background-color: transparent;
  text-decoration: underline;
}
#resume a:active {
  color: #fffff2;
  background-color: transparent;
  text-decoration: underline;
}

/*blinking cursor*/

.blinking-cursor {
  font-weight: 100;
  font-size: 40px;
  color: #2E3D48;
  -webkit-animation: 1s blink step-end infinite;
  -moz-animation: 1s blink step-end infinite;
  -ms-animation: 1s blink step-end infinite;
  -o-animation: 1s blink step-end infinite;
  animation: 1s blink step-end infinite;
}

@keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: #fffff2;
  }
}

@-moz-keyframes blink {
  from, to {
    color: transparent;
  }
  50% {
    color: #fffff2;
  }
}

@-webkit-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: #fffff2;
  }
}

@-ms-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: #fffff2;
  }
}

@-o-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: #fffff2;
  }
}

.arrows {
	width: auto;
	height: auto;
	position: absolute;
	left: 50%;
	margin-left: -30px;
	bottom: 280px;
}

.arrows path {
	stroke: #ffffff;
	fill: transparent;
	stroke-width: 1px;
	animation: arrow 2s infinite;
	-webkit-animation: arrow 2s infinite;
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

.arrows path.a1 {
	animation-delay:-1s;
	-webkit-animation-delay:-1s;
}

.arrows path.a2 {
	animation-delay:-0.5s;
	-webkit-animation-delay:-0.5s;
}

.arrows path.a3 {
	animation-delay:0s;
	-webkit-animation-delay:0s;
}