#header{
	padding-top: 60px;
	position: fixed;
	text-align: center;
    margin-top: 0px;
    height:800vh;

}

.image-container{
	width:60%;
	text-align: center;
	position: relative;
}

#i-am-aim {
	font-size: 12vw;
	font-family: 'Noto Sans', sans-serif;
	text-align: center;
	position: fixed;
	display:block;
	animation: myRule 2s forwards;
	margin-bottom: 0px;
    margin-top: 68px;
    height: 200vw;
    width:100%;

}


a{
 text-decoration: none;
}

a:link{
	text-decoration: none;
	color:black;
}

a:visited{
	text-decoration: none;
	color:black;
}
a:hover{
	text-decoration: none;
	color:black;
}
a:active{
	text-decoration: none;
	color:black;
}


@keyframes myRule{ 

	 from { opacity: 1.0;}
     to { opacity: 0.03; }

}

body{
	text-align: center;
	overflow-x: hidden;
}

.center-page{
	text-align: center;
	display: inline-block;
	position: relative;
	padding-bottom: 40px;
	width:50vw;
}
#resume-container{
	width:80vw;
/*	display: inline-block;
	text-align: center;*/
	margin-left:32vw;

} 

#resume-text-1 {
        text-align: left;
		font-family: 'Noto Sans', sans-serif;
		text-align: left;
		font-size:12px;
		width:30vw;
		margin-top:3vw;
		margin-right:2vw;
		display:relative;
		float:left;
}

#resume-text-2 {
        text-align: left;
		font-family: 'Noto Sans', sans-serif;
		text-align: left;
		font-size:12px;
		width:30vw;
		margin-top:3vw;
		margin-right:2vw;
		display:relative;
		float:left;
}


img{
	width: 100%

}

#menu{
	z-index: 100;
	position: fixed;
	float:right;
	top:40px;
	right:40px;
	display: block;
	width:25px;
}

.logo{
 z-index: 100;
  position: fixed;
  float:left;
  top: 40px;
  left: 40px;
  display: block;
  width:50px;
  animation: logo-pop 1s ease-in-out infinite;
  animation-play-state: paused;
}

.logo:hover{
  animation-play-state: running;

}

@keyframes logo-pop{
  100% {
  	width: 50px;
  }
    50% {
  	width: 60px;
  }
 100% {
  	width: 50px;
  }

}



body{
	-webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

@media (min-width: 650px) and (max-width: 1100px){
#i-am-aim{ font-size:13vw; 
height: 15vw;}
#header{height: 47vw;}
.center-page{width:70%;}
.project-title-page{font-size: 0.8em;}
.button-container{height:20vh;}
.button-text{top: 60px;}
#resume-container{
	width:100%;
	text-align: center;
} 
#resume-text-1 {
          	text-align: left;
	font-family: 'Noto Sans', sans-serif;
		text-align: left;
		font-size:12px;
		width:50vw;
		margin-top:5.5vw;
		display: relative;
	float:left;
}

#resume-text-2 {
        text-align: left;
		font-family: 'Noto Sans', sans-serif;
		text-align: left;
		font-size:12px;
		width:50vw;
		margin-top:0vw;
		margin-right:2vw;
		display:relative;
		float:left;

}


.image-container{
	width:50%;
	text-align: center;
	position: relative;
}





}

@media (min-width: 300px) and (max-width: 650px){
#i-am-aim{ font-size:12vw;
    height: 14vw; }
#header{height: 80vw;}
.center-page{width:90%;
	padding-bottom: 20px;}
.project-title-page{font-size: 0.8em;
		padding-top: 80px;}
.button-container{height:15vh;}
.button-text{top: 40px;}
#logo{position: fixed;	width:50px;}
#menu{position: fixed;}
#Footer{top:10px;}
#resume-container{
	width:100%;
	text-align: center;
	margin-left:27.8vw;
} 
#resume-text-1 {
        text-align: left;
		font-family: 'Noto Sans', sans-serif;
		text-align: left;
		font-size:12px;
		width:50vw;
		margin-top:20vw;
		display: relative;
		
}

#resume-text-2 {
        text-align: left;
		font-family: 'Noto Sans', sans-serif;
		text-align: left;
		font-size:12px;
		width:50vw;
		margin-top:0vw;
		display:relative;

}

.image-container{
	width:100%;
	text-align: center;
	position: relative;
}



}

@media screen and (max-width: 500px) {
	   overflow-x: hidden;
	   
	}