<style>

title {
  display: none;
}

body{
 /*background-color: #000000  */
}

a:link {
  color: #FFC90E;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: #FFC90E;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: #FFC90E;
  background-color: transparent;
  text-decoration: underline;
}

/* Style the top navigation bar */
.navigationBar {
  overflow: hidden;
  background-color: #343434;
}

/* Style the navigationBar links */
.navigationBar a {
  float: left;
  display: block;
  color: #FFC90E; 
  text-align: center;
  padding: 22px 22px; 
  text-decoration: none;
}

/* Change color on hover */
.navigationBar a:hover {
  background-color: #ddd;
  color: black;
}


/*button link*/
.btn {
 background-color: #000000;
  /*border: none;*/
  color: #FFC90E;
  font-size: 18px;
  cursor: pointer;
}

/* For button, lighter background on mouse-over */
.btn:hover {
  background-color: #ddd;
}

.header {
 /* background-color: #000000;*/
  text-align: center;
  padding: 10px;
}

.header h1 {
    color: #FFC90E;
    border-width: 10px;
    border-style: solid;
    border-color:#000000;
}

h1{
  /*background-color: #000000;*/
  text-align: center;
  padding: 10px; /*30px*/
  color: #FFC90E;
}

.header h2 {
    color: #FFC90E;
    border-width: 10px;
    border-style: solid;
    border-color:#ED1C24;
}

h2{
  /*background-color: #000000;*/
  text-align: center;
  padding: 30px;
  color: #FFC90E;
}

.infoBlock {
    flex: left;
      
}

.infoBlockProjectDescription{
    
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 100px;
    margin-left: 100px;
    width: 1000px;
    
}

h3{
    color: #FFC90E;
    
}

h4{
    color: #FFC90E;
    
}

p{
    color: #FFC90E;
}

.titleDescription{
    
    display: flex;
    justify-content:left;
    padding: 1px;
}

/*Everything below this point styles the images and links of the website*/

.teamMembers{
    display: flex;
    justify-content:center;
    padding: 50px;
    
}

.teamMembersInfo{
    
    padding: 20px;
    
}

.teamMentors{
    
    display: flex;
    justify-content: center;
    padding: 30px;
    border: 10px solid transparent;
       
}

.teamMentorsInfo{
    padding: 20px;
    
}

img{
    
}

.BookGame{
    
    width: 1000px;   
    float: right;
    height: auto; 
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
    align-items: center; 
}

.Game_Loop_Example_Image_01{
    
    width: -1000px;   
    float: right;
    height: 300; 
    width: 500; 
    
}

/*This seciton is specifically for the Project Technologies page */ 
.technologyUsed{
    display: flex;
    justify-content: center;
    padding: 30px;
    border: 10px solid transparent;
    
}

.Unity{
    width: 1000px; 
    border: 10px solid transparent;    
}

.SQLite{
    width: 1000px;
    border: 10px solid transparent;
}

.CSharp{
    width: 1000px;
    border: 10px solid transparent;
}

.SQL{
    width: 1000px;
    border: 10px solid transparent;
}

.SolutionOverviewDiagram{
    width: 1000px;
    
}

.DiagramOverview{
   width: 1000px;
}

/*This section is specfically for the timeline page!*/

{
  box-sizing: border-box;
}

body {
  background-color: #28ae5b;
  font-family: Helvetica, sans-serif;
  margin: 0;
}

.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 0;
}

.timeline::after {
      content: '';
      position: absolute;
      width: 6px;
      background-color: #8a9c91;
      top: 0;
      bottom: 0;
      left: 50%;
      margin-left: -3px;
    }

.container {
      position: relative;
      width: 35%;
      padding: 5px 15px;
      background-color: inherit;
      color: black;
}

.left {
      left: 23.5%;
}

.right {
      left: 51%;
}

    /* Circles centered on the timeline */
.container::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 20px; /* Adjust vertical positioning */
  background-color: white;
  border: 4px solid #8a9c91;
  border-radius: 50%;
  z-index: 1;
  left: 70.5%;
  transform: translateX(-50%);
}


.left::after {
      right: -12px;
}

.right::after {
      left: -12px;
}

   /* Arrows on left containers */
.left::before {
  content: "";
  position: absolute;
  top: 20px;  /* Align to top of container */
  right: 135px;  /* Adjust horizontal position for left container */
  border: solid transparent;
  border-width: 10px;
  border-left-color: #8a9c91;  /* Left arrow color */
  z-index: 1;
}

/* Arrows on right containers */
.right::before {
  content: "";
  position: absolute;
  top: 20px;  /* Align to top of container */
  left: -10px;  /* Adjust horizontal position for right container */
  border: solid transparent;
  border-width: 10px;
  border-right-color: #8a9c91;  /* Right arrow color */
  z-index: 1;
}

.content {
      font-size: 13px;
      padding: 8px 12px;
      background-color: #8a9c91;
      border-radius: 6px;
      max-width: 250px;
}

.content h2 {
      font-size: 18px;
      margin: 4px 0;
}

.content p {
      font-size: 16px;
      margin: 3px 0;
}

@media screen and (max-width: 600px) {
      .timeline::after {
        left: 31px;
}

.container {
        width: 85%;
        padding: 5px 20px;
        margin-left: 40px;
}

.left::after,
.right::after {
        left: 15px;
}

.left::before,
.right::before {
        left: 60px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
}

.right {
        left: 0%;
}


/*Below is the css section for Posters on the Project Details/Project Folder page*/

.Poster{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%; 
}

.Poster_2{
    
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%; 
}

.Poster h3{
    text-align: left;
}

.PosterGroup{
    display: flex;
    justify-content: center;
    width: 38%; 
}

/*Below is the personal photos for both the index and the team Information/About Our Team page*/

.personImage{
    width: 150px;
    height: 150px;
    
}

.Andrew{
    border: 10px solid transparent;
    padding: 10px;
}


.Andrew h2{
    
    font-size: 20px;    
}

.Andrew h3{
    
    padding: 40px
}

.Joshua{
    border: 10px solid transparent;
    padding: 10px;    
}

.Joshua h2{
    
    font-size: 20px;  
}

.Samantha{
   border: 10px solid transparent;
   padding: 10px;
}

.Samantha h2{
    
    font-size: 20px;  
}

.Hunter{
  border: 10px solid transparent;
  padding: 10px;
}

.Hunter h2{
    
    font-size: 20px;   
}

.Morgan{
    border: 50px solid transparent;
    padding: 10px;
        
}

.Morgan h2{
    
    font-size: 20px;   
}

.Paul{
   border: 50px solid transparent;
   padding: 10px;      
}

.Paul h2{
    
    font-size: 20px;   
}

.group_photo{
    
    height: 90x;
    width: 90px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
}

.group_photo img{
    
    height: auto;
    width: 100%;
    justify-content:center;
   
}

.content p{
    
    color: #FFC90E;
    text-align: center;
    font-size: 50px;
    
}





</style>