/********************FONTS***************/

/*LUDICROUS -- used in intro "hello world i'm erika"*/
@font-face {
    font-family: 'ludi';
    src: url('fonts/Ludi/Ludi.woff') format('woff');    /*relatively modern browsers*/
}

/*PACIFICO -- used as a fallback "hello world" intro*/
@font-face {
    font-family: 'pacifico';
    src: url('fonts/Pacifico/pacifico-webfont.woff2') format('woff2'), /*modern browsers*/
         url('fonts/Pacifico/pacifico-webfont.woff') format('woff').   /*relatively modern browsers*/
         url('fonts/Pacifico/pacifico.ttf') format('truetype');        /*safari, android, iOS*/
    font-weight: normal;
    font-style: normal;

}

/*AILERON LIGHT -- used in my blurb about me p*/
@font-face {
    font-family: 'aileronlight';
    src: url('fonts/Aileron/aileron-light-webfont.woff2') format('woff2'),
         url('fonts/Aileron/aileron-light-webfont.woff') format('woff');
}

/*ALEO REGULAR-- used as education/contact h1*/
@font-face {
    font-family: 'aleo';
    src: url('fonts/Aleo/Regular/aleo-regular-webfont.eot'),                     /* IE9 Compat Modes */
         url('fonts/Aleo/Regular/aleo-regular-webfont.woff2') format('woff2'),   /*modern browsers*/
         url('fonts/Aleo/Regular/aleo-regular-webfont.woff') format('woff'),     /*relatively modern browsers*/
         url('fonts/Aleo/Regular/aleo-regular-webfont.ttf') format('truetype'),  /*safari, android, iOS*/
         url('aleo.svg#aleo-regular-webfont') format('svg');                     /* Legacy iOS */
}

/*AILERON REGULAR --used in my education info p */
@font-face {
    font-family: 'aileronregular';
    src: url('fonts/Aileron/aileron-regular-webfont.woff2') format('woff2'),
         url('fonts/Aileron/aileron-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/*AILERON BOLD -- used in nav link text */
@font-face {
    font-family: 'aileronbold';
    src: url('fonts/Aileron/aileron-bold-webfont.woff2') format('woff2'),
         url('fonts/Aileron/aileron-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


/********************END OF FONTS***************/


/* Hello World, I'm Erika */
#intro h1 {
	font-family: ludi, pacifico, monospace, arial;
	font-size:9em;
	padding-bottom: 10%;
	padding-top: 10%;
	  color: #60c8cc;
      opacity: 0.7;
	  
	  
	  overflow: hidden; /* Ensures the content is not revealed until the animation */
	  border-right: .15em gray; /* The typwriter cursor */
	  white-space: nowrap; /* Keeps the content on a single line */
	  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
	  /*letter-spacing: .155em;  Adjust as needed */
	  animation: 
	    typing 3.5s steps(30, end),
	    blink-caret .5s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

/* My about me writing and pic, pushing both lower into gradint */
.myBlurb {
	margin-top: 20%;
}
.myPic img {
	margin-top: 8.2em;
}


/*background of about me/education section*/
#aboutMe {

	background-image: url("img/bgGrad.png"); /*gradient, top and bottom fade to white*/
	background-repeat: no-repeat;
	background-size: cover auto;
	padding: 3% 0 10% 0;
}



/*about me paragraph*/
.myBlurb p {
	margin-left: 35%;
	font-family: aileronlight, helvetica, sans-serif;
	font-size: 1.2em;
	
}


/*education info headers*/
#myEducation h2, #contact h1, #contact h2 {
	margin:auto;
	text-align: center;
	font-family: aleo, times, serif; 
	font-size: 1.7em;
}


/*education info explanation p */
#myEducation p {
	font-family: aileronregular, helvetica, sans-serif;
	margin: 0 4em 0 4em;
}


/*centers glyphs and social media icons*/
.educationInfo, #contact {
	text-align: center;
}


/*Glyphs used in education section*/
span.glyphicon {
    font-size: 2em;
    padding-bottom: .5em;
}
span.glyphicon-education {
    font-size: 2.6em;
    padding-bottom: .225em;
}


/*picture bounce animation delay*/
#aboutMe .myPic img {
	animation-delay: 5s;
}

/*social media icons*/
#contact img {
	opacity: 0.7;
}


/*nav bar*/
.navbar {
	border-style: none;
}
/*nav bar toggle button*/
.navbar-toggle button {
	color: #60c8cc;
	border-color: white;
	border-width: 2em;
}
/*nav bar links*/
.navbar-brand, ul.nav li a, ul.nav li a:visited {
    color: white !important;
    font-family:aileronbold, helvetica, sans-serif; 
}
/*nav bar links*/
ul.nav li a:hover, ul.nav li a:active {
    color:   #ffbd17!important;
}
/*nav bar links*/
ul.nav li.active a {
    color: black !important;
}
/*nav bar background color*/
#wholeNav {
	background-color:#78b1b3;
	opacity: 0.6;
}


/*centers footer and makes footer p/contact h1 purple*/
footer p {
	text-align: center;
}
footer p, #contact h1 {
	color: #60c8cc; 
}


/*if device screen is -- OR MORE (min width) do the following */
@media (min-width: 1000px) {#aboutMe img  {padding-top: 20%;}} /*makes picture move down a bit when larger screen*/




/*if device screen is ...px OR LESS (max width) do the following */
@media (max-width: 1350px) {#aboutMe img {display:block; margin-left:auto; margin-right: auto; }} /*centers my picture when small screen*/
@media (max-width: 1350px) {.myBlurb p {display:block; padding:0 2em 0 2em; margin-left:auto; margin-right: auto; }} /*centers text when small screen*/
@media (max-width: 1350px) { #myEducation p {padding-bottom: 10%;}} /*spaces out education info when smaller*/
@media (max-width: 575px) {#aboutMe img {max-width: 60%;}} /*makes picture smaller as screen gets smaller*/


/*makes "hello world i'm erika" smaller when small screen*/
@media (max-width: 1350px) {#intro h1 {font-size: 7em;}}
@media (max-width: 1250px) {#intro h1 {font-size: 6.5em;}}
@media (max-width: 1024px) {#intro h1 {font-size: 5.5em;}}
@media (max-width: 1000px) {#intro h1 {font-size: 5em;}} 
@media (max-width: 900px) {#intro h1 {font-size: 4.5em;}} 
@media (max-width: 575px) {#intro h1 {font-size: 3.2em;}} 
@media (max-width: 400px) {#intro h1 {font-size: 3em;}}