@import "tailwindcss";

body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            position: relative;
            overflow-x: hidden;
        }
        
        #content-container {
            flex: 1 0 auto;
            position: relative;
            z-index: 20;
        }
        
        footer {
            flex-shrink: 0;
            position: relative;
            z-index: 20;
        }
        
        .section {
            scroll-margin-top: 80px;
        }
        
        .project-card {
            transition: transform 0.3s ease;
        }
        
        .project-card:hover {
            transform: translateY(-5px);
        }
        
        .btn-hover {
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .btn-hover:hover {
            border-color: #d4c9ba;
            background-color: transparent;
            color: #d4c9ba;
        }
        
        .tabs-container {
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        
        .tabs-container::-webkit-scrollbar {
            display: none;
        }
        
        .tab-button {
            white-space: nowrap;
            transition: all 0.3s ease;
        }
        
        .tab-button.active {
            background-color: #7b4928;
            color: #d4c9ba;
        }
        
        .project-item {
            display: none;
        }
        
        .project-item.active {
            display: block;
        }
        
        /* Moving circles animation - BACKGROUND ONLY */
.moving-circle {
    position: fixed;
    border-radius: 50%;
    opacity: 0.12;
    pointer-events: none;
    mix-blend-mode: screen;
    background: radial-gradient(circle, rgba(255,255,255,0.3), transparent 70%);
        filter: blur(10px);
}


/* Keyframes for drifting animation */
@keyframes float1 {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  25%      { transform: translate(20px, 15px) rotate(5deg); }
  50%      { transform: translate(-15px, 25px) rotate(10deg); }
  75%      { transform: translate(-10px, -20px) rotate(5deg); }
}

@keyframes float2 {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  25%      { transform: translate(-25px, 10px) rotate(-5deg); }
  50%      { transform: translate(15px, -20px) rotate(-10deg); }
  75%      { transform: translate(30px, 15px) rotate(5deg); }
}

@keyframes float3 {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  25%      { transform: translate(30px, -15px) rotate(10deg); }
  50%      { transform: translate(-20px, -25px) rotate(-15deg); }
  75%      { transform: translate(-25px, 20px) rotate(5deg); }
}


        
        /* Ensure content stays above circles */
        .relative {
            position: relative;
            z-index: 30;
        }
        
        /* Background container for circles */
        #background-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
            overflow: hidden;
        }