* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    background: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-sans);
    line-height: 1.5;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: all 0.2s ease;
}

a:not([class]):hover {
    text-decoration: underline;
    opacity: 0.85;
}

img {
    max-width: 100%;
    display: block;
}

.app {
    position: relative;
    z-index: var(--z-content);
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.main {
    padding: 1.5rem;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
}