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

:root{
    /* Palette */
    --crim-red: rgba(138, 0, 0, 1);
    --crim-dark: rgba(100, 0, 0, 1);
    --grey: rgba(29, 22, 22, 1);
    --cream: rgba(232, 201, 153, 1);
    --off-white: rgba(248, 238, 223, 1);
    --border-color: rgba(226, 232, 240, 1);


    --shadow-light: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    --text-primary: rgba(30, 41, 59, 1);
    --text-secondary: rgba(100, 116, 139, 1);


    /* Layout */
    --sidebar-width: 280px;
    --mobile-breakpoint: 768px;

    /* Fonts */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;

      /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease; 
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--text-primary);
    background-color: var(--off-white);
    overflow-x: hidden;
}

/* SVG icons */
/* Menu Button Mobile */
.mobile-menu-burger-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M4 5h16M4 12h16M4 19h16' color='%23000'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.warning-triangle {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M5.593 9.225c2.246-3.602 3.368-5.403 4.84-5.945a4.53 4.53 0 0 1 3.134 0c1.472.542 2.594 2.343 4.84 5.945c2.527 4.053 3.79 6.08 3.568 7.753a4.66 4.66 0 0 1-1.599 2.938C19.1 21 16.733 21 12 21s-7.1 0-8.376-1.084a4.66 4.66 0 0 1-1.599-2.938c-.222-1.673 1.041-3.7 3.568-7.753' color='%23000'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.rem-circle {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M16 12H8m14 0c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10s10-4.477 10-10' color='%23000'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.loading-spinner-icon{
    width: 48px;
    height: 48px;
    border: 5px solid var(--cream);
    border-bottom-color: var(--crim-red);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    } 

/* Links */
.home-button-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M9.062 4.826L3.239 9.921c-.5.437-.164 1.213.523 1.213c.42 0 .761.315.761.703v3.244c0 2.79 0 4.185.939 5.052C6.4 21 7.91 21 10.932 21h2.136c3.021 0 4.532 0 5.47-.867c.939-.867.939-2.262.939-5.052v-3.244c0-.388.34-.703.76-.703c.688 0 1.023-.776.524-1.213l-5.823-5.095C13.547 3.61 12.851 3 12 3s-1.547.609-2.938 1.826M12 16h.009' color='%23000'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.about-button-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.103 22.506H3.913c-.53 0-1.03-.24-1.34-.64a1.49 1.49 0 0 1-.27-1.29a4.85 4.85 0 0 1 3.27-3.43l3.18-.96v-1.02c-1.59-1.31-3-3.13-3-7s2.15-6.17 5.74-6.17c1.83 0 2.88.64 3.34 1.01c3.41.2 3.41 3.79 3.41 5.16c0 3.87-1.41 5.69-3 7v1.02l3.18.96c1.61.49 2.86 1.8 3.27 3.42c.11.45.01.92-.27 1.29c-.31.4-.81.64-1.34.64zm-8.6-19c-2.74 0-4.24 1.66-4.24 4.67c0 3.27 1.04 4.74 2.71 6.05c.18.14.29.36.29.59v1.94c0 .33-.22.62-.53.72l-3.72 1.12c-1.1.33-1.97 1.24-2.25 2.36c0 .01.07.06.16.06h16.19c.09 0 .15-.04.16-.06a3.37 3.37 0 0 0-2.25-2.35l-3.71-1.12a.75.75 0 0 1-.53-.72v-1.94c0-.23.11-.45.29-.59c1.67-1.31 2.71-2.77 2.71-6.05c0-3.06-.85-3.67-2.21-3.67a.75.75 0 0 1-.56-.25c-.02-.02-.74-.75-2.49-.75z' color='%23000' stroke-width='1.5' stroke='%23000'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.projects-button-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.75' color='%23000'%3E%3Cpath d='M9 7h7.75c2.107 0 3.16 0 3.917.506a3 3 0 0 1 .827.827C22 9.09 22 10.143 22 12.25c0 3.511 0 5.267-.843 6.528a5 5 0 0 1-1.38 1.38C18.518 21 16.762 21 13.25 21H12c-4.714 0-7.071 0-8.536-1.465C2 18.072 2 15.715 2 11V7.944c0-1.816 0-2.724.38-3.406A3 3 0 0 1 3.538 3.38C4.22 3 5.128 3 6.944 3C8.108 3 8.69 3 9.2 3.191c1.163.436 1.643 1.493 2.168 2.542L12 7'/%3E%3Cpath d='m15.5 12l.92.793c.387.333.58.5.58.707s-.193.374-.58.707L15.5 15m-7-3l-.92.793c-.387.333-.58.5-.58.707s.193.374.58.707L8.5 15m4.5-4l-2 5'/%3E%3C/g%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.contact-button-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' color='%23000'%3E%3Cpath d='m2 5.5l6.913 3.917c2.549 1.444 3.625 1.444 6.174 0L22 5.5'/%3E%3Cpath d='M21.995 10.028c-.065-3.067-.098-4.6-1.23-5.737c-1.131-1.136-2.706-1.175-5.857-1.254a115 115 0 0 0-5.805 0c-3.15.079-4.726.118-5.857 1.254s-1.165 2.67-1.23 5.737a69 69 0 0 0 0 2.953c.065 3.068.098 4.601 1.23 5.737s2.707 1.176 5.857 1.255q.702.017 1.402.027m10.347-6.56l.693.692a1.5 1.5 0 0 1 0 2.121l-3.628 3.696a2 2 0 0 1-1.047.551l-2.248.488a.5.5 0 0 1-.595-.593l.479-2.235c.074-.397.266-.762.551-1.047l3.674-3.674a1.5 1.5 0 0 1 2.121 0'/%3E%3C/g%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Footer Social Icons */
.github-button-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' color='%23000'%3E%3Cpath d='M10 20.568c-3.429 1.157-6.286 0-8-3.568'/%3E%3Cpath d='M10 22v-3.242c0-.598.184-1.118.48-1.588c.204-.322.064-.78-.303-.88C7.134 15.452 5 14.107 5 9.645c0-1.16.38-2.25 1.048-3.2c.166-.236.25-.354.27-.46c.02-.108-.015-.247-.085-.527c-.283-1.136-.264-2.343.16-3.43c0 0 .877-.287 2.874.96c.456.285.684.428.885.46s.469-.035 1.005-.169A9.5 9.5 0 0 1 13.5 3a9.6 9.6 0 0 1 2.343.28c.536.134.805.2 1.006.169c.2-.032.428-.175.884-.46c1.997-1.247 2.874-.96 2.874-.96c.424 1.087.443 2.294.16 3.43c-.07.28-.104.42-.084.526s.103.225.269.461c.668.95 1.048 2.04 1.048 3.2c0 4.462-2.134 5.807-5.177 6.643c-.367.101-.507.559-.303.88c.296.47.48.99.48 1.589V22'/%3E%3C/g%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.twitter-button-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m3 21l7.548-7.548M21 3l-7.548 7.548m0 0L8 3H3l7.548 10.452m2.904-2.904L21 21h-5l-5.452-7.548' color='%23000'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.reddit-button-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' color='%23000'%3E%3Cellipse cx='12' cy='15.5' rx='9' ry='6.5'/%3E%3Cpath d='M15.5 16.78A5.67 5.67 0 0 1 12 18a5.67 5.67 0 0 1-3.5-1.22'/%3E%3Ccircle cx='19' cy='4' r='2'/%3E%3Cpath d='M18 10.07A2.14 2.14 0 0 1 19.86 9c1.182 0 2.14.95 2.14 2.12c0 .817-.466 1.526-1.15 1.88M6 10.07A2.14 2.14 0 0 0 4.14 9A2.13 2.13 0 0 0 2 11.12c0 .817.466 1.526 1.15 1.88M17 4c-2.357 0-3.536 0-4.268.732S12 6.643 12 9m-2.992 4h-.009m6.009 0h-.009'/%3E%3C/g%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.linkedin-button-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M4.5 9.5H4c-.943 0-1.414 0-1.707.293S2 10.557 2 11.5V20c0 .943 0 1.414.293 1.707S3.057 22 4 22h.5c.943 0 1.414 0 1.707-.293S6.5 20.943 6.5 20v-8.5c0-.943 0-1.414-.293-1.707S5.443 9.5 4.5 9.5m2-5.25a2.25 2.25 0 1 1-4.5 0a2.25 2.25 0 0 1 4.5 0m5.826 5.25H11.5c-.943 0-1.414 0-1.707.293S9.5 10.557 9.5 11.5V20c0 .943 0 1.414.293 1.707S10.557 22 11.5 22h.5c.943 0 1.414 0 1.707-.293S14 20.943 14 20v-3.5c0-1.657.528-3 2.088-3c.78 0 1.412.672 1.412 1.5v4.5c0 .943 0 1.414.293 1.707s.764.293 1.707.293h.499c.942 0 1.414 0 1.707-.293c.292-.293.293-.764.293-1.706L22 14c0-2.486-2.364-4.5-4.703-4.5c-1.332 0-2.52.652-3.297 1.673c0-.63 0-.945-.137-1.179a1 1 0 0 0-.358-.358c-.234-.137-.549-.137-1.179-.137' color='%23000'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Styles */

/* Side Menu Bar */

/* Mobile Menu Button */
.mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1001;
    background: var(--crim-red);
    color: var(--off-white);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    padding-top: 3px;
    box-shadow: var(--shadow-medium);
    transition: all var(--transition-fast);
}

.mobile-menu-toggle:hover {
    background: var(--crim-dark);
    transform: scale(1.05);
    color: var(--cream);
}

/* Sidebar Proper */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--crim-red);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-medium);
    box-shadow: var(--shadow-medium);
}

.sidebar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--crim-dark);
}

.sidebar::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--crim-dark);
}

.sidebar-header {
    padding: 2rem 1rem;
    text-align: center;
    border-bottom: 4px solid var(--crim-dark);
    border-top: 4px solid var(--crim-dark);
    background: var(--off-white);
}

.logo-image {
    width: 160px;
    height: 160px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("img/logo.png");
    background-size: 160px;
    background-repeat: no-repeat;
    background-position: center;
    color: var(--off-white);
    font-size: 2.5rem
}

.sidebar-name {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0rem;
}
j
.sidebar-tagline {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Nav menu */
.nav-menu {
    list-style: none;
    padding: 1rem 0; 
    flex: 1;
}

.nav-item {
    margin: 0.25rem 0;
    background: var(--off-white);
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    color: var(--crim-red);
    text-decoration: none;
    position: relative;
    border-left: 4px solid var(--crim-dark);
}

.nav-link:hover {
    color: var(--crim-red);
    background: var(--cream);
    text-decoration: underline;
    border-left: 4px solid var(--crim-dark);
}

.nav-link.active {
    color: var(--crim-red);
    background: var(--cream);
    text-decoration: underline;
    border-left: 4px solid var(--crim-dark);
}

.nav-link i {
    width: 20px;
    margin-right: 0.75rem;
    text-align: center;
}

.nav-link span {
    font-weight: 500;
}

/* Sidebar Footer */
.sidebar-footer {
    padding: 1.5rem;
    border-top: 4px solid var(--crim-dark);
}

.social-links-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--off-white);
    color: var(--crim-red);
    border-radius: 50%;
    text-decoration: none;
    transition: all var(--transition-fast);
    font-size: 1.1rem;
}

.social-link:hover {
    background: var(--cream);
    color: var(--crim-red);
    transform: translateY(-2px);
}

/* Main Content Container */
.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    padding: 2rem;
    transition: margin-left var(--transition-medium);
}

/* Content Body */
.content-body {
    max-width: 1000px;
    margin: 0 auto;
    transition: opacity var(--transition-medium);
}

#content-container {
    opacity: 1;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}





/* Content Elements */

/* Header Container */
.content-header {
    margin-bottom: 3rem;
    text-align: center;
}

/* Top Title */
.content-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--crim-red);
    margin-bottom: 1rem;
}

/* Line Divider */
.content-dividing-line {
    width: 120px;
    height: 4px;
    background: var(--crim-red);
    margin: 0 auto;
    border-radius: 2px;
}

/* Intro Text */
.intro-text {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

/* Main Body Text */
.content-body-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

.content-body-text p {
    margin-bottom: 1.5rem;
}

/* Stat Box */
.stat-box-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.stat-box {
    text-align: center;
    padding: 1.5rem;
    background: var(--off-white);
    border-radius: 12px;
    box-shadow: var(--shadow-light);
    transition: transform var(--transition-fast);
}

.stat-box:hover {
    transform: translateY(-5px);
}

.stat-box-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--crim-red);
    margin-bottom: 0.5rem;
}

.stat-box-text {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Tile Display */
.tile-box-container {
    background: var(--surface-color);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-light);
}

.tile-box-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    text-align: center;
}

.tile-box-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}

.tile-box-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: var(--off-white);
    border-radius: 8px;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.tile-box-tile:hover {
    background: var(--cream);
    color: white;
    transform: translateY(-3px);
}

.tile-box-tile i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.tile-box-tile span {
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
}

/* Box with Picture, Links, Tags for Projects */
.project-container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    background: var(--off-white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-light);
    transition: all var(--transition-fast);
}

.project-container:hover {
    box-shadow: var(--shadow-large);
    transform: translateY(-5px);
}

.project-image {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cream);
    border-radius: 12px;
    color: var(--crim-red);
    font-size: 2rem;
    flex-shrink: 0;
}

.project-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.project-description {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.project-tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.project-tag {
    padding: 0.25rem 0.75rem;
    background: var(--cream);
    color: var(--text-secondary);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.project-link-container {
    display: flex;
    gap: 1rem;
}

.project-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--crim-red);
    color: var(--off-white);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.project-link:hover {
    background: var(--crim-dark);
    transform: translateY(-2px);
    color: var(--cream);
}

/* Contact Tiles */
.contact-tile-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.contact-tile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--off-white);
    border-radius: 12px;
    box-shadow: var(--shadow-light);
    transition: transform var(--transition-fast);
}

.contact-tile-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--crim-red);
    color: var(--off-white);
    border-radius: 50%;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.contact-tile-title h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.contact-tile-info a,
.contact-tile-info p {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.contact-tile-info a:hover {
    color: var(--text-primary);
}


/* Overlay for mobile */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity var(--transition-medium);
}

.overlay.active {
    opacity: 1;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
    }
    
    .sidebar {
        transform: translateX(-100%);
    }
    
    .sidebar.active {
        transform: translateX(0);
    }
    
    .main-content {
        margin-left: 0;
        padding: 5rem 1rem 2rem;
    }
    
    .overlay {
        display: block;
    }
    
    .content-title {
        font-size: 2rem;
    }
    
    .stat-box {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .tile-box-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .project-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .project-image {
        margin: 0 auto;
    }
    
    .contact-tile-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding: 5rem 0.5rem 2rem;
    }
    
    .content-title {
        font-size: 1.75rem;
    }
    
    .tile-box-grid {
        grid-template-columns: 1fr;
    }
    
    .project-link-container {
        flex-direction: column;
    }
    
    .sidebar-header {
        padding: 1.5rem 1rem;
    }
    
    .sidebar-name {
        font-size: 1.25rem;
    }
}

/* Print Styles */
@media print {
    .mobile-menu-toggle,
    .sidebar,
    .overlay {
        display: none !important;
    }
    
    .main-content {
        margin-left: 0;
        padding: 0;
    }
    
    .content-body {
        display: block !important;
        page-break-after: always;
    }
    
    .content-body:last-child {
        page-break-after: avoid;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    :root {
        --border-color: #000000;
        --text-secondary: #000000;
        --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
}

/* Loading and Error States */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.loading-spinner i {
    font-size: 3rem;
    color: var(--crim-red);
    margin-bottom: 1rem;
}

.loading-spinner p {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.error-state i {
    font-size: 4rem;
    color: var(--crim-red);
    margin-bottom: 1.5rem;
}

.error-state h2 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.error-state p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--crim-red);
    color: var(--off-white);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.retry-btn:hover {
    background: var(--crim-dark);
    transform: translateY(-2px);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}