@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400&family=Raleway&family=Tenor+Sans&display=swap');

/* Root Variables */

:root {
    /* Colors */
    --primary-color: #fee801;
    --primary-light: #39c4b6;
    --primary-dark: #00060e;
    --secondary-color: #9a9f17;
    --accent-color: #54c1e6;
            
    /* Spacing system */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    --space--universal: var(--space-sm);
    
    /* Animation properties */
    --duration-fast: 0.2s;
    --duration-normal: 0.3s;
    --duration-slow: 0.5s;
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Border radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 2rem;
    --radius-3xl: 3rem;
    
    --radius-universal: var(--radius-xl);

    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* HTML Tags */

body {
    margin: 0;
    padding: 0;
    background-color: var(--primary-dark);
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}


footer {
    display: flex;
    align-items: end;
    justify-content: end;
    flex-direction: column;
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
    text-align: right;
    font-size: small;
    color: var(--accent-color);
    margin-bottom: 8px;
    margin-right: 5px;
}

/* CSS ID's */

/* Fixed full-viewport layer holding the p5 canvas, behind all content */
#canvas-container {
    position: fixed;
    inset: 0;
    z-index: -1;
}

#canvas-container canvas {
    display: block;
}

#gallery > img
{
    max-width: 100%;
    border-radius: var(--radius-universal);
    opacity: 0%;
    animation: slideInFromBottom var(--duration-slow) var(--ease-out) 0.8s;
    animation-fill-mode: forwards;
}

#project-detail-view
{
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: center;
    gap: var(--space--universal);
    margin: auto;
}

#project-detail-view > #description
{
    max-width: 400px;
}

#project-detail-view > #contributions
{
    min-height: 150px;
    font-size:large;
}

#gallery {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;                                                                                                                                                                
    align-items: center;
    gap: var(--space--universal);
}

/* CSS Classes */

.container
{
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: center;
    max-width: 50%;
    gap: var(--space--universal);
    /* Safe centering: centered when it fits the viewport, scrolls from the top when it doesn't */
    margin: auto;
}

.defaultCard
{
    color: var(--primary-dark);
    background-color: var(--primary-light);
    padding: var(--space--universal);
    flex-grow: 1;
    display: flex;                                                                                                                                                                                                                
    flex-direction: column;                                                                                                                                                                                                       
    justify-content: center;   /* Vertically center contents */                                                                                                                                                                   
    align-items: center;
    opacity: 0;
    scale: 1;
    border-radius: var(--radius-universal);
    animation: 
        slideInFromTop var(--duration-slow) var(--ease-out);
        /* scaleUp var(--duration-fast) linear 1; */
    animation-fill-mode: forwards;
    gap: var(--space--universal);
}

.socialLogo:hover
{
    animation: spin 2.0s ease-in-out infinite;
}

.projectBanner:hover
{
    animation: float 2.0s ease-in-out infinite;
}

.socialLogo > img
{
    max-width: 65px;
    opacity: 100%;
}

.profilePic > img
{
    max-width: 150px;
    opacity: 0%;
    border-radius: var(--radius-universal);
    animation: slideInFromBottom var(--duration-slow) var(--ease-out) 0.8s;
    animation-fill-mode: forwards;
}

.projectBanner > img
{
    opacity: 100%;
    max-width: 250px;
    border-radius: var(--radius-universal);

}

.projectDetailBanner > img
{
    max-width: min(400px, 100%);
    border-radius: var(--radius-universal);
    opacity: 0%;
    animation: slideInFromBottom var(--duration-slow) var(--ease-out) 0.8s;
    animation-fill-mode: forwards;
}


.introContainer
{
    display: flex;
    flex-flow: column wrap;
    max-width: 350px;
}

.titleContainer
{
    opacity: 0;
    color: var(--primary-color);
    font-family: 'Tenor Sans', sans-serif;
    font-size:xx-large;
    /* Neutralize h1/h2 browser defaults so headings render like the original divs */
    margin: 0;
    font-weight: normal;
    white-space: nowrap;
    animation: slideInFromBottom var(--duration-slow) var(--ease-out) 0.3s;
    animation-fill-mode: forwards;
}

.titleContainer.genre
{
    font-size: medium;
    font-weight: normal;
    white-space: normal;
}

.highlight
{
    color: var(--primary-color);
}

.msgContainer
{
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
    padding: 0px 0px 10px 0px;
    text-align: left;
    opacity: 0;
    animation: slideInFromBottom var(--duration-slow) var(--ease-out) 0.4s;
    animation-fill-mode: forwards;
}

.logoContainer
{
    display: flex;
    flex-flow: row wrap;
    gap: var(--space--universal);
    min-width: 25%;
    opacity: 0;
    animation: slideInFromBottom var(--duration-slow) var(--ease-out) 0.8s;
    animation-fill-mode: forwards;
}

.projectImgContainer
{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;                                                                                                                                                                
    align-items: center;
    min-width: 25%;
    opacity: 0;
    animation: slideInFromBottom var(--duration-slow) var(--ease-out) 0.8s;
    animation-fill-mode: forwards;
    gap: var(--space--universal);
}

.quotesContainer
{
    color: var(--primary-color);
    display: flex;
    flex-flow: row wrap;
    justify-content: center;                                                                                                                                                                
    align-items: center;
    font-size: xx-large;
    opacity: 0;
    animation: slideInFromBottom var(--duration-slow) var(--ease-out) 0.4s;
    animation-fill-mode: forwards;
}


/* Fully removes an element from layout once its hide animation has finished.
   Removing this class restores display, which makes the browser recreate the
   CSS entrance animation from scratch and play it forward automatically. */
.layout-collapsed
{
    /* !important so it still wins over the #project-detail-view id rule's
       `display: flex`, which otherwise out-specifies this class and leaves the
       detail view visible while collapsed. */
    display: none !important;
}


.backLink
{
    align-self: flex-start;
    color: var(--primary-dark);
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
    text-decoration: none;
    opacity: 0.8;
}

.backLink:hover
{
    opacity: 1;
    text-decoration: underline;
}

.techStackContainer
{
    width: 100%;
}

.stackList
{
    margin: 0;
    padding-left: var(--space-lg);
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
    opacity: 0;
    animation: slideInFromBottom var(--duration-slow) var(--ease-out) 0.4s;
    animation-fill-mode: forwards;
}

.stackList > li 
{
    margin-bottom: 8px;
}

.storeLink
{
    color: var(--primary-dark);
    background-color: var(--primary-color);
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
    text-decoration: none;
    opacity: 0;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    transition: background-color var(--duration-fast) var(--ease-out);
    animation: slideInFromBottom var(--duration-slow) var(--ease-out) 0.4s;
    animation-fill-mode: forwards;
}

.storeLink:hover
{
    background-color: white;
}

.frameRate
{
    color: rgb(16, 216, 16);
    font-size: x-large;
    /* Keep the debug readout out of the page layout */
    position: fixed;
    top: var(--space-sm);
    left: var(--space-sm);
    margin: 0;
}

/* Blinking cursor element */
.typing-cursor {
    color: var(--primary-color);
    font-weight: normal;
    animation: cursorBlink 1s step-end infinite;
    margin-left: 2px;
}

/* Media Queries */
@media all and (max-width: 1200px) {
    .container {
        max-width: 75%;
    }
}

@media all and (max-width: 768px) {
    .container {
        max-width: 90%;
        margin: 1rem auto;
    }
}

@media all and (max-width: 500px) {
    .container {
        max-width: 95%;
    }
}

/* Keyframe animations */
@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 0.9;
        transform: translateY(0);
    }
}

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

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

@keyframes scaleUp {
    from {
        scale: 0.1;
    }
    to {
        scale: 1.0;
    }
}

/* Cursor blink animation (0.5s visible, 0.5s hidden) */
@keyframes cursorBlink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}