:root {
    /* Main branding colours (dark mode) */
    --text:hsl(0, 0%, 95%);
    --text-muted: hsl(0, 0%, 70%);
    --highlight: hsl(240, 30%, 20%);
    --border: hsl(260, 10%, 25%);
    --bg-3: hsl(260, 10%, 20%);
    --bg-2: hsl(260, 10%, 15%);
    --bg-1: hsl(260, 10%, 10%);

    --border-card: 1px solid var(--border);

    --gradient: linear-gradient(0deg, var(--bg-2) 95%, var(--bg-3));

    /* Semantics */
    --confirm-text: hsl(0, 0%, 95%);
    --confirm-bg: hsl(215, 50%, 50%);
    --confirm-border: hsl(215, 50%, 40%);
    --success-text: hsl(0, 0%, 95%);
    --success-bg: hsl(120, 25%, 20%);
    --success-border: hsl(120, 25%, 10%);
    --error-text: hsl(0, 0%, 95%);
    --error-bg: hsla(0, 50%, 50%, 0.5);
    --error-border: hsla(0, 50%, 40%, 0.5);

    /* General, do not depend on theme */
    --transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);;

    --radius-lg: 24px;
    --radius: 16px;
    --radius-sm: 8px;

    --shadow: 2px 4px 10px hsla(0, 0%, 0%, 0.15);

    --theme: hsl(253, 41%, 57%);

    --font-1: Helvetica;
    --font-2: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;;
}

html.light {
    --text:hsl(0, 0%, 5%);
    --text-muted: hsl(0, 0%, 30%);

    --highlight: hsl(0, 0%, 100%);
    --border: hsl(0, 0%, 70%);
    --border-card: 1px solid var(--bg-2);

    --bg-1: hsl(0, 0%, 95%);
    --bg-2: hsl(0, 0%, 88%);
    --bg-3: hsl(0, 0%, 83%);

    --gradient: linear-gradient(0deg, var(--bg-2) 95%, var(--bg-3));
    
    /* Semantics */
    --confirm-text: hsl(0, 0%, 95%);
    --confirm-bg: hsl(215, 50%, 50%);
    --confirm-border: hsl(215, 50%, 40%);
    --success-text: hsl(0, 0%, 95%);
    --success-bg: hsl(120, 25%, 50%);
    --success-border: hsl(120, 25%, 40%);
    --error-text: hsl(0, 0%, 95%);
    --error-bg: hsla(0, 50%, 50%, 0.5);
    --error-border: hsla(0, 50%, 40%, 0.5);
}

body {
    display: flex;
    margin: 0;
    background-color: var(--bg-1);
    color: var(--text);
    font-family: var(--font-1);
    height: 100vh;
    overflow: hidden;
    padding: 0;

    /* FOR DARK ←→ LIGHT TRANSITION */
    transition: var(--transition);
}

main {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 100vh;
}

.icon-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.icon-wrapper svg {
    height: 1.2rem;
    width: auto;
    fill: var(--text);
}

p {
    font-size: clamp(0.5rem, 1.5vw + 0.5rem, 1rem);
    font-weight: normal;
}

h1 {
    font-size: clamp(1rem, 5vw + 1rem, 4rem);    
}

h2 {
    font-size: clamp(0.5rem, 3vw + 1rem, 3rem);  
}

h3 {
    font-size: clamp(0.5rem, 2vw + 0.5rem, 2rem);
}

h1, h2, h3 {
    box-sizing: border-box;
    font-weight: bold;
    margin: 16px;
}

.gradient-highlight-blue {
    background: -webkit-linear-gradient(right, hsl(199, 58%, 50%), hsl(253, 41%, 57%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-highlight-red {
    background: -webkit-linear-gradient(right, hsl(0, 58%, 50%), hsl(0, 41%, 57%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.interactable {
    cursor: pointer;
}

.break {
    height: 1px;
    width: 100%;
    background-color: var(--bg-2);
    margin: 2rem 0px;
}

.subtle {
    font-style: italic;
    color: var(--text-muted);
}

.content {
    padding: 10px;
    min-height: calc(100vh - 10.5vw);
    overflow-x: hidden;
}

.hidden {
    display: none;
}

.center-content {
    margin: 20px 1rem;
}

@media (min-width: 768px) {
    .center-content {
        width: 80%;
        min-height: 100vh;
        margin: 0 auto;
        margin-top: 20px;
    }
}


.jump-in-load {
    opacity: 0; /* Start hidden */
    transform: translateY(30px);
    animation: fadeIn 1s forwards;
}

.float-up-down {
    animation: floatUpDown 2s ease-in-out infinite alternate;
}

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

@keyframes floatUpDown {
    from {
        transform: translateY(-20px);
        
    }
    to {
        transform: translateY(20px);
    }
}


@keyframes warpAnimation {
    0% {
        background-position: 0% 50%;
    }
    33% {
        background-position: 100% 75%;
    }
    66% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 0% 50%;
    }
}