/* RESET & BASE STYLES */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif; /* Replace 'Poller One' with your desired font */
    background-color: #f5f5f5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* HEADER */
header {
    text-align: center;
    padding: 2rem 0 0 0;
}

header h1 {
    font-size: 4rem;
    font-weight: bold;
}

header::after {
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background-color: #000;
    margin-top: 1rem;
}

/* LAYOUT */
main {
    flex: 1;
    position: relative;
}

.content-container {
    position: relative;
    width: 100%;
    height: 400px;
}

.shapes-container {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.content-page {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    /*background-color: rgba(255, 255, 255, 0.9); */
    border-radius: 8px;
    max-width: 600px;
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
    pointer-events: none; /* Disable pointer events when hidden */
}

.content-page.visible {
    pointer-events: auto; /* Enable pointer events when visible */
}

/* Position the about view more to the right to avoid overlap with the square */
#about-view {
    left: 65%; /* Move to the right side of the page */
}

/* Position the contact view with the same distance as the about view */
#contact-view {
    left: 35%; /* Move to the left side at the same distance as about-view is to the right */
}

/* Position the projects view below the circle to avoid overlap */
#projects-view {
    top: 120%; /* Move below the circle */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
}

.content-page h2 {
    margin-bottom: 1rem;
    font-size: 2.5rem;
    color: #333;
}

.content-page p {
    margin-bottom: 1rem;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #555;
}

.content-page ul {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.content-page li {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #555;
}

/* HOVER EFFECTS */
/* Common hover behavior */
.shape-link {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
    text-decoration: none;
    cursor: pointer;
    z-index: 1;
}

/* SHAPE POSITIONS */
.square {
    top: 50%;
    left: 50%;
    transform: translate(-320px, -90px);
    background: #F3CF0A;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    will-change: background-color, transform;
}

.circle {
    top: 50%;
    left: 50%;
    transform: translate(-90px, -90px);
    background: #E82521;
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.2s ease;
    will-change: background-color, transform;
}

.triangle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(140px, -78px);
    width: 0;
    height: 0;
    border-left: 90px solid transparent;
    border-right: 90px solid transparent;
    border-bottom: 156px solid #094A92;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: border-bottom-color 0.3s ease, transform 0.2s ease;
    will-change: border-bottom-color, transform;
}

/* LABEL STYLING */
.shape-label {
  position: absolute;
  bottom: -40px; /* Positions the label below the shape */
  left: 50%;
  transform: translateX(-50%); /* Centers the label horizontally */
  opacity: 0; /* Always visible */
  color: #000000; /* Black text */
  font-weight: bold;
  text-align: center;
  font-size: 1rem;
  pointer-events: none; /* Prevents label from interfering with clicks */
  transition: opacity 0.3s ease;
}

.triangle .shape-label {
    bottom: -200px;
}

.shape-link:hover .shape-label {
    opacity: 1;
}

/* HOVER EFFECTS */
.square:hover {
    background-color: #6d32a8;
    transform: translate(-320px, -90px) scale(1.05);
}

.circle:hover {
    background-color: #32a852; /* Green - opposite of red on color wheel */
    transform: translate(-90px, -90px) scale(1.05);
}

.triangle:hover {
    border-bottom-color: #FF8C00; /* Orange - opposite of blue on color wheel */
    transform: translate(140px, -78px) scale(1.05);
}

/* CONTACT MODE */
.triangle.contact-mode {
    border-bottom-color: #FF8C00;
}

.triangle.contact-mode:hover {
    border-bottom-color: #094A92;
}

/* ABOUT MODE */
.square.about-mode {
    background-color: #6d32a8;
}

.square.about-mode:hover {
    background-color: #F3CF0A;
}

/* PROJECTS MODE */
.circle.projects-mode {
    background-color: #32a852;
}

.circle.projects-mode:hover {
    background-color: #E82521;
}

.social-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align links to the left */
}

.social-links a {
    font-size: 42px;
    line-height: 1.2;
    color: black;
    text-decoration: none;
    font-weight: bold;
    transition: opacity 0.3s ease;
    display: block; /* Make links block-level for easier clicking */
    margin-bottom: 20px; /* Increased spacing between links */
}

.social-links a:hover {
    opacity: 0.5; /* Add hover effect */
}

/* Style the contact content container */
.contact-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
}

/* PROJECT CIRCLES */
.project-circles {
    display: flex;
    justify-content: center; /* Changed from space-around to center */
    margin-top: 10px; /* Further reduced to bring circles closer to the content */
    opacity: 0;
    transition: opacity 0.5s ease;
    width: 100%;
}

.project-circles.visible {
    opacity: 1;
}

.project-circle {
    width: 150px; /* Increased from 100px */
    height: 150px; /* Increased from 100px */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
    margin: 0 10px; /* Reduced from 15px to bring them closer together */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-circle:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.yellow-circle {
    background-color: #F3CF0A;
}

.red-circle {
    background-color: #E82521;
}

.blue-circle {
    background-color: #094A92;
}

.project-label {
    position: absolute;
    bottom: -35px; /* Adjusted to account for larger circles */
    left: 50%;
    transform: translateX(-50%);
    color: #000;
    font-weight: bold;
    font-size: 16px; /* Slightly larger font size */
    white-space: nowrap;
}

/* MOBILE RESPONSIVE DESIGN */
@media (max-width: 768px) {
    /* Header adjustments */
    header h1 {
        font-size: 2.5rem; /* Smaller title on mobile */
    }
    
    /* Content container adjustments */
    .content-container {
        height: 300px; /* Reduce height on mobile */
    }
    
    /* Make shapes smaller and reposition them */
    .shape-link {
        width: 120px; /* Smaller shapes */
        height: 120px;
    }
    
    /* Adjust shape positions for mobile */
    .square {
        transform: translate(-180px, -60px); /* Closer to center */
    }
    
    .circle {
        transform: translate(-30px, -60px); /* Closer to center */
    }
    
    .triangle {
        transform: translate(120px, -52px); /* Closer to center */
        border-left: 60px solid transparent; /* Smaller triangle */
        border-right: 60px solid transparent;
        border-bottom: 104px solid #094A92;
    }
    
    /* Adjust hover effects for mobile */
    .square:hover {
        transform: translate(-180px, -60px) scale(1.05);
    }
    
    .circle:hover {
        transform: translate(-30px, -60px) scale(1.05);
    }
    
    .triangle:hover {
        transform: translate(120px, -52px) scale(1.05);
    }
    
    /* Content page adjustments */
    .content-page {
        padding: 1rem;
        max-width: 90vw; /* Use viewport width */
        margin: 0 auto;
    }
    
    .content-page h2 {
        font-size: 2rem; /* Smaller heading */
    }
    
    .content-page p {
        font-size: 1rem; /* Smaller text */
    }
    
    /* Adjust specific view positions for mobile */
    #about-view {
        left: 50%; /* Center on mobile */
        top: 60%; /* Move up slightly */
    }
    
    #contact-view {
        left: 50%; /* Center on mobile */
        top: 60%; /* Move up slightly */
    }
    
    #projects-view {
        top: 80%; /* Adjust position */
        left: 50%;
    }
    
    /* Social links adjustments */
    .social-links a {
        font-size: 24px; /* Smaller text */
        margin-bottom: 15px;
    }
    
    /* Project circles adjustments */
    .project-circles {
        flex-direction: column; /* Stack vertically on mobile */
        align-items: center;
        gap: 20px;
    }
    
    .project-circle {
        width: 100px; /* Smaller circles */
        height: 100px;
        margin: 0; /* Remove horizontal margin */
    }
    
    .project-label {
        font-size: 14px; /* Smaller label text */
        bottom: -25px;
    }
    
    /* Shape labels adjustments */
    .shape-label {
        font-size: 0.9rem; /* Smaller label text */
        bottom: -30px;
    }
    
    .triangle .shape-label {
        bottom: -140px; /* Adjust for smaller triangle */
    }
}

/* Extra small screens (phones in portrait) */
@media (max-width: 480px) {
    header h1 {
        font-size: 2rem;
    }
    
    .content-container {
        height: 250px;
    }
    
    .shape-link {
        width: 100px;
        height: 100px;
    }
    
    .square {
        transform: translate(-150px, -50px);
    }
    
    .circle {
        transform: translate(-25px, -50px);
    }
    
    .triangle {
        transform: translate(100px, -43px);
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 87px solid #094A92;
    }
    
    .square:hover {
        transform: translate(-150px, -50px) scale(1.05);
    }
    
    .circle:hover {
        transform: translate(-25px, -50px) scale(1.05);
    }
    
    .triangle:hover {
        transform: translate(100px, -43px) scale(1.05);
    }
    
    .social-links a {
        font-size: 20px;
    }
    
    .project-circle {
        width: 80px;
        height: 80px;
    }
    
    .triangle .shape-label {
        bottom: -120px;
    }
}

/* Landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .content-container {
        height: 200px;
    }
    
    #about-view,
    #contact-view {
        top: 70%;
    }
    
    #projects-view {
        top: 90%;
    }
}