body
{
	padding: 0px;
	margin: 0;
	background-color: #12161a;
	display: flex;
}

nav
{
	background-color: #282828;
	height: auto;
	display: flex;
}

/*Navigation elements*/

/* Dropdown Button */
.dropbtn {
	background-color: transparent;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: transparent;}

img.logo
{
	width: 100px;
}

ul.navigation-list
{
	height: auto;
	border-right: 8px solid black;
	padding-top: 8px;
	padding-bottom: 10px;
	padding-left: 0;
	margin: auto;
	background-color: #282828;
	text-align: left;


	overflow: hidden; /* Ensures the content is not revealed until the animation */
	white-space: nowrap; /* Keeps the content on a single line */
	margin: 0 auto; /* Gives that scrolling effect as the typing happens */
	animation: typing 2.8s steps(50, end);
}

ul.navigation-list li
{
	display: flex;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	margin: auto;
}

ul.navigation-list li:hover
{
	animation: pop 0.5s steps(100, end);
	background-color: #464646;
	cursor: pointer;
}

ul.navigation-list li a
{
	font-family: 'VT323', monospace;
    font-size: 40px;
    color: #ffa700;
    text-decoration: none;
}

div.dropdown
{
	position: relative;
	display: inline-block;
}

div.dropdown-content
{
	display: none;
	position: absolute;
	left: 185px;
	background-color: #343434;
	min-width: 160px;
	z-index: 1;
}

div.dropdown-content a
{
	display: block;
}

div.dropdown-content a p
{
	padding: 10px;
	margin: 0;
	font-size: 25px;
	color: #ac853c;
}

.dropdown-content a:hover {background-color: #ddd; cursor: pointer;}

.dropdown:hover .dropdown-content {display: block; cursor: pointer;}


/******Conatiner styling******/

/*home-content related styling*/
div.home-content
{
	padding-left: 20px;
	padding-right: 20px;
	display: inline;
	border-left: 8px solid #12161a;
	width: 100%;
	font-family: 'Share Tech Mono', monospace;
	background-color: #222832;
	border-left: none;
	border-bottom: none;

	overflow: hidden; /* Ensures the content is not revealed until the animation */
	white-space: nowrap; /* Keeps the content on a single line */
	margin: 0 auto; /* Gives that scrolling effect as the typing happens */
	animation: reveal 1.5s steps(160, end);
}

div.home-content div
{
	padding-bottom: 30px;
}

div.home-content h1
{
	color: #dfdfdf;
	font-weight: bold;
	font-size: 40px;
}

div.home-content h3
{
	font-family: 'VT323', monospace;
	font-size: 25px;
	margin: 10px auto;
	color: #ffa700;
	text-shadow: 0px 1px 0px black;
}

div.home-content p
{
	color: #dfdfdf;
	white-space: nowrap;
	padding-top: 2px;
	padding-bottom: 2px;
	margin: auto;
	font-size: 17px;
}

div.descDiv
{
	padding: 10px;
	border: 4px dashed #ffa700;
	border-right: none;
	border-left: none;
	margin: auto;
}

div.descDiv p
{
	word-wrap: break-word;
}

a.name
{
	font-family: 'VT323', monospace;
	font-size: 20px;
	color: #ffa700;
	text-shadow: 0px 1px 0px black;
}

div.currentDiv
{
	margin-top: 10px;
	padding: 10px;
	border: 4px dashed #ffa700;
	border-right: none;
	border-left: none;
	border-top: none;
}

div.currentDiv p
{
	word-wrap: break-word;
}

div.bottomDivWrapper
{
	display: flex;
}

div.externalDiv
{
	width: 50%;
	text-align: center;
	padding: 10px;
	border: 4px dashed #ffa700;
	border-right: none;
	border-left: none;
	border-top: none;
	word-wrap: break-word;
}

div.externalDiv p
{
	word-wrap: break-word;
}

div.icons
{
	padding: 5px;
	display: inline-flex;
}

div.icons img
{
	padding-right: 20px;
}

/*contact relevent styling*/
div.contact-content
{
	display: none;
	border-left: 4px solid #ffa700;
	background-color: orange;
	width: 100%;
	font-family: 'Share Tech Mono', monospace;
	background-color: #222832;
	border-left: none;
	border-bottom: none;

	overflow: hidden; /* Ensures the content is not revealed until the animation */
	white-space: nowrap; /* Keeps the content on a single line */
	margin: 0 auto; /* Gives that scrolling effect as the typing happens */
	animation: reveal 1.5s steps(160, end);
}

div.contactContainer
{
	margin: auto;
	text-align: center;
	padding: 10px;
}

div.contact-content h1
{
	padding-left: 20px;
	margin: 20px;
	padding-bottom: 20px;
	color: #dfdfdf;
	border-bottom: 5px dashed #ffa700;
}

div.contact-content h2
{
	font-family: 'VT323', monospace;
	font-size: 25px;
	margin: 10px auto;
	color: #ffa700;
	text-shadow: 0px 1px 0px black;
}

div.contact-content p
{
	color: #dfdfdf;
	white-space: nowrap;
	padding-top: 2px;
	padding-bottom: 2px;
	margin: auto;
	font-size: 17px;
}

div.contact-content ul
{
	color: #dfdfdf;
}

div.contact-content div
{
	margin: auto;
	display: block;
	height: auto;
}

div.contact-content form
{
	display: inline-block;
	width: 500px;
	text-align: center;
	margin: auto;
	border: 5px dashed #ffa700;
}

form.contactForm p
{
	padding-top: 20px;
}

div.descContact
{
	text-align: center;
}

form.contactForm input
{
	background-color: #222832;
	font-size: 22px;
	border: 2px solid #ffa700;
	font-family: 'Share Tech Mono', monospace;
	color: #dfdfdf;
}

input.submitContact
{
	margin-top: 10px;
	padding: 20px;
	margin-bottom: 10px;
	border-color: #ffa700;
	cursor: pointer;
}

input.undoContact
{
	margin-top: 10px;
	padding: 20px;
	margin-bottom: 10px;
	border-color: #ffa700;
	cursor: pointer;
}

form.contactForm textarea
{
	resize: none;
	width: 300px;
	height: 100px;
	background-color: #222832;
	font-size: 22px;
	border: 2px solid #ffa700;
	font-family: 'Share Tech Mono', monospace;
	color: #dfdfdf;
}

/*project content styling*/
div.project-content
{
	display: none;
	border-left: 4px solid #222832;
	background-color: #222832;
	width: 100%;

	overflow: hidden; /* Ensures the content is not revealed until the animation */
	white-space: nowrap; /* Keeps the content on a single line */
	margin: 0 auto; /* Gives that scrolling effect as the typing happens */
	animation: reveal 1.5s steps(160, end);
}

div.project-content p
{
	color: #ffa700;
	font-family: 'VT323', monospace;
	white-space: nowrap;
	padding-left: 10px;
	padding-top: 2px;
	padding-bottom: 2px;
	margin: auto;
	font-size: 30px;
}

/*about content styling |resume*/
div.about-content
{
	display: none;
	border-left: 4px solid black;
	width: 100%;
	background-color: #222832;
	border-left: 8px solid #ffa700;
	width: 100%;
	font-family: 'Share Tech Mono', monospace;
	background-color: #3a4c66;
	border-left: none;
	border-bottom: none;

	overflow: hidden; /* Ensures the content is not revealed until the animation */
	white-space: nowrap; /* Keeps the content on a single line */
	margin: 0 auto; /* Gives that scrolling effect as the typing happens */
	animation: reveal 1.5s steps(160, end);
}

div.about-content h1
{
	padding-left: 20px;
	margin: 20px;
	padding-bottom: 20px;
	color: #dfdfdf;
	border-bottom: 5px dashed #ffa700;
}

div.about-content p
{
	color: #dfdfdf;
	white-space: nowrap;
	padding-top: 2px;
	padding-bottom: 2px;
	margin: auto;
	font-size: 17px;
}

div.about-content h2
{
	font-family: 'VT323', monospace;
	font-size: 25px;
	margin: 10px auto;
	color: #ffa700;
	text-shadow: 0px 1px 0px black;
}

div.about-content div
{
	margin: 20px;
	padding: 30px;
	border-bottom: 5px dashed #ffa700;
}

div.educationDiv
{
	margin: 0;
}


div.casesDiv ul
{
	color: #dfdfdf;
}

div.computerDiv
{

}

div.future-content
{
	display: none;
	border-left: 4px solid #ffa700;
	width: 100%;
	background-color: purple;
	z-index: 1;
	font-family: 'Share Tech Mono', monospace;
	background-color: #222832;
	border-left: none;
	border-bottom: none;

	overflow: hidden; /* Ensures the content is not revealed until the animation */
	white-space: nowrap; /* Keeps the content on a single line */
	margin: 0 auto; /* Gives that scrolling effect as the typing happens */
	animation: reveal 1.5s steps(160, end);
}

div.future-content h1
{
	color: #dedede;
}

div.future-content h2
{
	font-family: 'VT323', monospace;
	font-size: 25px;
	margin: 10px auto;
	color: #ffa700;
	text-shadow: 0px 1px 0px black;
}

table.gradeTable
{
	border: 4px dashed #12161a;
	padding: 10px;
	margin: 30px auto;
	width: 80%;
}

table.gradeTable tr
{
	border: 2px solid #dedede;
}

table.gradeTable td
{
	text-align: center;
	font-size: 18px;
}

table.gradeTable td p
{
	text-align: left;
	color: #dedede;
}

div.descFuture
{
	text-align: center;
}

div.descFuture p
{
	color: #dedede;
}


table.gradeTable td h3
{
	text-align: left;
	color: #ffa700;
}

table.gradeTable td p
{
	color: #dedede;
}

td.headerTD
{
	border-top: 2px solid #dedede;
	border-bottom: 2px solid #dedede;
	border-right: 2px solid #dedede;
}

td.grade p
{

}

/*Footer styling*/
@media only screen and (max-width: 800px)
{
	nav a
	{
		font-size: 40px;
	}

	  div.home-content h1
	  {
		  font-size: 30px;
	  }

	  div.home-content h3
	  {
		  font-size: 20px;
	  }

	  div.home-content p
	  {
		  font-size: 16px;
	  }
	  div.home-content img
	  {

	  }
}

@media only screen and (max-width: 600px)
{
	nav a
	{
		font-size: 30px;
	}

	div.home-content h1
	{
		font-size: 20px;
	}

	div.home-content h3
	{
	  	font-size: 16px;
	}

	div.home-content p
	{
		font-size: 12px;
	}

	div.home-content img
	{

	}
}

/*Animation*/

/* The typing effect */
@keyframes typing {
  from { width: 0;
	  border-right: 8px solid orange; }
  to { width: 100%;
	  border-right: 8px solid black; }
}

@keyframes reveal
{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes pop
{
	from{
		background-color: transparent;
	}
	to{
		background-color: #464646;
	}
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}