/* General body styling */
body {
    font-family: 'Inter', sans-serif;
    background-color: #ffffff; /* Light gray background */
    color: #333;
    line-height: 1.6;
    min-height: 100vh; /* Full viewport height */
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* Custom fonts for project panels */
/* New font for the 3rd panel */
.font-georgia {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: normal;
}
/* New font for the 1st panel */
.font-arial {
    font-family: Arial, sans-serif;
}
/* New font for the 2nd panel */
.font-sans-serif {
    font-family: sans-serif;
}
/* New font for the 5th panel */
.font-canterbury {
    font-family: 'Canterbury', cursive;
}
/* Font for the new panel */
.font-iowan {
    font-family: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
    font-weight: normal;
}
/* Font for the AGI panel */
.font-helvetica-neue {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Font for the Conclusion panel */
.font-american-typewriter {
    font-family: "American Typewriter", "Courier New", monospace, serif;
}

/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Header Section */
header {
    background:  #1f2937;
    /*background: linear-gradient(to right, #2563eb, #6d28d9); /* from-blue-600 to-purple-700 */
    color: white;
    padding: 1.5rem; /* p-6 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-lg */
    border-bottom-left-radius: 0.5rem; /* rounded-b-lg */
    border-bottom-right-radius: 0.5rem; /* rounded-b-lg */
}

header .container {
    max-width: 1280px; /* mx-auto */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

header h1 {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 700; /* font-bold */
    letter-spacing: -0.025em; /* tracking-tight */
    margin-bottom: 0.5rem; /* mb-2 */
}

header p {
    font-size: 1.125rem; /* text-lg */
    opacity: 0.9;
}

/* Main Content - Projects Section */
main {
    flex-grow: 1; /* flex-grow */
    max-width: 1280px; /* mx-auto */
    margin-left: auto;
    margin-right: auto;
    padding: 1rem; /* p-4 */
    display: grid;
    grid-template-columns: 1fr; /* grid-cols-1 */
    gap: 1.5rem; /* gap-6 */
}

/* Project Panel Styling */
.project-panel {
    padding: 1.5rem; /* p-6 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-md */
    transition: transform 0.3s ease-in-out; /* transition-transform duration-300 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.project-panel:hover {
    transform: scale(1.02); /* hover:scale-[1.02] */
}

.project-panel h2 {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    margin-bottom: 0.75rem; /* mb-3 */
}

.project-panel p {
    margin-bottom: 1rem; /* mb-4 */
}

.project-panel img {
    width: 100%; /* w-full */
    height: 12rem; /* h-48 */
    object-fit: contain;
    border-radius: 0.5rem; /* rounded-lg */
    margin-bottom: 1rem; /* mb-4 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* shadow-sm */
}

.project-panel .links-container {
    display: flex;
    flex-direction: column; /* flex-col */
    justify-content: space-between;
    gap: 0.75rem; /* gap-3 */
    margin-top: 1rem; /* mt-4 */
    align-items: stretch; /* Added to make children fill the width */
}

.project-panel .links-container a {
    color: white;
    padding: 0.5rem 1.25rem; /* px-5 py-2 */
    border-radius: 0.5rem; /* rounded-lg */
    transition: background-color 0.2s ease-in-out; /* transition-colors duration-200 */
    text-align: center;
    font-weight: 600; /* font-semibold */
    flex: 1; /* flex-1 */
    text-decoration: none; /* Remove underline from links */
    display: flex; /* Added for vertical centering of text */
    align-items: center; /* Added for vertical centering of text */
    justify-content: center; /* Added for horizontal centering of text */
    min-height: 2.5rem; /* Explicit min-height for consistent button height */
}

/* Project specific colors */
/* The Archiv */
.project-panel.maddys-archive { /* Changed from .madys-archive */
    background-color: #c2ebff;
}
.project-panel.maddys-archive h2 { /* Changed from .madys-archive */
    color: #000000;
}
.project-panel.maddys-archive p { /* Changed from .madys-archive */
    color: #05090b;
}
.project-panel.maddys-archive .links-container a:first-child { /* Changed from .madys-archive */
    background-color: #74d1ff;
}
.project-panel.maddys-archive .links-container a:first-child:hover { /* Changed from .madys-archive */
    background-color: #3c55f8;
}
.project-panel.maddys-archive .links-container a:last-child { /* Changed from .madys-archive */
    background-color: #74d1ff;
}
.project-panel.maddys-archive .links-container a:last-child:hover { /* Changed from .madys-archive */
    background-color: #3c55f8;
}


/* Teachable Machine */
.project-panel.teachable-machine {
    background-color:#e4f8fc ; /* bg-blue-100 */
}
.project-panel.teachable-machine h2 {
    color: #2e8b57; /* text-blue-800 */
}
.project-panel.teachable-machine p {
    color: #555; /* text-blue-700 */
}
.project-panel.teachable-machine .links-container a:first-child { /* GitHub button */
    background-color: #4CAF50; /* bg-blue-600 */
    border:#4CAF50;
}
.project-panel.teachable-machine .links-container a:first-child:hover {
    background-color:#45a049 ; /* hover:bg-blue-700 */
}
.project-panel.teachable-machine .links-container a:last-child { /* Feedback button */
    background-color: #4CAF50; /* bg-blue-500 */
    border:#4CAF50;
}
.project-panel.teachable-machine .links-container a:last-child:hover {
    background-color:#45a049; /* hover:bg-blue-600 */
   
}

/* Project 2: Nature of Code */
.project-panel.nature-of-code {
    background-color: #93b4bf; /* bg-green-100 */
}
.project-panel.nature-of-code h2 {
    color: #0c253d; /* text-green-800 */
}
.project-panel.nature-of-code p {
    color: #164068; /* text-green-700 */
}
.project-panel.nature-of-code .links-container a:first-child {
    background-color: #415295; /* bg-green-600 */
}
.project-panel.nature-of-code .links-container a:first-child:hover {
    background-color: #28325c; /* hover:bg-green-700 */
}
.project-panel.nature-of-code .links-container a:last-child {
    background-color: #415295; /* bg-green-500 */
}
.project-panel.nature-of-code .links-container a:last-child:hover {
    background-color: #28325c; /* hover:bg-green-700 */
   
}

/* Project 3: Text the universal interface */
.project-panel.text-universal-interface {
    background-color: #f0f0f0;
}
.project-panel.text-universal-interface h2 {
    color: #660000; /* text-yellow-800 */
}
.project-panel.text-universal-interface p {
    color: #990000; /* text-yellow-700 */
}
.project-panel.text-universal-interface .links-container a:first-child { /* GitHub button */
    background-color: #800000; /* Red background */
    border: 1px solid #800000; /* Darker red border */
}
.project-panel.text-universal-interface .links-container a:first-child:hover {
    background-color: #660000; /* Darker red on hover */
}
.project-panel.text-universal-interface .links-container a:last-child { /* Feedback button */
    background-color: #800000; /* Lighter red background */
    border: 1px solid #800000; /* Red border */
}
.project-panel.text-universal-interface .links-container a:last-child:hover {
    background-color: #660000; /* Red on hover */
}

/* Project 4: AGI */
.project-panel.agi-debate {
    background-color: #bae2ff; /* bg-red-100 */
}
.project-panel.agi-debate h2 {
    color: #28195f; /* text-red-800 */
}
.project-panel.agi-debate p {
    color: #311f72; /* text-red-700 */
}
.project-panel.agi-debate .links-container a:first-child {
    background-color: #6878f2; /* bg-red-600 */
}
.project-panel.agi-debate .links-container a:first-child:hover {
    background-color: #4954a5; /* hover:bg-red-700 */
}
.project-panel.agi-debate .links-container a:last-child {
    background-color: #6878f2; /* bg-red-500 */
}
.project-panel.agi-debate .links-container a:last-child:hover {
    background-color: #4954a5; /* Red on hover */
}

/* Project 5: Gaphic Novel */
.project-panel.generative-novel {
    background-color: #f6f1d3; /* bg-indigo-50 */
}
.project-panel.generative-novel h2 {
    color: #382818; /* text-indigo-800 */
}
.project-panel.generative-novel p {
    color: #3e2a14; /* text-indigo-700 */
}
.project-panel.generative-novel .links-container a:first-child {
    background-color: #5c3a1e; /* bg-indigo-600 */
}
.project-panel.generative-novel .links-container a:first-child:hover {
    background-color: #3e2a14; /* hover:bg-indigo-700 */
}
.project-panel.generative-novel .links-container a:last-child {
    background-color: #5c3a1e; /* bg-indigo-500 */
}
.project-panel.generative-novel .links-container a:last-child:hover {
    background-color: #3e2a14; /* hover:bg-indigo-600 */
}

/* Project 6: Fazit */
.project-panel.conclusion-panel-class {
    background-color: #f5f3ff; /* bg-purple-50 */
}
.project-panel.conclusion-panel-class h2 {
    color: #421885; /* text-purple-800 */
}
.project-panel.conclusion-panel-class p {
    color: #4f2598; /* text-purple-700 */
}
.project-panel.conclusion-panel-class .links-container a:first-child {
    background-color: #6b31d0; /* bg-purple-600 */
}
.project-panel.conclusion-panel-class .links-container a:first-child:hover {
    background-color: #6d28d9; /* hover:bg-purple-700 */
}
.project-panel.conclusion-panel-class .links-container a:last-child {
    background-color: #714bca; /* bg-purple-500 */
}
.project-panel.conclusion-panel-class .links-container a:last-child:hover {
    background-color: #4d2394; /* hover:bg-purple-600 */
}


/* Footer Section */
footer {
    background-color: #1f2937; /* bg-gray-800 */
    color: white;
    padding: 1.5rem; /* p-6 */
    text-align: center;
    margin-top: auto; /* mt-auto */
    border-top-left-radius: 0.5rem; /* rounded-t-lg */
    border-top-right-radius: 0.5rem; /* rounded-t-lg */
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); /* shadow-inner */
}

footer .container {
    max-width: 1280px; /* mx-auto */
    margin-left: auto;
    margin-right: auto;
}

footer p {
    font-size: 0.875rem; /* text-sm */
}

footer p:last-child {
    font-size: 0.75rem; /* text-xs */
    margin-top: 0.25rem; /* mt-1 */
    opacity: 0.8;
}

/* Responsive Adjustments */
@media (min-width: 768px) { /* md breakpoint */
    header h1 {
        font-size: 3rem; /* md:text-5xl */
    }
    header p {
        font-size: 1.25rem; /* md:text-xl */
    }
    main {
        padding: 2rem; /* md:p-8 */
        grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
    }
    .project-panel .links-container {
        flex-direction: row; /* sm:flex-row */
        align-items: center; /* Adjust for row layout if needed, though flex:1 usually handles this */
    }
}

@media (min-width: 1024px) { /* lg breakpoint */
    main {
        grid-template-columns: repeat(3, 1fr); /* lg:grid-cols-3 */
    }
}