html, body {
    margin: 0;
    min-height: 100%;
}

body {
    min-height: 100vh;
    background-color: black;
    background-image: url("img/HSRBG.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
}

/* Darkens the background only */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10;

    opacity: 0;

    background: radial-gradient(
        circle 180px at var(--x) calc(var(--y) - 45px),
        rgba(255, 220, 140, 0.55) 0%,
        rgba(255, 160, 60, 0.20) 35%,
        rgba(0, 0, 0, 0.35) 75%
    );

    transition: opacity 0.25s ease;
}

body.mouse-active::after {
    opacity: 1;
}

/* Keeps logo above overlay */
.page-content {
    position: relative;
    z-index: 2;
}


/* PNG glow */
.title-logo {
    width: 1200px;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.title-logo:hover {
    transform: scale(1.05);
    filter:
        drop-shadow(0 0 10px rgb(255, 255, 255))
        drop-shadow(0 0 25px white)
        drop-shadow(0 0 45px white);
}

body {
    cursor: url("img/cursor.png") 32 32, auto;
}

.title-logo {
    cursor: url("img/cursor.png") 32 32, pointer;
}

.back {
    cursor: url("img/cursor.png") 32 32, pointer;
}

.contact {
    font-size: 2rem;
    color: #ddd;
    margin: 15px 0;
}

.contact a {
    color: #4db8ff;
    text-decoration: none;
}

.contact a:hover {
    text-decoration: underline;
}