:root {
    --font-heading: 'Courier New', Courier, monospace;
    --font-body: Arial, Helvetica, sans-serif;
    --bg-body: #404040;
    --bg-container: #333333;
    --bg-boxes: #555555;
    --bg-main: #4a4a4a;
    --red-primary: #ff8a8a;
    --red-button: #b00020;
    --red-button-hover: #8f001a;
    --red-text: #ffb8b8;
    --text-light: #ffffff;
    --text-muted: #d4d4d4;
    --shadow-glow-large: 0 0 25px rgba(255, 138, 138, 0.32);
    --shadow-glow-text: 0 0 10px rgba(255, 138, 138, 0.55);
    --shadow-glow-small: 0 0 5px rgba(255, 138, 138, 0.4);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background-color: var(--bg-body);
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 20px 0;
    background-color: var(--bg-body);
    color: var(--text-light);
    font-family: var(--font-body);
}

#hoved-container {
    width: min(1200px, calc(100% - 32px));
    min-height: calc(100vh - 40px);
    margin: 0 auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--bg-container);
    border-radius: 10px;
    box-shadow: var(--shadow-glow-large);
}

a {
    color: var(--red-text);
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.18em;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--text-light);
    outline-offset: 3px;
}