/* =================================
   xjam.uk stylesheet
   ================================= */
/* Variables */
:root {
    --dark: #99caf9;
    --blue: #003cff;
    --glow: #008cff;
    --glass:
        rgba(0, 0, 0, .45);
    --glass-button:
        rgba(0, 0, 0, .55);
    --border:
        rgba(255, 255, 255, .12);
    --radius: 12px;
    --font:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}

/* Reset */
* {
    box-sizing: border-box;
}

html {
    height: 100%;
    background-color: #000;
}

/* Theme */
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: white;
    font-family: var(--font);
    background:
        radial-gradient(circle at 50% 20%,
            #008cff55,
            transparent 40%),
        linear-gradient(135deg,
            var(--dark),
            var(--blue),
            #000);
}

/* Links */
a {
    color: white;
    text-decoration: none;
}

/* Buttons */
.button,
.links a,
.button-box a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding:
        10px 15px;
    color: white;
    background:
        var(--glass-button);
    border-radius:
        var(--radius);
    transition: .25s;
}

/* Glass Box */
.glass,
.button-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background:
        var(--glass);
    border:
        1px solid var(--border);
    backdrop-filter:
        blur(15px);
    border-radius:
        18px;
}

/* Button Hover */
.button:hover,
.links a:hover,
.button-box a:hover {
    background:
        rgba(0, 100, 255, .35);
    transform:
        translateY(-3px);
    box-shadow:
        0 0 20px var(--glow);
}

/* Homepage Links */
.links {
    display: flex;
    gap: 10px;
    padding: 10px;
    margin-top: 20px;
}

.links a {
    gap: 8px;
}

/* Icons */
.social-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}