/*Get the body styling for each page using a dark gray color and white text, alinging the items in the center, with overflow hidden in the x direction*/
body {
  font-family: 'Poppins', sans-serif;
  background-color: #2b2b2b;
  color: white;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow-x: hidden; /* Remove scrollbars */
}

/*Make the grid layout for the pages home , qualifications, and service page*/
.container, .container-2, .service-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 20px;
  width: 90%;
  max-width: 3000px;
  box-sizing: border-box;
  position: relative;
}

/* Align the photo on the home page */
.photo img {
  max-width: 200px;
  max-height: 150px;
  object-fit: cover;
  border-radius: 50%;
}

/* Edit the my info section to appear in teh correct place in the grid
and create an underline below Computer Science for visual appeal */

.my-info {
  grid-column: 1 / 2;
  display: flex;
  flex-direction: column;;
}
.my-info h3::after {
  content: "";
  display: block;
  width: 50%;
  height: 1px;
  background-color: white;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Make the navigation menu appear on the right part of the grid with bold white letters that change orange when hovered over */
.navigation-menu {
  grid-column: 2 / 3;
  display: flex;  flex-direction: column;
  text-align: right;
}

.navigation-menu a {
  font-size: 60px;
  font-weight: bold;
  color: white;
  text-decoration: none;
  margin-bottom: 10px;
}

.navigation-menu a:hover {
  color: orange;
}

/* Align the interests section in the correct grid area and make the links orange  */
.interests {
  grid-column: 1 / 2;
  text-align: left;
}

.interests a {
  color: orange;
  text-decoration: none;
}

/* Align the about me in the right place and maje the text orange for it */
.about {
  grid-column: 2 / 2;
  text-align: left;
}

.about p {
  color: orange;
}

 /* Heading Elements get fixed */
 h1, h2, h3 {
  margin: 5px 0;
}



/* QUALIFICATIONS PAGE CSS STARTS HERE */

/*Align the resume to be in the right area and make it a bold white title in a box that turns orange when hovered over*/
.resume {
  grid-column: 1 / 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}

.resume a {
  font-size: 24px;
  font-weight: bold;
  color: white;
  text-decoration: none;
  /* Create box around resume */
  border: 2px solid white;
  padding: 10px 20px;
}


.resume a:hover {
  color: orange;
  border-color: orange;
}

/* Create a line that extends from the end of the screen to the resume box  and interests box*/
.resume::before,.Interests::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 500%;
  height: 1px;
  background-color: white;
}

/* Align the interests section and make the box around it along with creating a hover orange color */
.Interests {
  grid-column: 1 / 2;
  border: 2px solid white;
  padding: 20px;
  position: relative;
}

.Interests:hover {
  border-color: orange;
  background-color: rgba(255, 165, 0, 0.2);
}

.Interests h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.Interests p {
  margin: 5px 0;
}

.Interests a {
  color: darkorange;
  text-decoration: none;
  transition: color 0.3s ease;
}

/*Align the skills section with a box around it that hovers yellow in a simaler way to an interest sections*/
.skills {
  grid-column: 2 / 3;
  border: 2px solid white;
  padding: 20px;
  position: relative;
}

.skills:hover {
  border-color: orange;
  background-color: rgba(255, 165, 0, 0.2);
}

.skills h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.skills::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 500%;
  height: 1px;
  background-color: white;
}

/* Create a directrory for the other tabs in bold white text that turns orange when hovered over */
.navigation-2 {
  grid-column: 1 / 3;
  text-align: center;
  margin-top: 40px;
}

.navigation-2 a {
  font-size: 24px;
  font-weight: bold;
  color: white;
  text-decoration: none;
  margin: 0 15px;
  transition: color 0.3s ease;
}

.navigation-2 a:hover {
  color: orange;
}

/* Fix the qualifications title */
.title {
  margin-top: 20px;
}

.title h1 {
  text-align: center;
  font-size: 48px;
  font-weight: bold;
  letter-spacing: 5px;
  margin-bottom: 40px;
}


/* SERVICE CSS BEGINS HERE */
.service-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

/* Create the box styling for the service items */
.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #2b2b2b;
  padding: 20px;
  border: 2px solid white;
  border-radius: 10px;
  width: 300px;
  margin: 10px; 
}

/* Create a hover of orange for the boxes */

.service-item:hover {
  border-color: orange;
  background-color: rgba(255, 165, 0, 0.2); /* Light orange background on hover */
}

.service-item a {
  color: orange;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

/* PORTFOLIO CSS */

.portfolio-title {
  margin-top: 20px;
}

/* Style the Portfolio container */
.portfolio-container {
  display: flex;
  justify-content: space-around;
  width: 100%;
  max-width: 1200px;
  flex-wrap: wrap;
}

/* Style the portfolio items so that there is box around them with a roange border  */
.portfolio-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #2c2c2c;
  padding: 30px;
  border: 2px solid #ffa500;
  border-radius: 15px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 350px;
  margin: 20px;
  text-align: center;
}

/* When you hover iot hsould zoom in a little bit and create an dorange shadow */
.portfolio-item:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(255, 165, 0, 0.5);
}

.portfolio-item h2 {
  font-size: 28px;
  color: white;
  margin-bottom: 15px;
}

.portfolio-item a {
  color: orange;
  text-decoration: none;
  font-weight: bold;
}

button {
  background-color: #2b2b2b;
  color: white;
  border: 2px solid orange;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  margin: 10px;
}

button:hover {
  background-color: orange;
  color: black;
  border-color: black;
}

/*Everything below this created by chatgpt*/
/* General body styling */
body {
  font-family: 'Poppins', sans-serif;
  background-color: #2b2b2b;
  color: white;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow-x: hidden; /* Allow vertical scroll */
}

/* Main container styling */
.fun-container {
  width: 90%;
  max-width: 1000px;
  padding: 20px;
  box-sizing: border-box;
}

/* Title styling */
.title h1 {
  text-align: center;
  font-size: 60px;
  font-weight: bold;
  letter-spacing: 5px;
  margin-bottom: 40px;
  color: #FFA500; /* Orange for a vibrant look */
}

/* Prompt box styling */
.prompt-box {
  border: 5px dotted #FFA500;
  padding: 20px;
  margin-bottom: 40px;
  background-color: rgba(255, 165, 0, 0.2); /* Light orange background */
  position: relative;
  transform: rotate(-2deg); /* Tilted for a quirky effect */
}

.prompt-box h2 {
  font-size: 26px;
  color: #FFA500;
  margin-bottom: 10px;
}

.prompt-box p {
  font-size: 18px;
  color: white;
  margin: 0;
}

/* Fact section styling */
.fact {
  border: 3px dashed #FFA500;
  padding: 20px;
  margin-bottom: 40px;
  position: relative;
  transform: rotate(2deg); /* Tilted the opposite way */
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.fact:hover {
  transform: rotate(0deg); /* Straighten on hover */
  background-color: rgba(255, 165, 0, 0.3); /* Slightly darker orange on hover */
}

.fact h2 {
  font-size: 30px;
  margin-bottom: 10px;
}

.fact p {
  margin: 5px 0 15px 0;
}

/* Navigation links at the bottom */
.navigation-2 {
  text-align: center;
  margin-top: 40px;
}

.navigation-2 a {
  font-size: 24px;
  font-weight: bold;
  color: white;
  text-decoration: none;
  margin: 0 15px;
  transition: color 0.3s ease;
}

.navigation-2 a:hover {
  color: #FFA500;
}