@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&family=Major+Mono+Display&display=swap');

:root {
	--main-bg-color: rgb(32, 62, 74);
	--white-smoke: rgb(237, 224, 204);
	--glacier-gray: rgb(197, 198, 199);
	--glacier-gray-transparent: rgba(197, 198, 199, 0.1);
	--onyx: rgb(44, 40, 44);
	--moonlight-ocean: rgb(42, 59, 78);
	--evening-blue: rgba(42, 41, 62, 0.8);
	--summer-green: rgb(121, 211, 129);
}

html, body {
	height: 100%;
}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media screen
  and (min-width: 320px) 
  and (max-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 2) {

body {
  		height: 100%;
  		width: 100%;

  		margin: 0;
  	}

header .header-container {
	background-color: var(--glacier-gray-transparent);

	border: none;

	padding-left: 1em;
	width: 100%;

	border-bottom-style: solid;
	border-bottom-color: var(--white-smoke);
	border-bottom-width: 1px;
}

main {
	background-color: var(--evening-blue);
	height: 100%;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	margin-left: auto;
	margin-right: auto;

	border-style: none;

	padding-left: 1em;
	padding-right: 1em;

	color: var(--white-smoke);

	overflow: scroll;
}

.cmd-output p.type,
.job-entry p,
.edu-entry p {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid transparent; /* The typwriter cursor */
  white-space: pre-line;
  /*margin: 0 auto;  Gives that scrolling effect as the typing happens */
  /*letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing var(--duration) steps(40, end) calc(var(--order) * var(--duration));
  animation-fill-mode: forwards;
}

}

/* Portrait */
/*@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}*/

/* Landscape */
/*@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}*/