/*controls positions of elements within the navbar and header*/
.header-container{ 
  display: grid;
  grid-template-columns: repeat(6, 1fr); 
  grid-template-rows: 1fr;
  background-color: #50717b;
  width: 100%;
  padding: 10px 0; 
  height: 50px;
  grid-column: span 6
}

/* Adjusts name element within header*/
.header-container h1{
  margin-top: 10px;
  color: white;
  font-family: monospace;
  font-size: 30px;
}


/* Adjusts the logo size and location*/
.navbar-logo { 
  height: 50px;
  margin-left: 10px;
}

.navbar {
   grid-column: 6;
}

/*Adjusts the unordered list section of the navbar*/
.navbar ul { 
  list-style: none;
  padding-right: 150px ;
  display: flex;
  font-size: 14px;
  letter-spacing: 2px;
}
 
/*Adjusts the ordered list section of the navbar*/
.navbar ul li {
  margin-right: 100px;
  position: relative; 
  font-family: monospace;
}

/*Adjusts the navbar headers*/
.navbar ul li p {
  color: white;
  text-decoration: none;
  border: none;
  height: 10px;
}

/*Adjusts the navbar headers*/
.navbar ul li p:hover {
  background-color: #3a4042;
  cursor: pointer;
}

.navbar ul li:hover .dropdown-content {
  display: block; 
}

/*Adjusts navebar dropdown menus*/
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%; 
  left: 0;
  background-color: #3a4042;
  min-width: 120px;
}

.dropdown-content a {
  display: block; 
  padding: 8px 16px; 
  text-decoration: none;
  color: white; 
}




body {
  margin: 0;
  padding: 0;
  background-color: #212121;
  font-family: monospace;
  font-size: 20px;
}

/*Main body container for homepage*/
.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr); 
  width: 100%;
}

.container ul{
  grid-column: ;
  grid-row: 3;
  margin-top: 200px;
}
/* Portrait image on homepage*/
.image {
  margin-top: 35px;
  margin-bottom: 35px;
  margin-right: 35px;
  grid-column: 8/span 4; 
  grid-row: 1;
}

/* Horizontal rule that seperates the header, body, and footer*/
hr{
  margin:0px;
  border-color: #8ecccc;
}

/* About me section of homepage*/
.mytext {
margin:25px;
grid-column: 2/span 4 ;
grid-row:1; 
color: white;
margin-top: 275px;
}

/* Header for about me section of homepage*/
.container h2{
  margin-top: 225px;
  margin-left: 25px;
  grid-column: 2/span 12;
  grid-row:1;
  color: white;
}

/*Footer box containing social media links*/
.box{
background-color: #464b4d;
grid-column: 1/span 12 ;
grid-row:2;
height: 100px;
}

/*Allows for the adjustment of the portrait image for mobile devices*/
.responsive-image{
  max-width: 100%;
  max-height: auto;
  border-radius: 25px;
}

/*Adjusts footer image elements*/
footer ul{
margin-top: 0px;
margin-bottom: 0px;
}

footer ul img{
  margin-top: 40px;
  margin-left: 50px;
}

footer ul img:hover{
  cursor: pointer;
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  }

/*Removes all text decorations from hyperlinks*/
a:link { 
  text-decoration: none;
} 
a:visited { 
  text-decoration: none; 
} 
a:hover { 
  text-decoration: none; 
} 
a:active { 
  text-decoration: none; 
}

a{
  color: white;
}

/*Edits the Year 1 portfolio page*/
.projects{

margin: 30px;
justify-content: space-between;

}

.descriptions{
  display: flex;
margin: 50px;
justify-content: space-between;
color: white;
margin-left: 0px;
}

#descr{
  margin-left: 0px;
}

/*Displays error message for blank pages(Year 2 and 3)*/
.nothing{ 
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(5, 1fr);
}

/*Button that takes you to the home page*/
.nothing button{
  height:50px;
  border-radius: 50px;
  grid-column: 2;
  grid-row: 3;
  width: 150px;
  font-family: monospace;
  background-color:  #8ecccc;
  color: white;
  font-size: 30px;
  margin-top: 20px;
}

.nothing h3{
  font-family: monospace;
  color: white;
  font-size: 50px;
  grid-column: 2;
  grid-row: 2;
}

#pro1{
 grid-row: 1;
 grid-column: 1;
}

#pro1T {
  grid-row: 1;
  grid-column: 2 / span 2; }

#pro2{
 grid-row: 2;
 grid-column:3 ;
}

#pro2T {
  grid-row: 2;
  grid-column: 1 / span 2; 
}

#pro3{
grid-row: 3;
 grid-column:1 ;
}

#pro3T {
  grid-row: 3;
  grid-column: 2 / span 2;
}

#pro4{
grid-row: 4;
 grid-column:3 ;
}

#pro4T {
  grid-row: 4;
 grid-column: 1 / span 2; 
}

#pro5{
grid-row: 5;
 grid-column:1 ;
}

#pro5T {
  grid-row: 5;
  grid-column: 2 / span 2;
}

.projectContainer {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  grid-template-rows: repeat(3, 1fr); 
  gap: 10px; 
  margin: 25px;
  justify-content: center; 
  align-items: center; 
  text-align: left; 
  margin-top: 50px;
  color: white;
  row-gap: 35px;
}

/* Style for images within the grid container */
.projectContainer img {
  max-width: 100%; /* Ensure images don't exceed the container width */
  max-height: 100%; 
  display: block; 
  margin: auto; 
   border-radius: 10px;
}

.projectContainer p {
  margin: 25px; 
}

.pro1Container {
  display: grid; 
  grid-template-columns: repeat(3, 1fr);
   grid-template-rows: 400px 100px 150px 550px;
}

.pro2Container {
  display: grid; 
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 300px 100px 150px 350px;
}

.code{
  grid-column: 1 span 3;
}


.pro3Container {
  display: grid; 
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 120px 120px 720px 270px;
}

.pro4Container {
  display: grid; 
  grid-template-columns: repeat(1fr);
  grid-template-rows: 100px 650px 325px 325px 325px 450px 1200px 800px 800px 800px 800px 800px 800px 550px 175px 100px;
  color: white;
  grid-row-gap: 25px;
}

.pro5Container {
  display: grid; 
  grid-template-columns: repeat(1fr);
  grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto 100px;
  color: white;
  grid-row-gap: 25px;
}



.smallGridContainer {
  display: grid;
  grid-template-columns: 950px 475px 475px;
  grid-template-rows: 50px 400px px;
  background-color: #363636;
   border: 2px solid #8ecccc; 
}


.pro4Container h1 {
    margin-left: 25px;
}

.pro5Container h1 {
    margin-left: 25px;
}


.smallGridContainer h2 {
  grid-column: 1; 
    margin-left: 25px;
}



.smallGridContainer p {
  grid-column: 1; 
  margin-left: 25px;
  margin-right:  25px;
}



.smallGridContainer img {
  justify-self: center; /* Horizontally center the image */
  align-self: auto;
  box-shadow: 0px 4px 8px rgba(255, 255, 255, 0.5);
  position: relative;
  top: -20px; 
}


.proText{
 margin: 25px;
 color: white;
}

.codeColumn{
  overflow: auto;
  height: 600px;
  grid-column: 1;
  margin-left: 25px;
  background-color: black;
  border: solid black 2px;
}

.code-block {
  border-radius: 5px;
  overflow: hidden;
  grid-column: 1;
  margin-left: 25px;
  background-color: #212121;
  max-height: 340px;
  grid-row: 3;
  margin-bottom: 25px;
}

.code-header {
  background-color: #50717b;
  padding: 8px;
  font-weight: bold;
}

.code-content {
  max-height: 300px; /* Adjust as needed */
  overflow: auto;
}

pre {
  margin-left: 25px;
}

#pro1Text1 {
  grid-row: 1;
  grid-column: 1 / span 2;
}

#summaryPic{
   grid-row: 1;
  grid-column: 3;
  margin-top: 25px;
}



#summaryPic2{
   grid-row: 1;
  grid-column: 3;
  margin-top: 25px;
}


#pro1Text2 {
  grid-row: 2;
  grid-column: 1 / span 2;
}

#pro1Text3 {
  grid-row: 3;
  grid-column: 1 / span 2;
}

#conceptArt{
  grid-row: 4;
  grid-column: 3;
  margin-top: 25px;
}

#conceptArt2{
  grid-row: 4;
  grid-column: 3;
  margin-top: 25px;
}

#conceptArt p{
position: relative;
bottom: 20px;
left: 45px;
 }

 #conceptArt2 p{
position: relative;
bottom: 20px;
left: 175px;
 }

 #accessPic{
  position: relative;
top: 400px;
 }

#pro1Text4 {
  grid-row: 4;
  grid-column: 1 / span 2;
  margin-top: 25px;
}

#pro1Text5 {
  grid-row: 5;
  grid-column: 1 / span 2;
  margin-top: 25px;
}

.picContainer{
   display: grid; 
  grid-template-columns: repeat(2, 1fr);
   grid-template-rows: 4500px;
   position: relative;
   top: 100px;
}

.picContainer2{
   display: grid; 
  grid-template-columns: repeat(2, 1fr);
   grid-template-rows: 6800px;
   position: relative;
   top: 100px;
}

.picContainer3{
   display: grid; 
  grid-template-columns: repeat(2, 1fr);
   grid-template-rows: 5100px;
   position: relative;
   top: 100px;
}

.innerGridContainer2{
 grid-column: 2;
}

#truckPic{
position: relative;
top: 950px;
}

#themePic{
position: relative;
top: 950px;
}

.playButton {
  grid-column: 1; 
  grid-row: 1;
  width: 250px;
  height: 50px;
  margin: 25px;
  position: relative;
  border-radius: 10px;
  background-color: #464b4d;
  font-family: monospace;
  font-size: 30px;
  color: white;
  text-align: center; /* Align text to the center */
   line-height: 50px;
}

#playButton1{
  top: 315px;
}

#playButton2{
top: 225px;
   line-height: 50px;
}

/*Mobile format adjustments*/
@media only screen and (max-width: 600px){

  .mytext{
    grid-column: 1/span 12 ;
    grid-row:2;
    margin-top: 0px;
    grid-column: 1 span 12;
  }

  h2{
    display: none;
  }

  .image {
    grid-column: 1/span 12; 
    grid-row: 1;
    margin: 25px;
  }

  .box{
    grid-row:3;
    height: 50px;
    margin-bottom: 0px;

  }

  .navbar ul li{
    margin-right: 30px;
    position: relative; 
  }
/*hides h1 header element*/
  .header-container h1{
    display: none;

  }
/*Adjusts footer image sizes*/
  footer ul img{
    margin-top: 10px;
    margin-left: 40px;
    margin-right: 15px;
  }

/*Sticks footer to the bottom of the page*/
  footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  }

  .projects img{
    width:350px;
    height: auto;
    margin: 10px;
    margin-left: -10px; 
    margin-bottom: 300px;
  }

  .projects{
    display: grid;

  }

/*Adjusts project descriptions on Year 1 page*/
  #descr1{
    position: absolute;
    top: 400px;
    left: 20px;
  }

  #descr2{
    position: absolute;
    top: 950px;
    left: 20px;
  }

  #descr3{
    position: absolute;
    top: 1500px;
    left: 20px;
  }

  #pro1{
  width: 100%;
  height: auto;
  margin-left: 50px;
  }

  #pro2{
    width: 100%;
    height: auto;
    margin-left: 50px;
  }

  #pro3{
    width: 100%;
    height: auto;
    margin-left: 50px;
  }

}