* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    height: 100%;
    width: 100%;
    background: #0f0f0f
}

#particleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.grid-parent {
    display: flex;
    flex-direction: column;
    height: 100vh;
    align-items: center;   /* horizontally center .grid and button */
}

.grid {
    flex-grow: 1;
    display: grid;
    grid-template-rows: repeat(8, 96px);
    grid-template-columns: repeat(12, 96px);

    justify-content: center;  /* horizontal centering of grid cells inside grid container */
    align-content: center;    /* vertical centering of grid cells inside grid container */
}

.particle-hitbox {
    background-color: rgba(255, 255, 255, 0.05);
    border: 3px solid rgba(255, 255, 255, 0.3);
    z-index: 1;

    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.particle-hitbox:hover {
    transform: scale(1.2);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

.profile {
    grid-row: 2 / 4;
    grid-column: 6 / 8;

    display: flex;
    flex-direction: column;
    justify-content: center;     /* center horizontally */
    align-items: center;
    gap: 0.8rem;

    user-select: none;       /* Prevent text selection */
    cursor: default;         /* Keeps the regular arrow cursor */
    transform-style: preserve-3d;

    box-shadow: 0 0 40px rgba(255, 255, 255, 0.2);
}

.profile:hover {
    transform: scale(1.2);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

.profile-img {
    width: 50%;
    height: 50%;
    object-fit: cover;
    border-radius: 20px; /* Rounded image */
}

.profile-name {
    color: #fff; /* Or your desired text color */
    font-size: 2rem;
    margin: 0;

    font-family: "blithe", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.discord {
    grid-row: 1;
    grid-column: 3;

    background-image: url('./assets/discord-icon.svg');
    background-size: 70% 70%;
    background-repeat: no-repeat;
    background-position: center;

    background-color: rgba(88, 101, 242, 0.2);
    border: solid rgba(88, 101, 242, 0.6);

    box-shadow: 0 0 40px rgba(88, 101, 242, 0.4);
}

.discord:hover {
    background-image: url('./assets/discord-icon-white.svg');
    background-color: rgba(88, 101, 242, 0.4);
    border: solid rgba(88, 101, 242, 0.8);
}

.youtube {
    grid-row: 5;
    grid-column: 2;

    background-image: url('./assets/youtube-icon.svg');
    background-size: 60% 60%;
    background-repeat: no-repeat;
    background-position: center;

    background-color: rgba(255, 0, 0, 0.2);
    border: solid rgba(255, 0, 0, 0.6);

    box-shadow: 0 0 40px rgba(255, 0, 0, 0.4);
}

.youtube:hover {
    background-image: url('./assets/youtube-icon-white.svg');
    background-color: rgba(255, 0, 0, 0.4);
    border: solid rgba(255, 0, 0, 0.8);
}

.twitch {
    grid-row: 3;
    grid-column: 10;

    background-image: url('./assets/twitch-icon.svg');
    background-size: 60% 60%;
    background-repeat: no-repeat;
    background-position: center;

    background-color: rgba(145, 70, 255, 0.2);
    border: solid rgba(145, 70, 255, 0.6);

    box-shadow: 0 0 40px rgba(145, 70, 255, 0.4);
}

.twitch:hover {
    background-image: url('./assets/twitch-icon-white.svg');
    background-color: rgba(145, 70, 255, 0.4);
    border: solid rgba(145, 70, 255, 0.8);
}

.tiktok {
    grid-row: 6;
    grid-column: 7;

    background-image:
            url('./assets/tiktok-icon.svg'),
            linear-gradient(135deg, rgba(38, 244, 238, 0.2), rgba(251, 44, 83, 0.2));
    background-size: 60% 60%, cover;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;

    border-image: linear-gradient(135deg, rgba(38, 244, 238, 0.6), rgba(251, 44, 83, 0.6)) 1;

    box-shadow:
            -5px -5px 35px rgba(38, 244, 238, 0.4),
            5px 5px 35px rgba(251, 44, 83, 0.4);
}

.tiktok:hover {
    background-image:
            url('./assets/tiktok-icon-white.svg'),
            linear-gradient(135deg, rgba(38, 244, 238, 0.4), rgba(251, 44, 83, 0.4));
    border-image: linear-gradient(135deg, rgba(38, 244, 238, 0.8), rgba(251, 44, 83, 0.8)) 1;
}

.onlyfans {
    grid-row: 5;
    grid-column: 12;

    background-image: url('./assets/onlyfans-icon.svg');
    background-size: 70% 70%;
    background-repeat: no-repeat;
    background-position: center;

    background-color: rgba(0, 175, 240, 0.2);
    border: solid rgba(0, 175, 240, 0.6);

    box-shadow: 0 0 40px rgba(0, 175, 240, 0.4);
}

.onlyfans:hover {
    background-image: url('./assets/onlyfans-icon-white.svg');
    background-color: rgba(0, 175, 240, 0.4);
    border: solid rgba(0, 175, 240, 0.8);
}

#changeDensityBtn {
    margin-bottom: 20px;   /* optional: add some spacing from bottom */
    width: 75px;
    height: 25px;

    font-family: "komet", sans-serif;
    font-weight: 700;
    font-style: normal;

    color: #2d2d2d;
    background-color: transparent;
    border: none;
}