/* Global CSS Attributes */
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro|Source+Sans+Pro');
/* Import Source Code Pro (Monospace) and Source Sans Pro (Sans-Serif)*/

/* font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetic Arial, "Lucida Grande", sans-serif; */
/* Helvetica Font Stack */


/* font-family: Lucida Console,Lucida Sans Typewriter,monaco,Bitstream Vera Sans Mono,monospace; */
/* Lucida Font Stack */

/* Client Preference on font, Source Sans Pro and Source Code Pro was used here */

/* font-family: "Source Sans Pro", sans-serif; */
/* font-family: "Source Code Pro", monospace; */

* {
  /* Global Properties */
  padding: 0;
  /* Remove Padding */
  margin: 0;
  /* Remove Margins */
  text-decoration: none;
  /* Turn off Text Decoration */
  font-weight: 300;
  /* Set Default Font Weight to 300 */
  font-size: 16px;
  /* Set Default Font Size to 16px */
  /* overflow: hidden; */
  /* Hides any overflowing Elements */
}
html { height: 100%; width: 100%; }
body {
  /* display: flex; */
  /* flex-direction: column; */
  background-color: rgb(125, 0, 50);
  /* Sets the Background Color */
  color: rgb(220,220,220);
  /* Sets the Color of Text */
  font-family: "Source Sans Pro", sans-serif;
  /* Sets the Default Fonts to be used */
}
.dip-to-black {
  display: none;
  /* The display is set to none, as it is done through keyframes and differs across pages etc. */
  /* Sets the Display mode to Block */
  opacity: 0;
  /* The opacity is set to 0, as it is animated using a keyframe upon navigating to another page */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  /* Absolutely center the element */
  background-color: rgb(20,20,20);
  /* Sets the background color */
  z-index: 999999;
  /* Sets the Z-Index above other elements */
}
.arrow-wiper-left1 { display: none; background-color: rgb(0,0,0);}
.arrow-wiper-left2 { display: none; background-color: rgb(20,20,20);}

.arrow-wiper-right1 { display: none; background-color: rgb(0,0,0);}
.arrow-wiper-right2 { display: none; background-color: rgb(20,20,20);}

/* Global Wiper CSS*/
.arrow-wiper-left1, .arrow-wiper-left2, .arrow-wiper-left3,
.arrow-wiper-right1, .arrow-wiper-right2, .arrow-wiper-right3,
.wiper-up1, .wiper-up2, .wiper-up3,
.wiper-down1, .wiper-down2, .wiper-down3,
.wiper-left1, .wiper-left2, .wiper-left3,
.wiper-right1, .wiper-right2, .wiper-right3 {
  display: none;
  /* The display is set to none, as it is done through keyframes and differs across pages etc. */
  /* Sets the Display mode to Block */
  opacity: 1;
  /* Opacity 1 */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  /* Absolutely center the element */
  animation-fill-mode: forwards;
  /* Sets the animation to "stick" and for properties to stay applied after the animation ends */
  animation-duration: 2s;
  /* Duration of the Animation */
  z-index: 9999999999;
  padding: 0;
  margin: 0;
}

/* Height/Stack Based CSS Setting */
/* .wiper-up1, .wiper-down1, .wiper-left1, .wiper-right1,  { z-index: 9999991;}
.wiper-up2, .wiper-down2, .wiper-left2, .wiper-right2,  { z-index: 9999992;}
.wiper-up3, .wiper-down3, .wiper-left3, .wiper-right3,  { z-index: 9999993;} */

/* Specific Wiper CSS and Animation Setting */
.wiper-up1 { animation-name: wiper-up1; background-color: rgb(0,0,0);}
.wiper-up2 { animation-name: wiper-up2; background-color: rgb(10,10,10);}
.wiper-up3 { animation-name: wiper-up3; background-color: rgb(20,20,20);}

.wiper-down1 { animation-name: wiper-down1; background-color: rgb(0,0,0);}
.wiper-down2 { animation-name: wiper-down2; background-color: rgb(10,10,10);}
.wiper-down3 { animation-name: wiper-down3; background-color: rgb(20,20,20);}

.wiper-left1 { animation-name: wiper-left1; background-color: rgb(0,0,0);}
.wiper-left2 { animation-name: wiper-left2; background-color: rgb(10,10,10);}
.wiper-left3 { animation-name: wiper-left3; background-color: rgb(20,20,20);}

.wiper-right1 { animation-name: wiper-right3; background-color: rgb(0,0,0);}
.wiper-right2 { animation-name: wiper-right3; background-color: rgb(10,10,10);}
.wiper-right3 { animation-name: wiper-right3; background-color: rgb(20,20,20);}



nav {
  /* Standardized Nav element is used, with following CSS */
  display: flex;
  /* Sets the Display mode to Flex */
  flex: 1;
  /* Specifies how the Flex will grow/shrink to fit content */
  justify-content: center;
  /* Centers the Flexbox */
  align-items: center;
  /* Vertically aligns the content */
  font-family: "Source Code Pro", monospace;
  /* Sets the Font for the Navigation Bar to be the monospace version of the Source Sans Pro font-size:  */
  z-index:99999;
  /* Sets the Z-Index - the height of the element relative to other elements * */
}
.nav-image-container {
  /* Element that holds the Logo in the Navigation Bar */
  display: flex;
  /* Sets the Display mode to Flex */
  justify-content: center;
  /* Centers the Flexbox */
  align-items: center;
  /* Vertically aligns the content */
  margin-right: auto;
  /* Sets the Margin to auto-align on the right side, resulting in the Logo centering within its Flex space */
  padding-left: 75px;
  /* 75 Pixel padding on the left, offsets the image from the left side of the page */
  z-index:99999;
  /* Sets the Z-Index - the height of the element relative to other elements * */
  cursor: pointer;
  /* This sets the Cursor that appears when hovering over the Navigation Image (Home/Logo Image) to the Cursor as the redirect uses onclick, not href */
  animation-name: navigation-image-desktop-animation;
  /* Sets the animation name to use */
  animation-fill-mode: forwards;
  /* Sets the animation to "stick" and for properties to stay applied after the animation ends */
  animation-duration: 1.5s;
  /* Duration of the Animation */
}
.nav-link-container {
  /* Container element for the Navigation Bar Links */
  display: flex;
  /* Sets the Display mode to Flex */
  justify-content: center;
  /* Centers the Flexbox */
  align-items: center;
  /* Vertically aligns the content */
  z-index:99999;
  /* Sets the Z-Index - the height of the element relative to other elements * */
}
nav li {
  /* Sets the CSS for the <li> tags within the <nav> element */
  display: inline-flex;
  /* Sets the Display mode to Inline Flex */
  padding-left: 25px;
  /* Sets the padding on the left, offsetting each link 25 pixels from the one to the left, and from the sorrounding Flex elements */
  padding-right: 25px;
  /* Sets the padding on the right, offsetting each link 25 pixels from the one to the right, and makes the offset from the sorrounding Flex elements equal on both sides */
  cursor: pointer;
  /* Sets the cursor to switch to the Pointer cursor upon hover, as an <a> tag is not used */
  font-size: 200%;
  /* Sets the Font Size to be 200% of the Default Font Size, which is 16px */
  z-index:99999;
  /* Sets the Z-Index - the height of the element relative to other elements * */
}
nav li:link {
  /* This doesn't appear to change anything in the current use case, but the CSS reset is applied for trivial reasons */
  color: rgb(220,220,220);
}
nav li:visited {
  /* This applies the same CSS as the default state in order to not change the styling of the link based on whether the user has visited it or not */
  color: rgb(220,220,220);
}
nav li:hover {
  /* This applies a different, contrasting, style to the navigation link that is being hovered over for user feedback reasons */
  color: rgb(0,200,200);
}
nav li:active {
  /* This applies a different styling to the link when it is active (loading), and gives feedback to the user that they have clicked it */
  color: rgb(25,25,25);
}
/* .nav-image-container {
display: flex;
justify-content: center;
align-items: center;
margin-right: auto;
padding-left: 75px;
z-index:99999;
} */
.nav-social-container {
  /* Container Element for the Social Media Icons */
  display: flex;
  /* Sets the Display mode to Flex */
  justify-content: center;
  /* Centers the Flexbox */
  align-items: center;
  /* Vertically aligns the content */
  margin-left: auto;
  /* Sets the Margin to auto-align on the left side, resulting in the Social Media Icon Container centering within its Flex space */
  padding-right: 45px;
  /* 45 Pixel padding on the right, offsets the Container from the right side of the page */
  z-index:99999;
  /* Sets the Z-Index - the height of the element relative to other elements * */
}
.nav-social-image {
  /* Class applied to the Navigation Social Media Images */
  /* display: inline-flex; */
  vertical-align: middle;
  /* Vertically aligns the Navigation Social Media Images to the Navigation Links, this in reality has little effect due to it already being located inside the same Flex box */
  margin-left: 25px;
  /* Sets the margin of each Navigation Social Media Image to 25 Pixels, in turn creating ample spacing between each logo */
  height: 75px;
  /* Sets the height of each Navigation Social Media Image to 75 Pixels, this was done to create a consistent height which makes the Navigation Bar more aesthetically pleasing */
  width: auto;
  /* This sets the width of the images to "auto" which scales them with the height while keeping the Aspect Ratio of each image, setting this to auto was easier and better than
  explicit sizes due to the icons having different Aspect Ratios which would require more classes. */
  z-index:99999;
  /* Sets the Z-Index - the height of the element relative to other elements * */
}
/* .nav-social-image:hover { */
/* This class applies to the respective Navigation Social Media Image upon hover */
/* height: 85px; */
/* The size increase is ample for user feedback, and this is a user friendly method of getting hover feedback as it is subtle but noticeable and doesn't impact the aesthetic negatively */


/* It was decided not to have this due to causing the movement of the Navigation Links, and possible overlapping.
Also, the feedback of just the cursor pointer, and it being a standardized location is enough to inform users that these are links */

/* } */
.mobile-hamburger-button {
  /* Styling for the Mobile Hamburger Button Element */
  display: none;
  /* Sets the Display to None, this makes it not display on the default 1920x1080px display. */
  position: fixed;
  /* Sets the Position to Fixed, making it stick to the page even upon scroll */
  /* padding-left: 100px; */
  bottom: 50%;
  /* This vertically centers the Mobile Hamburger Button */
  left: inherit;
  /* This sets the left-position to inherit, which is the default setting but this was added trivially and to make certain the correct setting applies */
  right: 10px;
  /* Sets the position from the right to be 10 Pixels */
  height: auto;
  /* Sets the Height of the Element, which contains the icon, to auto - which ensures that it scales with the width and keeps its aspect ratio */
  width: 50px;
  /* Sets the width of the Element */
  z-index: 99999;
  /* Sets the Z-Index - the height of the element relative to other elements * */
}
.mobile-navigation {
  /* Completely separate Element for the mobile navigation for simplicity and functionality, and reducing issues with reapplying CSS */
  display: none;
  /* Sets the Display to None, this makes it not display on the default 1920x1080px display. */
  z-index: 999999;
  /* Sets the Z-Index - the height of the element relative to other elements * */
}
.mobile-nav-link-container {
  /* Container for the Mobile Navigation Links */
  display: flex;
  /* Sets the Display mode to Flex */
  flex-direction: column;
  /* Sets the content in the Flexbox to be aligned in a column, instead of the default row */
  justify-content: center;
  /* Centers the Mobile Navigation Links vertically */
  align-items: center;
  /* This centers the Flex element, making the clickable area with the link only span across the text */
  position: absolute;
  /* Absolute position */
  top:0;
  bottom:0;
  left:0;
  right:0;
  /* Setting all these to 0 makes the element centered - in this case absolutely due to the use of position: absolute */
  z-index: 9999;
  /* Sets the Z-Index - the height of the element relative to other elements * */
}
.mobile-nav-link {
  display: flex;
  /* Sets the display mode to use Flexbox */
  justify-content: center;
  /* Centers the Mobile Navigation Links horizontally */
  cursor: pointer;
  /* Sets the cursor to be a pointer when hovering over the links,
  This is done as <a> tags are not used - instead the <li>> tags are used
  which do not have the pointer cursor by default */
  margin-bottom: 50px;
  /* Sets a 50 Pixel margin on the bottom between each Mobile Navigation Link, and creates a Margin between the lowest link and the Social Media Buttons */
  font-size: 2em;
  /* Sets the Font Size to be 200% of the Default Font Size, which is 16px */
}
.mobile-nav-social-container {
  /* Container Element for the Social Media Icons */
  display: none;
  /* Sets the Display mode to Flex */
  justify-content: center;
  /* Centers the Flexbox */
  align-items: center;
  /* Vertically aligns the content */
  position: absolute;
  /* Absolute position */
  /* top:0; */
  bottom:10%;
  left:0;
  right:0;
  /* This setup makes the Element centered vertically, and offset 10% from the bottom of the page */
  z-index:99999;
  /* Sets the Z-Index - the height of the element relative to other elements * */
}
.mobile-nav-social-image {
  /* Class applied to the Navigation Social Media Images */
  /* display: inline-flex; */
  vertical-align: middle;
  /* Vertically aligns the Navigation Social Media Images to the Navigation Links, this in reality has little effect due to it already being located inside the same Flex box */
  margin-left: 25px;
  margin-right: 25px;
  /* Sets the margin of each Navigation Social Media Image to 25 Pixels on each side, this gives ample room between the icons and makes sure they are centered by applying the same margin*/
  height: 50px;
  /* Sets the height of each Navigation Social Media Image to 75 Pixels, this was done to create a consistent height which makes the Navigation Bar more aesthetically pleasing */
  width: auto;
  /* This sets the width of the images to "auto" which scales them with the height while keeping the Aspect Ratio of each image, setting this to auto was easier and better than
  explicit sizes due to the icons having different Aspect Ratios which would require more classes. */
  z-index:99999;
  /* Sets the Z-Index - the height of the element relative to other elements * */
}
.mobile-nav-dimmer {
  /* Element that Dims the page when the Mobile Navigation Menu is Opened */
  display: none;
  /* Sets the Display mode to None, stopping it from display at 1920x1080 by default - and only triggered using JavaScript on click of the Hamburger Button */
  background-color: rgba(0, 0, 0, 0.8);
  /* Color of the Mobile Navigation Dimmer, using Red Green Blue Alpha for Alpha (opacity) control */
  position: absolute;
  /* Sets the position to Absolute */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* Centers the Element, and absolutely - in the center directly */
  z-index: 999;
  /* Sets the Height of the Element so that it covers the correct element when the Mobile Navigation Menu is open */
}
.page-arrow {
  /* Container Element for the Social Media Icons */
  display: flex;
  /* Sets the Display mode to Flex */
  justify-content: center;
  /* Centers the Flexbox */
  align-items: center;
  /* Vertically aligns the content */
  position: absolute;
  /* Absolute position */
  top:0;
  bottom: 0;
  /* Centers both arrows vertically */
  z-index: 9;
  /* Sets the Height of the Element so that it is covered by the dimmer */
}
.page-arrow img {
  height: 75px;
  /* Sets the height of the image */
  width: auto;
  /* The width of the image scales with the height, while keeping the aspect ratio intact */
}
.page-arrow.right {
  /* This only applies to the child class 'right' within the parent class 'page-arrow' */
  left: auto;
  right: 5px;
}
.page-arrow.left {
  left: 5px;
  right: auto;
}
main {
  /* Containing Element for the content on the page */
  display: block;
  /* Sets the Display mode to Block */
  /* width: 100%; */
  /* Aligns text into the center of the page */
  /* For the Home page, and most pages - this is not utilized due to the graphical and responsive scaling of the showcased content.
  However, for heavily text-based pages like the my CV page, it will style and contain the text and content. */
}
section {
  display: flex;
  /* Sets the display mode to flex */
  flex-direction: row;

  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: 50px;
  z-index: -1;
}
section p.about-text-centered {
  /* Applies to P tags with the class about-text-centered that are within a section tag */
  text-align: center;
  font-size: 2em;
  width: 90%;
  /* 1 em == font size, i.e. 2em is 32px if the default font size is 16px */
}
.header-two-piece {
  /* Containing Element for the Two Piece Graphical Header */
  display: flex;
  /* Sets the Display mode to Flex */
  justify-content: center;
  /* Centers the Two-Piece Header horizontally */
  align-items: center;
  /* Centers the Two-Piece Header Vertically */
  position: absolute;
  /* Sets the position to Absolute */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* Centers the Element, and absolutely - in the center directly */
  margin: auto;
  /* Sets the Margin to Auto */
  width: 90%;
  /* Sets the width of the Two-Piece Container to cover 95% of the width, this creates a gap around the edge and omits the use of padding */
  z-index: -1;
  /* Setting the Z-Index to -1 fixes issues with the Two Piece Header appearing above higher-stacked content that was animated-in */
}
.graphic-centered {
  /* Graphic */
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-right: 30px; */
  padding-right: 35px;
  /* margin-left: auto; */
  width: 650px;
  /* Sets the width, overwritten using Media Queries and with Animations.css. Modern browsers scale height with the aspect ratio relative to width */
  /* vertical-align: middle; */
}
.header-text-centered {
  display: inline-flex;
  /* Sets the display mode to use Flexbox, and be inline */
  font-size: 2.5em;
  /* Font size */
  text-align: center;
  /* Aligns the text in the center */
  margin-right: auto;
  padding-left: 35px;
  /* background-color: blue; */
}
.header-quad-row1, .header-quad-row2 {
  /* Applies CSS to both columns on the "quad" pages (My Work Pages) */
  display: flex;
  /* Sets the display mode to flex */
  flex-direction: row;
  /* Sets the content in the flexbox to align as a column */
  justify-content: center;
  /* Vertically centers the content as it is a column */
  align-items: center;
  /* Aligns the item center - stops stretching of images etc. */
  height: 100%;
}
.header-quad-row1 {
  margin-top: 25px;
  margin-bottom: 50px;
}
.header-quad-image {
  display: flex;
  /* margin: 0 auto; */
  /* padding-bottom: 50px; */
  /* Adds a padding which spaces the image flex boxes, and in turn the text too. */
  /* height: 200px; */
  padding-left: 25px;
  padding-right: 25px;
}
.header-quad-text {
  display: flex;
  /* Sets the display mode to use Flexbox*/
  justify-content: center;
  /* Centers the content, in this case it will center the text within the flex area */
  /* Font size */
  text-align: center;
  /* Aligns the text in the center */
  width: 450px;
  /* padding-left: 100px; */
  /* padding-left: 25px;
  padding-right: 25px; */
}
.header-quad-text.additional {
  display: none;
  /* margin-top: 160px; */
  /* padding-left: 100px; */
  /* I decided to just set a margin-top for the second text box, as the content was arranged in columns and I couldn't figure out a way to align it vertically.
  I also couldn't re-write it to use rows because it kept breaking */
}
.contact-page-1 > P {
  /* Applies to P tags within the .contact-page-1 container */
  font-size: 2.5em;
  text-align: center;
}
.contact-page-1 > P.bottom-text {
  /* Applies to P tags with the class .bott-text within the .contact-page-1 container */
  padding-top: 25px;
}
.contact-page-2 {
  flex-direction: column;
  justify-content: center;
}
.contact-page-2.desktop {
  display: flex;
}
.contact-page-2.mobile {
  display: none;
}
.contact-page-2 > input, .contact-page-2 > textarea{
  /* Applies to input tags and textarea tags within the .contact-page-2 container */
  margin-top: 25px;
}