/* Global Page Styling */
body {
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
   background-color:#cccccc;
   color: #f7e7b4; /* soft gold */
   text-align: center;
}

/* Header */
header {
   background-color: #600000;
   border-bottom: 3px solid #d4af37;
   padding: 20px 0;
}

/* Main Content Box */
article {
   background-color: #600000;
   width: auto;
   max-width: 100%;
   margin: 0;
   padding: 25px;
   border-radius: 8px;
   border: none;
   box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
   flex: 1;
}

/* Inner Content Box */
.inner-box {
   background-color: #7a0000;
   color: #d4af37;
   padding: 20px;
   border-radius: 10px;
}

/* Section Headers */
.inner-box h2 {
   color: #d4af37;
   border-bottom: 2px solid #d4af37;
   padding-bottom: 5px;
   margin-top: 40px;
   margin-bottom: 15px;
   font-size: 1.4rem;
}

/* Project List */
ul {
   list-style: none;
   padding: 0;
}

ul li {
   margin: 10px 0;
}


/* Expandable Project Sections Styles */


/* Project container */
.project {
   margin: 15px 0;
   text-align: left;
}

/* Toggle button */
.project-toggle {
   width: 100%;
   background-color: #600000;
   color: #f7e7b4;
   border: 2px solid #d4af37;
   padding: 10px;
   font-size: 1.1rem;
   border-radius: 6px;
   cursor: pointer;
   transition: 0.3s;
   text-align: left;
}

.project-toggle:hover {
   background-color: #d4af37;
   color: #600000;
}

.project-toggle.active {
   background-color: #d4af37;
   color: #600000;
}

/* Hidden details box */
.project-details {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.4s ease, padding 0.3s ease;
   background-color: #7a0000;
   border-left: 3px solid #d4af37;
   border-right: 3px solid #d4af37;
   border-bottom: 3px solid #d4af37;
   border-radius: 0 0 6px 6px;
   padding: 0 12px;
}

/* When open */
.project-details.open {
   max-height: 300px;
   padding: 12px;
}

/* Footer */
footer p {
   margin-top: 30px;
   color: #3a3a3c;
   font-size: 0.9rem;
   opacity: 0.9;
}

footer {
   text-align: center;
}

/* All project links gold */
.project-details a {
   color: #d4af37;
   text-decoration: none;
   font-weight: bold;
   transition: 0.3s;
}

/* Hover effect for project links */
.project-details a:hover {
   color: #f7e7b4; /* soft gold */
   text-shadow: 0 0 6px #d4af37;
}

/* Header layout */
.header-container {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
   padding: 20px;
}

/* Profile photo styling */
.profile-pic {
   width: 120px;
   height: 120px;
   border-radius: 50%;
   object-fit: cover;
   border: 3px solid #d4af37;
}

/* Name and email text */
.header-text h1 {
   margin: 0;
   font-size: 1.8em;
   color: #d4af37;
}

.student-email {
   margin: 5px 0 0 0;
   font-size: 1.1em;
   color: #d4af37;
}

/* Three column layout */
.three-column {
   display: flex;
   gap: 20px;
   width: 100%;
   max-width: 1800px;
   margin: 0 auto;
   margin-top: 40px;
}

.column {
   background-color: #600000;
   border: 3px solid #d4af37;
   border-radius: 10px;
   padding: 10px;
   flex: 2;
}

.column:nth-child(2) {
   flex: 3;
   display: flex;
   flex-direction: column;
   padding: 0;
}

.column:last-child {
   align-self: flex-start;
}

/* Sidebar Table of Contents inside left column */
#tocSidebar {
   position: sticky;
   top: 20px;
   background: #7a0000;
   padding: 15px;
   border-radius: 8px;
   margin-bottom: 20px;
}

#tocSidebar h2 {
   font-size: 1.2em;
   margin-bottom: 10px;
   color: #d4af37;
   border-bottom: 2px solid #d4af37;
   padding-bottom: 5px;
}

#tocSidebar ul {
   list-style: none;
   padding-left: 0;
}

#tocSidebar li {
   margin: 8px 0;
}

#tocSidebar a {
   text-decoration: none;
   color: #d4af37;
   font-weight: bold;
}

#tocSidebar a:hover {
   color: #f7e7b4;
}

/* Blog under TOC */
#newsBlog {
   position: sticky;
   top: 425px;
   background-color: #f7f7f7;
   color: #333;
   padding: 15px;
   border-radius: 8px;
   border: 1px solid #ccc;
   box-shadow: 0 0 10px rgba(0,0,0,0.15);
   margin-top: 20px;
}

#newsBlog h2 {
   color: #600000;
   border-bottom: 2px solid #d4af37;
   padding-bottom: 5px;
   margin-bottom: 15px;
}

.blog-entry {
   background-color: #ffffff;
   padding: 10px;
   margin-bottom: 15px;
   border-radius: 6px;
   border-left: 4px solid #d4af37;
}

.blog-entry h3 {
   margin: 0 0 5px 0;
   color: #600000;
}

.blog-entry p {
   margin: 0;
   color: #333;
}

/* Blog toggle button */
.blog-toggle {
   width: 100%;
   background-color: #600000;
   color: #f7e7b4;
   border: 2px solid #d4af37;
   padding: 10px;
   font-size: 1rem;
   border-radius: 6px;
   cursor: pointer;
   text-align: left;
   transition: 0.3s;
   display: block;
}

.blog-toggle:hover {
   background-color: #d4af37;
   color: #600000;
}

.blog-toggle.active {
   background-color: #d4af37;
   color: #600000;
}

/* Hidden blog details */
.blog-details {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.4s ease, padding 0.3s ease;
   background-color: #ffffff;
   padding: 0 10px;
   border-left: 4px solid #d4af37;
   border-radius: 0 0 6px 6px;
}

/* When open */
.blog-details.open {
   max-height: 300px;
   padding: 10px;
}

.blog-title,
.blog-subtitle {
   display: block !important; /* forces stacking */
}

.blog-title {
   font-size: 1.1rem;
   font-weight: bold;
}

.blog-subtitle {
   font-size: 0.9rem;
   color: #f7e7b4;
   margin-top: 3px;
}

/* Interactive Graphic Container */
#interactiveGraphic {
   background-color: #600000;
   padding: 20px;
   border-radius: 10px;
   border: 3px solid #d4af37;
   margin-bottom: 20px;
   text-align: center;
}

/* Title inside graphic box */
#interactiveGraphic h2 {
   color: #d4af37;
   border-bottom: 2px solid #d4af37;
   padding-bottom: 5px;
   margin-bottom: 15px;
}

#graphicDescription {
   margin-top: 15px;
   background-color: #300000;
   padding: 10px;
   border-radius: 8px;
   color: #f7e7b4;
   font-size: 0.95em;
}

/* Square Shape */
#spinShape {
   width: 120px;
   height: 120px;
   background-color: red; /* starting color */
   margin: 0 auto;
   border-radius: 10px;
   transition: background-color 0.3s ease;
}

/* Spin Animation */
@keyframes spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}

/* Rainbow Animation */
@keyframes rainbow {
   0%   { background-color: red; }
   16%  { background-color: orange; }
   33%  { background-color: yellow; }
   50%  { background-color: green; }
   66%  { background-color: blue; }
   83%  { background-color: indigo; }
   100% { background-color: violet; }
}

/* Combined animation class */
.spinRainbow {
   animation: spin 1.5s linear infinite, rainbow 3s linear infinite;
}

/* Rock Paper Scissors Game Box */
#rpsGame {
   background-color: #600000;
   padding: 20px;
   border-radius: 10px;
   border: 3px solid #d4af37;
   margin-top: 20px;
   text-align: center;
   color: #d4af37;
}

#rpsGame h2 {
   border-bottom: 2px solid #d4af37;
   padding-bottom: 5px;
   margin-bottom: 15px;
}

#rpsResult {
   background-color: #300000;
   padding: 15px;
   border-radius: 10px;
   margin: 15px 0;
   font-size: 1.2em;
   color: #f7e7b4;
}

#rpsScore p {
   margin: 5px 0;
   font-size: 1.1em;
}

#rpsComputerChoice {
   background-color: #400000;
   padding: 10px;
   border-radius: 10px;
   margin: 10px 0;
   font-size: 1.1em;
   color: #ffdf8f;
}

/* Budget Calculator Box */
#budgetBox {
   background-color: #600000;
   padding: 20px;
   border-radius: 10px;
   border: 3px solid #d4af37;
   margin-top: 20px;
   text-align: center;
   color: #d4af37;
}

#budgetBox h2, #budgetBox h3 {
   border-bottom: 2px solid #d4af37;
   padding-bottom: 5px;
   margin-bottom: 15px;
}

#budgetBox input {
   width: 80%;
   padding: 10px;
   margin: 8px 0;
   border-radius: 5px;
   border: 2px solid #d4af37;
   background-color: #300000;
   color: #f7e7b4;
}

#budgetBox button {
   background-color: #d4af37;
   color: #600000;
   padding: 10px 20px;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   font-weight: bold;
   margin-top: 10px;
}

#budgetBox button:hover {
   background-color: #f7e7b4;
}

#itemList {
   list-style: none;
   padding: 0;
   margin-top: 10px;
}

#itemList li {
   background-color: #300000;
   padding: 10px;
   margin: 5px 0;
   border-radius: 8px;
   color: #ffdf8f;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.removeBtn {
   background-color: #d4af37;
   color: #600000;
   border: none;
   padding: 5px 10px;
   border-radius: 5px;
   cursor: pointer;
}

#budgetResult {
   background-color: #300000;
   padding: 15px;
   border-radius: 10px;
   margin-top: 15px;
   font-size: 1.2em;
   color: #ffdf8f;
}

#interactiveSection {
   padding-bottom: 20px;
   margin-bottom: 20px;
   border-bottom: 3px solid #d4af37;
}