/*
   Dwight Daniels Jr, July 12, 2026 IST-239-W01 PROJECT LAB 02

   Project Lab 02
   Final Exam Project - Portfolio Landing Page

   This stylesheet creates the three-column
   liquid layout and overall styling for the
   IST239 Final Exam Project portfolio.

   Filename: styles.css
*/

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   font-family: Arial, Helvetica, sans-serif;
   background-color: #f5f5f5;
   color: #222;
   width: 95%;
   max-width: 1800px;
   margin: 20px auto;
}

/* Header */

header {
   background-color: #003366;
   color: white;
   padding: 25px 35px;
   display: flex;
   align-items: center;
   gap: 20px;
}

.headerPhoto {
   width: 140px;
   flex-shrink: 0;
}

.profilePic {
   display: block;
   width: 130px;
   height: 130px;
   object-fit: cover;
   border-radius: 50%;
   border: 3px solid white;
}

.headerText h1 {
   font-size: 2em;
}

.headerText h2 {
   margin: 5px 0;
   font-size: 1.3em;
}

.email {
   font-weight: bold;
}

/* Three-column layout */

.pageLayout {
   display: flex;
   gap: 20px;
   margin-top: 20px;
}

.leftColumn {
   width: 19%;
}

.centerColumn {
   width: 62%;
}

.rightColumn {
   width: 19%;
}

.leftColumn,
.centerColumn,
.rightColumn {
   background: white;
   padding: 15px;
   border-radius: 5px;
   box-shadow: 0 0 8px rgba(0,0,0,.15);
}

/* Navigation */

.leftColumn ul {
   list-style: none;
}

.leftColumn li {
   margin-bottom: 10px;
}

.leftColumn a {
   text-decoration: none;
   color: #003366;
   font-weight: bold;
}

.leftColumn a:hover {
   text-decoration: underline;
}

/* Tables */

table {
   width: 100%;
   border-collapse: collapse;
   margin: 15px 0;
}

th,
td {
   border: 1px solid #999;
   padding: 10px;
}

th {
   background-color: #d9d9d9;
}

.projectGroup {
   margin-bottom: 30px;
}

/* Footer */

footer {
   margin-top: 20px;
   background-color: #003366;
   color: white;
   text-align: center;
   padding: 22px;
}

/* Mobile */

@media screen and (max-width: 900px) {

   .pageLayout {
      flex-direction: column;
   }

   .leftColumn,
   .centerColumn,
   .rightColumn {
      width: 100%;
   }

   header {
      flex-direction: column;
      text-align: center;
   }
}

/*--------------------------------------------*/
/* JavaScript Navigation Buttons */
/*--------------------------------------------*/

.leftColumn a {
   display: block;
   padding: 8px 10px;
   border-radius: 5px;
   transition: background-color 0.3s ease,
               color 0.3s ease;
}

.leftColumn a:hover {
   background-color: #003366;
   color: white;
   text-decoration: none;
}

.leftColumn hr {
   margin: 15px 0;
}

/* Interactive Graphic Feature */

.slideshowBox {
   text-align: center;
   margin-top: 20px;
}

.slideshowBox img {
   width: 500px;
   max-width: 100%;
   border: 2px solid #003366;
   border-radius: 6px;
}

.slideshowBox button {
   margin: 15px;
   padding: 8px 18px;
   cursor: pointer;
   font-size: 1em;
}

/* Number Guessing Game */

#game {
   text-align: center;
   margin-top: 30px;
}

#guessInput {
   width: 70px;
   padding: 8px;
   margin-right: 10px;
   font-size: 1em;
}

#guessButton {
   padding: 8px 16px;
   font-size: 1em;
   cursor: pointer;
}

#guessResult {
   margin-top: 15px;
   font-weight: bold;
}

/* News Blog */

#blog {
   margin-top: 30px;
}

#blog article {
   background: #f8f8f8;
   border-left: 5px solid #003366;
   padding: 15px;
   margin-bottom: 15px;
}

#blog h3 {
   margin-top: 0;
   color: #003366;
}

/* GPA Calculator */

#calculator {
   text-align: center;
   margin-top: 30px;
}

#calculator input {
   width: 120px;
   padding: 8px;
   font-size: 1em;
}

#calculator button {
   padding: 8px 16px;
   font-size: 1em;
   cursor: pointer;
}

#gpaResult {
   margin-top: 15px;
   color: #003366;
}