/* Load your custom font */
@font-face {
    font-family: "main-font";
    src: url("/font/FOTSeuratProB.otf") format("opentype");
}

body {
    position: relative;
    background: white; /* keep header area clean */
}

/* Fake background layer */
body::before {
    content: "";
    position: absolute;
    top: 200px;
    left: 0;
    width: 100%;
    height: calc(100% - 200px);
    background-image: url("https://jeralddude.neocities.org/images/FlipnoteHatena/FlipnoteBG.png");
    background-repeat: repeat;
    background-position: top center;
    background-size: 512px 384px; /* ← scaled tile */
    z-index: -1;
}

/* Container */
.friend-list {
    width: 480px;
    margin: 0 auto;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 12px; /* spacing between buttons */
    font-family: "main-font", sans-serif;
}

.friend-link {
    text-decoration: none;
    display: block;
}

/* Flipnote Hatena-style button */
.friend {
    display: flex;
    align-items: center;
    background: #ffffff; /* Hatena green */
    border: 5px solid #81c100; /* darker green border */
    border-radius: 8px; /* Hatena roundness */
    padding: 8px 10px;
    gap: 10px;
    font-family: "main-font", sans-serif;
}

/* Hover effect (slightly brighter like Hatena buttons) */
.friend:hover {
    background: #fcfcbb;      /* Hatena pressed fill */
    border-color: #60a000;    /* Hatena pressed border */
}

.friend:hover .friend-name,
.friend:hover .friend-fsid {
    color: #60a000;           /* Hatena hover text */
}

/* Profile picture */
.friend-pfp {
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Text container */
.friend-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: "main-font", sans-serif;
}

/* Username */
.friend-name {
    font-size: 16px;
    font-weight: bold;
    color: #81c100;
}

/* FSID */
.friend-fsid {
    font-size: 12px;
    color: #81c100; /* soft pale green */
    margin-top: 2px;
}