/* Bratonien LinkStack Theme
 * Static studio background, layered petrol glass, gold highlights and restrained glow.
 */

:root {
    --br-gold: #d4af37;
    --br-gold-light: #ffe28a;
    --br-gold-dark: #6f5818;
    --br-petrol: #12363a;
    --br-blue: #17324d;
    --br-green: #1f3b2d;
    --br-green-light: #244b38;
    --br-brown: #8a642c;
    --br-brown-border: #a97d38;
    --br-text: #f3e5b5;
    --br-text-light: #f8f1d3;
    --br-dark: #17120b;
}

* { box-sizing: border-box; }

html {
    min-height: 100%;
    font-size: 100%;
    background: var(--br-dark);
}

body {
    min-height: 100vh;
    margin: 0;
    font-family: "Almendra SC", Georgia, serif;
    font-size: 18px;
    line-height: 1.5;
    color: var(--br-text);
    background-color: var(--br-dark);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 18%, rgba(255,226,138,.10), transparent 32%),
        linear-gradient(90deg, rgba(10,8,5,.42), transparent 24%, transparent 76%, rgba(10,8,5,.42));
    z-index: 0;
}

.container {
    position: relative;
    z-index: 1;
    width: min(92%, 660px);
    margin: 2rem auto;
    padding: clamp(1.5rem, 4vw, 2.6rem);
    text-align: center;
    overflow: visible;
    background:
        linear-gradient(180deg, rgba(28,69,68,.78) 0%, rgba(18,54,58,.68) 42%, rgba(13,38,39,.72) 100%);
    border: 1px solid rgba(212,175,55,.55);
    box-shadow:
        0 26px 70px rgba(0,0,0,.56),
        0 0 0 1px rgba(111,88,24,.28),
        inset 0 1px 0 rgba(255,226,138,.18),
        inset 0 -16px 36px rgba(0,0,0,.12);
    backdrop-filter: blur(9px) saturate(1.08);
    -webkit-backdrop-filter: blur(9px) saturate(1.08);
}

.container::before,
.container::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    height: 1px;
    pointer-events: none;
}

.container::before {
    top: 0;
    background: linear-gradient(90deg, transparent, rgba(255,226,138,.88), transparent);
    box-shadow: 0 0 18px rgba(212,175,55,.28);
}

.container::after {
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(111,88,24,.55), transparent);
}

.column,
.columns {
    width: 100%;
    margin-left: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--br-gold);
    font-family: "Almendra SC", Georgia, serif;
    font-weight: 700;
    letter-spacing: .035em;
    text-shadow:
        0 1px 0 #3d2d08,
        0 2px 4px rgba(0,0,0,.72),
        0 0 12px rgba(212,175,55,.18);
}

h1 {
    margin: 0 0 .9rem;
    font-size: clamp(2rem, 7vw, 3.25rem);
    line-height: 1.08;
}

h2,
h3 {
    position: relative;
    margin: 2rem 0 1rem;
    padding-bottom: .55rem;
    border-bottom: 0;
}

h2::after,
h3::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,.78), transparent);
    box-shadow: 0 0 8px rgba(212,175,55,.22);
}

p {
    margin-top: 0;
    color: var(--br-text-light);
    letter-spacing: .025em;
    text-shadow: 0 1px 2px rgba(0,0,0,.72);
}

a {
    color: var(--br-gold);
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--br-gold-light);
}

.social-icon-div {
    padding: .6rem 0 1.7rem;
}

.social-icon {
    padding: 10px;
    font-size: 32px;
    color: var(--br-gold) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.8);
    filter: drop-shadow(0 0 4px rgba(212,175,55,.16));
    transition: color 160ms ease, transform 160ms ease, filter 160ms ease;
}

.social-icon:hover,
.social-icon:focus {
    color: var(--br-gold-light) !important;
    transform: translateY(-2px);
    filter: drop-shadow(0 0 8px rgba(255,226,138,.48));
}

.rounded-avatar {
    border-radius: 50%;
    border: 2px solid var(--br-gold);
    box-shadow:
        0 0 0 3px rgba(18,54,58,.88),
        0 0 0 4px rgba(255,226,138,.24),
        0 8px 22px rgba(0,0,0,.48),
        0 0 18px rgba(212,175,55,.16);
}

.spacing { padding: 0 10px; }

hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid rgba(212,175,55,.28);
}

.credit-txt,
.credit-txt-clr {
    color: var(--br-gold) !important;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,.7);
}

.credit-txt:hover,
.credit-txt-clr:hover {
    color: var(--br-gold-light) !important;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--br-gold-dark) var(--br-petrol);
}

*::-webkit-scrollbar { width: 8px; }
*::-webkit-scrollbar-track { background: var(--br-petrol); }
*::-webkit-scrollbar-thumb { background: var(--br-gold-dark); }

@media (max-width: 640px) {
    body { background-attachment: scroll; }
    .container {
        width: calc(100% - 1rem);
        margin: .5rem auto;
        padding: 1.25rem 1rem 1.5rem;
        background: linear-gradient(180deg, rgba(28,69,68,.82), rgba(13,38,39,.78));
        backdrop-filter: blur(7px) saturate(1.05);
        -webkit-backdrop-filter: blur(7px) saturate(1.05);
    }
}