@font-face {
    font-family: 'default';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Simplehae.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'title';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/HSBombaram21-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'default';
    font-size: 16px;
    line-height: 1.7em; 
    background: linear-gradient(var(--accent),var(--grad));
    background-attachment: fixed;
    cursor: url(https://peachtart2.s3.ap-northeast-1.amazonaws.com/tart/6a5bf448-f1d8-4be5-accd-442b76bca0e1.apng), auto;
}

.line {
    text-align: center;
    color: var(--accent);
}

h1 {
    color: var(--title);
    font-family: 'title';
}

a {
    color: var(--title);
    text-decoration: inherit;
}
a:hover {
    cursor: url(https://peachtart2.s3.ap-northeast-1.amazonaws.com/tart/6a5bf448-f1d8-4be5-accd-442b76bca0e1.apng), auto;
}

i {
    font-size: 20px;
}

.emoji {
    height: 1em;
    width: 1em;
}

.container {
    width: 95%;
    max-width: 640px;
    margin: 50px auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.header, .main {
    background-color: var(--bg);
    border-radius: 40px;
    padding: 20px;
    color: var(--fg);
}

.header > img {
    border-radius: 50%;
    margin-top: 50px;
    width: 150px;
}

.category {
    display: flex;
    overflow: auto;
    gap: 10px;
}

.category .item {
    font-size: 1.2em;
    padding: 10px;
    border-radius: 20px;
    color: var(--fg) !important;
    background-color: var(--bg);
}

.linkbox {
    border-radius: 30px;
    border: solid var(--accent);
    margin: 10px 0;
    padding: 0 20px;
    background-color: var(--button);
    text-align: center;
}

.linkbox h2 {
    color: var(--fg) !important;
}

.main img {
    border-radius: 20px;
}