body{
	margin: 0 auto;
	
}

.nav-open .nav{
	transform: translateX(0);
}

.nav-open 
.main-body {
	 transform: translateX(350px);
	 width: calc(100% - 350px);
}

.nav-links-container {
	box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.15);
}

.nav-link{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 25px;
	text-decoration: none;
	color: #dddddd;
}

.nav-text{
	font-size: 22px;
	font-family: 'Georgia', serif;
	font-weight: 500;
}

.nav-link:hover,
.nav-close:hover, .nav-home:hover{
	background: rgba(255,255, 255, 0.05);
}

.nav-text-ak-cube-solver, .nav-text-ak-poker, .nav-text-prec-calculator, .nav-text-maze, .nav-text-quiz, .nav-text-calorie{
	margin-left: 50px;
		font-size: 18px;
		overflow: hidden;
		white-space: wrap;
		-webkit-box-decoration-break: clone;
  		box-decoration-break: clone;
}

.main-body{
	transition: transform 0.5s;
	/*background-color: #eeeeee;*/
}

.nav{
	width: 350px;
	height: 100vh;
	position: fixed;
	background: #333333;

	top: 0;
	
	overflow: hidden;
	
}

.welcome-text-header {
	
	
	
	padding: 15px 25px;
	text-decoration: none;
	font-size: 25px;
	display: flex;
	justify-content: space-between;
	font-family: 'Georgia', sans-serif;

}

.welcome-text-header:not(.start-anim){
	margin-left: 350px;
}

.start-anim.welcome-text-header{
	margin-left: 0px;
}

.welcome-screen-links:not(.start-anim){
	margin-left: 350px;
}

.start-anim.welcome-screen-links{
	margin-left: 0px;
}

.github-link:not(.start-anim){
	margin-left: 350px;
}

.comments_header_title:not(.start-anim){
	margin-left: 350px;
}

.comments:not(.start-anim){
	margin-left: 350px;
}

.start-anim.github-link{
	margin-left: 0px;
}

.nav.start-anim{
	width: 350px;
	height: 100vh;
	position: fixed;
	top: 0;
	/*left: 50px;*/
	background: #333333;
	
	/*animation: circle 0.5s 1;
  
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);*/

	/*transform: translateX(-350px);
	transition: transform 0.5s;*/
	overflow: hidden;
	
}

@keyframes circle {
	0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
	100% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);}
  }

.nav-close, .nav-home{
	background: none;
	border: none;
	display: flex;
	align-items: center;
	/*margin-left: auto;*/
	padding: 15px 25px;
	color: #dddddd;
	cursor: pointer;
}

.first-row{

	overflow:auto;
}

.nav-close-div{
	float: right;
	margin-left: auto;
}



.welcome-screen-links {
	
	margin: auto;
	margin-left: 350px;
	
	padding: 15px 25px;
	text-decoration: none;
	font-size: 20px;
	display: flex;
	justify-content: space-between;
	font-family: 'Georgia', sans-serif;

}

.android_apps_main{
	height: 100%;
}

.github-link{
	margin: auto;
	margin-left: 350px;
	
	padding: 15px 25px;
	text-decoration: none;
	font-size: 20px;
	display: flex;
	justify-content: space-between;
	font-family: 'Georgia', sans-serif;
	color: green;
}

.cube-solver-link, .poker-calc-link, .infinite-calc-link, .github-link, .maze-link, .quiz-link, .calorie-link {
	text-decoration: none;

}

.github-link {
	padding-top: 50px;
	text-decoration: none;

}

.cube-solver-link:hover, .poker-calc-link:hover, .infinite-calc-link:hover, .github-link:hover, .maze-link:hover, .quiz-link:hover, .calorie-link:hover{
	color: red;
}

.welcome-text, .cube-solver-link-text, .poker-calc-text, .infinite-calc-text, .github-link-text, .maze-text, .quiz-text, .calorie-text{
	font-family: 'Georgia', sans-serif;
}

.poker_calc, .infinite_calc , .calorie{
  display: flex;
}

.poker_calc .poker_calc_img,  .infinite_calc .infinite_calc_img,.maze_img,.quiz_img, .calorie_img{
	flex: 20%;
    padding: 5px;
}



.android_apps_title, .about_me_title, .cpp_tutorial_title, .cpp_apps_title, .contact_title{
	/*left: 150px;
  right: 150px;*/
  margin: auto;
	margin-left: 350px;
	
	padding: 15px 25px;
  z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  margin-left: 8px;
  margin-right: 8px;
    font-size: 35px;
	font-family: 'Georgia', serif;
	color: #333333;
}

.about_me_title_main:not(.start-anim), .cpp_tutorial_title_main:not(.start-anim), .cpp_apps_title_main:not(.start-anim), .contact_title_main:not(.start-anim){
	margin-left: 350px;
}

.comments_header_title.start-anim, .comments.start-anim{
	margin-left: 0px;
}

.about_me_title_main.start-anim, .cpp_tutorial_title_main.start-anim, .cpp_apps_title_main.start-anim, .contact_title_main.start-anim{
	margin-left: 0px;
	padding-left: 150px;
}

.cpp_tutorial_video_header:not(.start-anim), .cpp_tutorial_video_1:not(.start-anim), .cpp_tutorial_video_2:not(.start-anim), .cpp_tutorial_video_desc:not(.start-anim){
	margin-left: 350px;
}

.cpp_tutorial_video_header.start-anim, .cpp_tutorial_video_1.start-anim, .cpp_tutorial_video_2.start-anim, .cpp_tutorial_video_desc.start-anim{
	margin-left: 0px;
}

.about_me_description:not(.start-anim){
	margin-left: 350px;
}

.about_me_description.start-anim{
	margin-left: 0px;
}
.email_address_main:not(.start-anim){
	margin-left: 350px;
}

.email_address_main.start-anim{
	margin-left: 0px;
}


.android_apps, .about_me, .cpp_tutorial, .cpp_apps, .cpp_apps, .contact{
	display: flex;
}

.android_apps_main, .cpp_tutorial_videos, .about_me_main, .cpp_tutorial_main, .cpp_apps_main, .cpp_apps_main, .contact_main{
	height: auto;
	min-height: 100% !important;
}

/*.android_apps, .about_me, .cpp_tutorial, .cpp_apps, .contact {
  margin: auto;
  width: 50%;
  padding: 10px;
	
}*/
/*.cube_solver_description{
		display: flex;
	width: 100%-450px;
}*/




.main-body{
overflow-x: scroll;
}

.main{
	background-color: #eeeeee;
}

.hr-class{
	height:1px;
	color:black;
	background-color:black
}

.nav-open.hr-class{
transform: translateX(350px);
	 width: calc(100% - 350px);
	 height:1px;
	color:black;
	background-color:black
}

/*:not(.nav-open).hr-class{
	
	}
	*/

.cube_solver_main, .poker_calc_main, .infinite_calc_main, .maze_main, .quiz_main, .calorie_main{
	background-image: url("android_background.png");
  background-repeat: repeat-y repeat-x;
	/*background-color: #cccccc;*/
}

.cube_solver_description, .poker_calc_description, .infinite_calc_description, .maze_description, .quiz_description, .calorie_description{
	margin: auto;
	margin-left: 350px;
	
	padding: 15px 25px;
  font-size: 20px;
  z-index: 100;
  font-family: 'Georgia', serif;
}
 
.cube_solver_description:not(.start-anim), .poker_calc_description:not(.start-anim), .infinite_calc_description:not(.start-anim), .maze_description:not(.start-anim), .quiz_description:not(.start-anim), .calorie_description:not(.start-anim){
	margin-left: 350px;

}
.cube_solver_description.start-anim, .poker_calc_description.start-anim, .infinite_calc_description.start-anim, .maze_description.start-anim, .quiz_description.start-anim, .calorie_description.start-anim{
	margin-left: 0px;

}

 .cube_solver_description_h1, .poker_calc_description_h1, .infinite_calc_description_h1, .maze_description_h1, .quiz_description_h1, .calorie_description_h1{
  text-align: justify;
  text-justify: inter-word;
}

.about_me_description, .email_address_main{
	margin: auto;
	margin-left: 350px;
	
	padding: 15px 25px;
  font-size: 20px;
  z-index: 100;
  font-family: 'Georgia', serif;
}

.about_me_description_h1, .email_address_a{
	text-align: justify;
  	text-justify: inter-word;
}

/*.email_address_main{
	margin: auto;
}*/

.email_address_h{
	margin: auto;
}

.email_address, .email_address_a{
	font-style: normal;
	text-decoration: none;
}
.email_address_a:hover{
	color: red;
}

.cube_solver_features, .poker_calc_features, .infinite_calc_features, .maze_features, .calorie_features{
	margin: auto;
	margin-left: 350px;
	
	padding: 15px 25px;
  font-size: 20px;
  
  z-index: 100;
  font-family: 'Georgia', serif;
}

.cube_solver_features:not(.start-anim), .poker_calc_features:not(.start-anim), .infinite_calc_features:not(.start-anim), .maze_features:not(.start-anim), .calorie_features:not(.start-anim){
	margin-left: 350px;
}

.cube_solver_features.start-anim, .poker_calc_features.start-anim, .infinite_calc_features.start-anim, .maze_features.start-anim, .calorie_features.start-anim{
	margin-left: 0px;
}

 .cube_solver_features_elements, .poker_calc_features_elements, .infinite_calc_features_elements, .maze_features_elements, .calorie_features_elements{
  text-align: justify;
  text-justify: inter-word;
  margin: auto;
  margin-left: 350px;
  
  padding: 15px 25px;
  font-size: 15px;
  z-index: 100;
  font-family: 'Georgia', serif;
}

.cube_solver_features_elements:not(.start-anim), .poker_calc_features_elements:not(.start-anim), .infinite_calc_features_elements:not(.start-anim), .maze_features_elements:not(.start-anim), .calorie_features_elements:not(.start-anim){
	margin-left: 350px;
}

.cube_solver_features_elements.start-anim, .poker_calc_features_elements.start-anim, .infinite_calc_features_elements.start-anim, .maze_features_elements.start-anim, .calorie_features_elements.start-anim{
	margin-left: 0px;
}

.cube_solver_title_main, .poker_calc_title_main, .infinite_calc_title_main, .maze_title_main, .quiz_title_main, .calorie_title_main{
		display: flex;
		/*background-color: rgba(147, 201, 251,0.5);*/
		background-image: linear-gradient(to right, rgba(22, 118, 208,0.0) , rgba(22, 118, 208,0.5), rgb(200, 151, 200));
/*box-shadow: 0px -2px 5px rgba(30, 133, 230, 0.4),0px 2px 5px rgba(30, 133, 230, 0.4);*/
margin: auto;
	margin-left: 350px;
	
	padding: 15px 25px;
border-top: 1px solid blue;
	 border-bottom: 1px solid blue;
}

.cube_solver_title_main:not(.start-anim), .poker_calc_title_main:not(.start-anim), .infinite_calc_title_main:not(.start-anim), .maze_title_main:not(.start-anim), .quiz_title_main:not(.start-anim), .calorie_title_main:not(.start-anim){
margin-left: 350px;
}

.cube_solver_title_main.start-anim, .poker_calc_title_main.start-anim, .infinite_calc_title_main.start-anim, .maze_title_main.start-anim, .quiz_title_main.start-anim, .calorie_title_main.start-anim{
	margin-left: 0px;
	}

.comments_header_title{
	display: flex;
	margin: auto;
	margin-left: 350px;
	
	padding: 15px 25px;
	margin-top: 30px;
}

.comments_header_main{
	margin-top: 50px;

}


.android_apps_title_main, .about_me_title_main, .cpp_tutorial_title_main, .cpp_apps_title_main, .contact_title_main{
		display: flex;
		/*background-color: rgba(147, 201, 251,0.5);*/
		background-image: linear-gradient(to right, rgba(22, 118, 208,0.0) , rgba(22, 118, 208,0.5), rgb(200, 151, 200));
/*box-shadow: 0px -2px 5px rgba(30, 133, 230, 0.4),0px 2px 5px rgba(30, 133, 230, 0.4);*/
margin: auto;
	margin-left: 350px;
	
	/*padding: 15px 25px;*/
border-top: 1px solid blue;
border-bottom: 1px solid blue;

}

.cube_solver_title, .poker_calc_title, .comments_header_title, .infinite_calc_title, .maze_title, .quiz_title, .calorie_title{
	padding: 15px 25px;

}

.cube_solver_title_h1, .poker_calc_title_h1, .comments_header_title_h1, .infinite_calc_title_h1, .maze_title_h1, .quiz_title_h1, .calorie_title_h1{
  left: 150px;
  right: 150px;
  z-index: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  margin-left: 8px;
  margin-right: 8px;
    font-size: 25px;
	font-family: 'Georgia', serif;
	color: #333333;
}

/*.comments_header_title_h1{
font-weight: bold;
}*/



.cube_solver, .poker_calc, .infinite_calc, .maze, .quiz, .calorie{
  display: flex;
  margin: auto;
	margin-left: 350px;
	
}

.cube_solver:not(.start-anim), .poker_calc:not(.start-anim), .infinite_calc:not(.start-anim), .maze:not(.start-anim), .quiz:not(.start-anim), .calorie:not(.start-anim){
	  margin-left: 350px;
	  
  }

  .cube_solver.start-anim, .poker_calc.start-anim, .infinite_calc.start-anim, .maze.start-anim, .quiz.start-anim, .calorie.start-anim{
	  margin-left: 0px;
	  
  }

.cube_solver .cube_solver_img, .poker_calc .poker_calc_img, .infinite_calc .infinite_calc_img, .maze .maze_img, .quiz .quiz_img, .calorie .calorie_img{
	flex: 16%;
    padding: 5px;
}

.cube_solver_features, .poker_calc_features, .infinite_calc_features, .maze_features, .calorie_features{
	margin-top: 20px;
	margin-bottom: -5px;
}

#toggleNavButton{
	position: fixed;
}

.cube_solver_video, .poker_calc_video, .infinite_calc_video, .maze_video, .quiz_video, .calorie_video{
	display: flex;
}

.cube_solver_video:not(.start-anim), .poker_calc_video:not(.start-anim), .infinite_calc_video:not(.start-anim), .maze_video:not(.start-anim), .quiz_video:not(.start-anim), .calorie_video:not(.start-anim){
	margin-left: 350px;
}

.cube_solver_video.start-anim, .poker_calc_video.start-anim, .infinite_calc_video.start-anim, .maze_video.start-anim, .quiz_video.start-anim, .calorie_video.start-anim{
	margin-left: 0px;
}

.cube_solver_video, .poker_calc_video, .infinite_calc_video, .maze_video, .quiz_video, .calorie_video{
	margin: auto;
	margin-left: 350px;
	
	padding: 15px 25px;
  padding-bottom: 0px;
}

.cpp_tutorial_video_1, .cpp_tutorial_video_2{
	margin: auto;
	margin-left: 350px;
	
	padding: 15px 25px;
  padding-bottom: 0px;
}

.cube_solver_video_desc, .poker_calc_video_desc, .infinite_calc_video_desc, .maze_video_desc, .quiz_video_desc, .calorie_video_desc{
	margin: auto;
	margin-left: 350px;
	
	padding: 15px 25px;
  padding-bottom: 30px;
    font-family: 'Assistant', sans-serif;
	font-style: italic;

}

.cube_solver_video_desc:not(.start-anim), .poker_calc_video_desc:not(.start-anim), .infinite_calc_video_desc:not(.start-anim), .maze_video_desc:not(.start-anim), .quiz_video_desc:not(.start-anim), .calorie_video_desc:not(.start-anim){
	margin-left: 350px;
}

.cube_solver_video_desc.start-anim, .poker_calc_video_desc.start-anim, .infinite_calc_video_desc.start-anim, .maze_video_desc.start-anim, .quiz_video_desc.start-anim, .calorie_video_desc.start-anim{
	margin-left: 0px;
}

.cpp_tutorial_video_desc{
	/*margin: auto;*/
	margin: auto;
	margin-left: 350px;
	
	padding: 15px 25px;
  padding-bottom: 30px;
    font-family: 'Assistant', sans-serif;
	font-style: italic;
}

.cpp_tutorial_video_header{
	/*margin: auto;*/
	margin: auto;
	margin-left: 350px;
	
	padding: 15px 25px;
  padding-bottom: 30px;
  padding-top: 30px;
    font-family: 'Assistant', sans-serif;
}

.cpp_tutorial_video_header_github{

	margin-top: 20px;
}

.cube_solver_link_a, .poker_calc_link_a, .infinite_calc_link_a, .maze_link_a, .quiz_link_a, .calorie_link_a{
	text-decoration:none;
	margin: auto;
	margin: auto;
	margin-left: 350px;
	
	padding: 15px 25px;
  padding-bottom: 30px;
  padding-top: 20px;
    font-family: 'Assistant', sans-serif;
	color: blue;
	font-size: 20px;
	 text-transform: uppercase; 
}

.cube_solver_link, .poker_calc_link, .infinite_calc_link, .maze_link, .quiz_link, .calorie_link{
	display: flex;
  padding: 10px;
  padding-bottom: 0px;
}

.cube_solver_link_a:hover, .poker_calc_link_a:hover, .infinite_calc_link_a:hover, .maze_link_a:hover, .quiz_link_a:hover, .calorie_link_a:hover{
	color:red;
}