@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
    /* Background Colors */
    --body-background: #0f172a;
    --glass-surface: rgba(0, 0, 0, 0.2);
    --console-surface: rgba(0, 0, 0, 0.6);

    /* Feedback Colors */
    --accent-success: #00ff88;
    --accent-error: #ff4444;
    --item-hover-bg: rgb(121, 142, 156);

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-terminal: #a5d6ff;

    /* Glass style */
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);

    /* Blur */
    --glass-blur: blur(10px)
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    background: var(--body-background);
    color: var(--text-primary);
    font-family: "Open Sans", sans-serif;
    font-weight: 200;
}

.section-style {
  background: var(--glass-surface);
  backdrop-filter: var(--glass-blur);
  border-radius: 2rem;
  box-shadow: var(--glass-shadow);
  min-height: 100vh;
  width: clamp(25rem, 80vw, 160rem);
}


@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}