/* General Styles & Resets - Dark Theme */
* {
    box-sizing: border-box;
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
}

html {
    min-height: 105%;
    height: 100%;
}

body {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    /* --- Dark Background --- */
    background-color: #1a1a1a; /* Dark Gray */
    text-align: center;
    /* --- Light Text Color --- */
    color: #e0e0e0; /* Light Gray */
    font-family: 'Open Sans', sans-serif, Arial;
    font-weight: 300;
    font-size: 20px;
    line-height: 150%;
    min-height: 100%;
    height: 100%;
}

/* Profile Image */
.profile_image {
    width: 100px;
    height: 100px;
    background-image: url(marc.jpg); /* Check path! */
    background-size: 100%;
    border-radius: 50%;
    text-align: center;
    margin: 0 auto;
    display: block;
    /* Optional: Add a subtle border if needed against dark background */
    /* border: 1px solid #444; */
}

/* Links - Dark Theme */
a {
    color: #3498db; /* Brighter Blue for better contrast on dark bg */
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/* Special underline hover - Dark Theme */
a.-underline:hover {
    background-size: 1px 1em;
    /* Use background color for first shadow, accent for second */
    box-shadow: inset 0 -0.185em #1a1a1a, inset 0 -0.2em #3498db;
    display: inline;
    transition: all .05s linear;
    -webkit-transition: all .05s linear;
}

/* Text & Spacing Utilities */
.description p:first-child {
    margin-top: 0;
}

.meta {
    font-size: 20px;
    color: #929292; /* Kept as is, should be readable */
    font-weight: 300;
    margin-bottom: 5%;
}

.-bottom_space { padding-bottom: 100px; }
.-top_space_small { padding-top: 20px; }
.-top_space_extra_small { padding-top: 25px; }
.-top_margin_small { margin-top: 50px; }
.-light_bold { font-weight: 400; }
.-left { text-align: left; }
.-centered { text-align: center; margin-left: auto; margin-right: auto; }

/* Headings - Dark Theme */
h1 {
    font-size: 30px;
    font-weight: 400;
    color: #3498db; /* Accent Color */
    line-height: 130%;
    margin-bottom: 10px;
}
h1.-small_margin_bottom { margin-bottom: 0px; margin-top: 0px; }

h2 { /* "Hello I'm Marc Drockur" */
    font-size: 28px;
    font-weight: 400;
    color: #3498db; /* Accent Color */
    line-height: 130%;
    margin-top: 0;
    margin-bottom: 10px;
}
h3 {
    font-size: 20px;
    font-weight: 400;
    color: #e0e0e0; /* Main text color */
    line-height: 130%;
}

/* Layout Containers */
.wrapper {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    height: 100%;
    min-height: 100%;
    vertical-align: middle;
    box-sizing: border-box;
    padding: 100px;
}
.wrapper.-no_padding { padding: 0px; }

.wrapper .content {
    text-align: left;
    margin: 0 auto;
    max-width: 100%;
}

/* Width Constraints */
.-width_short {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}
.-width_wide {
    width: 1280px;
    max-width: 100%;
}

/* Responsive Adjustments */
@media only screen and (max-width: 768px) {
    .wrapper { padding: 10%; }
    .wrapper.-no_padding { padding: 5%; }
    body { font-size: 18px; }
    h2 { font-size: 24px; }
}

/* --- Potentially Unused Styles (kept for potential future use) --- */

/* Button Styles - Dark Theme */
a.button, button {
    /* Invert button colors */
    background-color: #2a2a2a; /* Darker background */
    border-radius: 20px;
    border: 1px solid #3498db; /* Accent border */
    color: #3498db; /* Accent text */
    text-align: center;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 20px;
    outline: 0;
    cursor: pointer;
}
a.button:hover, button:hover {
    background-color: #333; /* Slightly lighter on hover */
    color: #5dade2; /* Slightly lighter blue */
    border-color: #5dade2;
}

/* (Keep other potentially unused styles like product page specifics, lists, etc. as they were, they inherit base colors) */

/* Header/Footer */
header { /* Make header background dark if used */
    position: fixed; /* ... rest of styles */
    background-color: rgba(26, 26, 26, 0.9); /* Semi-transparent dark */
}
footer img { border-radius: 50%; width: 50px; height: 50px; }

/* List & Project Styles */
.wrapper .content ul { list-style-type: none; padding: 0; margin: 0 auto; }
.wrapper .content ul li:not(.-no_top_space) { margin-top: 100px; }
.wrapper .content ul li div.description { margin-bottom: 50px; }
.wrapper .content ul li .project {
    width: 100%;
    /* Adjust shadow for dark theme */
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
    border-radius: 20px;
    display: block;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #222; /* Add a base color if images don't load */
}
.wrapper .content ul li .project:active {
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
}
/* ... rest of list/project styles */
.wrapper .content ul.-default_style {
    list-style-type: disc;
    padding: 0 0 0 50px;
    margin: 0;
    color: #e0e0e0; /* Ensure list bullets are visible */
}
.wrapper .content ul.-default_style li { margin: 0; }

/* Other Utility Classes */
.-space_small { padding: 50px; }
/* Update color utilities if used */
.-color_parrotread { color: #62CF75; }
.-color_readingpack { color: #bbb; } /* Adjust for dark */
.-color_sharedlist { color: #EE4056; }
.-color_startafire { color: #3368DD; } /* Maybe use the brighter blue */
.-color_strong_gray { color: #929292; }
.-font_size_small { font-size: 16px; }
.-font_size_regular { font-size: 20px; }
.-style_italic { font-style: italic; }
.hide { display: none; }

/* Keyframes (kept) */
@keyframes animateCover {
    0% { background-position-y: -25px; }
    100% { background-position-y: -35px; }
}