#wrapper{
	width: 1000px;
	min-height: 200px;
	margin: 0px auto;
	padding-top: 0;
	border-style: solid;
	border-width: 0px;
	border-color: white;
}


mark {
    background-color: yellow;
    color: black;
}

body{
	background: linear-gradient(#ffffff, #bbffff);
	margin-top: 0%;
}

/*  header */
header{
	windth: 1000px;
	height: 100px; 
 	background-image: url("/headerPicture.JPG");
	background-color: blue;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}


/*  Nav Bar */
#navBar{
	windth: 1000px;
	height: 40px; 
	background: linear-gradient(#6666ff, #2222ff);
	margin: 0;
	padding-top: 10px;

}
#navBar li{
	display: inline;
	list-stype-type: none;	
	float: right;
	padding-right: 6px;
	padding-left: 1px;

}
#navBar li a{
	text-decoration: none;
	color: #bbbbbb;
}
#navBar li a:hover{
	color: #ffffff;
}

#navBar li:not(:first-child):after {

/*	border-right: solid 1px #ffffff;
*/
	content: " | ";
}

#tab{
	display: inline-block;
	margin-left: 40px;
}

/*  content */
#content{
	windth: 1000px;
	height: auto; 
	background: linear-gradient(#ccffff, #ffeeee);
	padding-top: 1px;

}
/*  content */
#content2{
	windth: 1000px;
	height: auto; 
	background: linear-gradient(#ccffff, #ffeeee);
	padding-top: 1px;
}



/*  Footer */
#footer{
	windth: 1000px;
	height: 150px; 
	background: linear-gradient(#ffff00, #ff8800);
	padding-top: 1px;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}


#svg103 {
  max-width: 95%;
  max-height: 95%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
#svg103 path {
  fill-opacity: 0;
  stroke: #0000ff;
  stroke-width: 3;
  stroke-dasharray: 870;
  stroke-dashoffset: 870;
  animation: draw 10s infinite linear;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

.typewriter p{
  color: black; 
  font-family: "Courier";
  font-size: 14px;
  margin: 10px 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 40em;
  animation: type 30s steps(60, end); 
  animation-iteration-count: infinite;
}

.typewriter p:first-child{
  color: blue; 
  animation: type1 30s steps(60, end);
  animation-iteration-count: infinite;
}

.typewriter p:nth-child(2){
  color: black; 
  animation: type2 30s steps(60, end);
  animation-iteration-count: infinite;
}

.typewriter p:nth-child(3){
  color: black; 
  animation: type3 30s steps(60, end); 
  animation-iteration-count: infinite;
}
.typewriter p:nth-child(4){
  color: black; 
  animation: type4 30s steps(60, end); 
  animation-iteration-count: infinite;
}

.typewriter p:nth-child(5){
  color: black; 
  animation: type5 30s steps(60, end); 
  animation-iteration-count: infinite;
}

.typewriter p:nth-child(6){
  color: balck; 
  animation: type6 30s steps(60, end); 
  animation-iteration-count: infinite;
}


.typewriter p:nth-child(7){
  color: balck; 
  animation: type7 30s steps(60, end); 
  animation-iteration-count: infinite;
}

.typewriter p:last-child{
  color: blue; 
  animation: type8 30s steps(2, end); 
  animation-iteration-count: infinite;
}


.typewriter p a{
  color: lime;
  text-decoration: none;
}


span{
  animation: blink 1s infinite;
}


@keyframes type{ 
  from { width: 0; } 
} 
@keyframes type1{
  from { width: 0; } 
} 

@keyframes type2{
  0%{width: 0;}
  55%{width: 0;}
  100%{ width: 100; } 
} 
@keyframes type3{
  0%{width: 0;}
  45%{width: 0;}
  100%{ width: 100; } 
} 
@keyframes type4{
  0%{width: 0;}
  35%{width: 0;}
  100%{ width: 100; } 
} 
@keyframes type5{
  0%{width: 0;}
  25%{width: 0;}
  100%{ width: 100; } 
} 

@keyframes type6{
  0%{width: 0;}
  5%{width: 0;}
  100%{ width: 100; } 
} 
@keyframes type7{
  0%{width: 0;}
  56%{width: 0;}
  100%{ width: 100; } 
} 

@keyframes type8{
  0%{width: 0;}
  65%{width: 0;}
  100%{ width: 100; } 
} 


@keyframes blink{
  to{opacity: .0;}
}

::selection{
  background: black;
}




/* Fixed/sticky icon bar (vertically aligned 50% from the top of the screen) */
.icon-bar {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Style the icon bar links */
.icon-bar a {
  display: block;
  text-align: center;
  padding: 1px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

/* Style the social media icons with color, if you want */
.icon-bar a:hover {
  background-color: #000;
}

.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.google {
  background: #dd4b39;
  color: white;
}