body { background-color: black; margin:0; padding:20px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: Arial, sans-serif; }
h1 { text-align: center; color: #f9f6e3; }
#outputBox.conclusionbox { background-color: #f9f6e3; width: 80%; height:300px; padding: 20px 20px; box-sizing: border-box; border: 2px solid #666; margin-bottom: 20px;}
.data-table { width: calc(100% - 40px); max-width: 1200px; margin: 0 auto; border-collapse: collapse; }
.data-table th, .data-table td { border: 1px solid #f9f6e3; padding: 10px; text-align: center; color: #f9f6e3; }
.data-table th { background-color: #f9f6e3; color: black; cursor: pointer; position:relative; }
.data-table tr:hover td { background-color: #fdeb90; cursor: pointer; color: black; }
header {width: 100%;text-align: center;margin-bottom: 20px;}
footer {width: 100%;text-align: center;margin-top: 20px;color: #999999;font-size: 14px;}
figure { width: 100%; max-width: 1200px; margin: 0 auto;}
figcaption { text-align: center; margin: 10px 0; color: #f9f6e3;}
.glossary { width: 80%; max-width: 1200px; margin: 30px auto; background-color: #f9f6e3; padding: 20px; border-radius: 8px;}
.glossary dt { font-weight: bold; color: #000000; margin: 10px 0 5px; cursor: pointer;}
.glossary dd { display: none; margin:0 0 15px 20px; color: #000000; line-height: 1.5;}
.tooltip { display: none; position: absolute; top: 40px; left: 50%; transform: translateX(-50%); background-color: #e2d99c; color: #000; padding: 10px; border-radius: 4px; width: 200px; font-size: 14px; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.walkthrough { width: 80%; max-width: 1200px; margin: 30px auto; background-color: #1a1a1a; padding: 20px; border-radius: 8px;}
.walkthrough-step { margin: 20px 0; padding: 15px; border: 1px solid #f9f6e3; border-radius: 4px; cursor: pointer;}
.walkthrough-step h3 { color: #fdeb90; margin-top: 0; }
.highlight { animation: highlight 2s ease-in-out; }
@keyframes highlight { 0% { background-color: #fdeb90; } 100% { background-color: inherit; } }
.fade-in { animation: fadeIn 0.5s ease; }
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
.team-name { text-decoration: underline; color: #fdeb90; cursor: pointer;}
.core-column { background-color: #2d2d2d; transition: background-color 0.3s, font-size 0.3s; }

nav { background-color: #1a1a1a; width: 100%; padding: 15px 0; text-align: center; border-bottom: 2px solid #fdeb90; margin-bottom: 20px; }
nav a { color: #f9f6e3; text-decoration: none; font-size: 18px; margin: 0 20px; font-weight: bold; }
nav a:hover { color: #fdeb90; text-decoration: underline; }