:root {
    --bg-panel: #2b2020;
    --bg-panel-soft: #3a2928;
    --border-main: #ffb36b;
    --border-soft: #b86f52;
    --text-main: #fff1d6;
    --text-muted: #ffd6a3;
    --accent-pink: #ff9fb7;
    --accent-gold: #ffd36a;
}

body {
    margin: 0;
    background-color: #352828;
    background-image: url("tile.png");
    background-repeat: repeat;
    background-position: top left;

    color: var(--text-main);
    font-family: Verdana, sans-serif;
}

.page {
    width: 1100px;
    margin: 40px auto;

    display: grid;
    grid-template-columns: 220px 1fr 220px;
    gap: 20px;
}

.left-panel,
.right-panel,
.content {
    background: rgba(43, 32, 32, 0.94);
    border: 3px solid var(--border-main);
    border-radius: 12px;
    padding: 15px;

    box-shadow:
        0 0 0 2px #4a2b26,
        0 0 18px rgba(255, 145, 74, 0.45);
}

.content {
    min-height: 500px;
}

h1 {
    text-align: center;
    color: var(--accent-gold);
    text-shadow:
        2px 2px 0 #5a2f2f,
        0 0 8px rgba(255, 159, 183, 0.5);
}

h2 {
    color: var(--text-muted);
    text-shadow: 1px 1px 0 #5a2f2f;
}

.welcome {
    color: var(--text-main);
}

ul {
    list-style: none;
    padding: 0;
}

li {
    padding: 8px 10px;
    border-bottom: 1px dashed var(--border-soft);
    color: var(--text-main);

    overflow-wrap: anywhere;
    word-break: break-word;
}


li:hover {
    color: var(--accent-gold);
    background: rgba(255, 179, 107, 0.12);
    cursor: pointer;
}


.left-panel {
    text-align: center;
}

.left-panel img {
    display: block;
    width: 170px;
    max-width: 100%;
    height: auto;
    margin: 20px auto 0;

    border: 3px solid var(--border-main);
    border-radius: 6px;
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-list li {
    padding: 0;
    border-bottom: 1px dashed var(--border-soft);
}

.nav-list a {
    display: block;
    padding: 8px 10px;

    color: var(--text-main);
    text-decoration: none;

    overflow-wrap: anywhere;
    word-break: break-word;
}

.nav-list a:hover {
    color: var(--accent-gold);
    background: rgba(255, 179, 107, 0.12);
    cursor: pointer;
}

.align-left {
    text-align: left;
}

.align-center {
    text-align: center;
}

.align-right {
    text-align: right;
}