*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body{
  height: 100%; /*Height of the body is the entire height of webpage*/
  margin: 0%;
  background-color: rgb(0, 0, 0);
  min-height: 100vh;
}

.container{
  min-height: 95%; /*The container height is the entire height of webpage (possible since body is entire webpage*/
  
  display: flex; /*activates flexbox*/
  justify-content: center; /*This is the horizontal location (on main axis) of the two boxes in the container div*/
  align-items: center; /*This is the vertical location (on cross axis) of the two boxes in the container div*/
  flex-wrap: wrap; /*When the screen size decreases, and the text doesn't fit, then it goes to the next line*/
}

.Name {
  display: flex; /*the name box in the container is now a flex.*/
  align-items: center;
  justify-content:center;
  flex-direction: column;

  /*background: rgb(93, 255, 168);*/
  flex: 0 1 330px; /*creates responsive layout, where shrinks ONLY when screen size gets smaller. The 300px is the base width of the box*/
  height: 40vh; /*Creates box for the Name box*/
  gap: 2vh; /*Separates "Ishraq" and "Education" by 2vh*/

}

.Options{
  display: flex; /*the options box in the container is now a flex.*/
  align-items: center;
  flex-direction: column; /*makes the flex a column instead of row, so the main axis is vertical*/

  /*background: rgb(93, 255, 168);*/
  flex: 0 1 300px; /*creates responsive layout, where shrinks ONLY when screen size gets smaller*/
  height: 40vh; /*This set the height of the Options box after it was flipped. This allows the "space-evenly" to spread them apart, otherwise the content would not spread out as the box height is the height of the content itself.*/
  display:flex; /*the options inside the "Options" div are flex as well*/
  
  justify-content: space-evenly;
  text-align: center;
}

a {
  text-decoration: none;
  color: inherit; /* inherit color from child */
}

h1, h5, h4{
  display: inline-block;
  /*background: rgb(64, 2, 127);*/
}

.Ishraq{
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: 100;
  color: rgb(173, 197, 255);
  border-bottom: 6px solid white; /* Added a white line between Ishraq and Education*/
}

.Education{
  font-style:italic;
  text-align: center;
  font-family:monospace;
  color: rgb(214, 246, 238);
}

.About, .Experience, .Projects, .Resume, .Blog, .Contact{ /*Set the properties of all the components in Options*/
  display: inline-block;
  position: relative;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color: white;
  cursor: pointer;
}

/*Properties when you hover over the Options:*/
.About:hover, .Experience:hover, .Projects:hover, .Resume:hover, .Blog:hover, .Contact:hover{
  color: rgb(173, 197, 255);
  transition: color 0.25s ease-out;
 }

 /*How to get the animated line when you hover over each option:*/
 .About::before, .Experience::before, .Projects::before, .Resume::before, .Blog::before, .Contact::before{ 
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%; /*Initially, line starts with 0% width (ie. not there)*/
  height: 3px;
  background-color: white;
  transition: width 0.25s ease-out;
 }

 /*Line width changes to 100% when hovered over*/
 .About:hover::before, .Experience:hover::before, .Projects:hover::before, .Resume:hover::before, .Blog:hover::before, .Contact:hover::before{ 
  width: 100%;
 }

footer .Copyright{
  display: flex;
  color: white;
  justify-content: center;
}

@media (max-width: 762px) { /*When screen size becomes 800px, then it automatically becomes 1 column instead of 2 columns for Projects.*/
  .container{
    min-height: 70%;
  }

  footer .Copyright{
    padding-top: 20%;
  }
}

@media (max-width: 800px) { /*When screen size becomes 800px, then it automatically becomes 1 column instead of 2 columns for Projects.*/
  .container{
    min-height: 50%;
  }

  footer .Copyright{
    padding-top: 15%;
  }
}