@font-face {
    font-family: wenyue;
    src: url('../fonts/WenYue-GuDianMingChaoTi.otf')
}

@font-face {
    font-family: huiwen;
    src: url('../fonts/huiwen.otf')
}

@font-face {
    font-family: Baozhi;
    src: url('../fonts/WenYue-GuDianMingChaoTi.otf')
}

@font-face {
    font-family: Kangxi;
    src: url('../fonts/kangxi.ttf')
}

@font-face {
    font-family: Daofeng;
    src: url('../fonts/daofeng.ttf')
}

:root {

    --text-color: white;
    --background-color: rgba(255, 255, 255, 0.2);
    --line-color: rgb(39, 39, 39);

    --title-font-family: 'wenyue';
    --name-font-family: 'wenyue';
    --date-font-family: 'wenyue';
    --background-font-family: 'Daofeng';

    --line-width: calc(0.05 * var(--card-width));
    --line-height: calc(0.1 * var(--card-height));

    --card-width: 180px;
    --card-height: calc(1.5 * var(--card-width));
    --card-radius: calc(0.2 * var(--card-width));

    --title-box-width: calc(0.5 * var(--card-width));
    --title-box-height: calc(0.85 * var(--card-height));

    --name-box-width: calc(0.4 * var(--card-width));
    --name-box-height: calc(0.5 * var(--card-height));

    --date-box-height: calc(0.15*var(--card-height));
}

body {
    margin: 0px;
    height: 100vh;
    background-color: rgba(238, 238, 238, 0.947);
}

title-page {
    position: absolute;
    left: 0px;

    font-size: 15vh;
    user-select: none;
    font-family: 'Daofeng';

    color: rgba(49, 49, 49, 0.39);

    writing-mode: vertical-lr;
    text-orientation: upright;
    white-space: nowrap;
}

tree {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    gap: 0px;
    overflow: auto;

    position: sticky;
    top: 0px;
}

line-front {
    position: relative;
    height: var(--line-height);
    width: var(--line-width);

    background-color: var(--line-color);

    pointer-events: none;

    flex-shrink: 0;
}

line-end {
    position: relative;
    height: var(--line-height);
    width: var(--line-width);

    background-color: var(--line-color);

    pointer-events: none;

    flex-shrink: 0;
    z-index: -1;
}

card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: var(--card-width);
    height: var(--card-height);
    background-color: brown;

    position: relative;

    user-select: none;
    flex-shrink: 0;

    border-radius: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

card:hover {
    transform: scale(1.01);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

title-box {
    position: absolute;
    width: var(--title-box-width);
    height: var(--title-box-height);
    left: 0px;
    top: 0px;

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

name-box {
    position: absolute;
    width: var(--name-box-width);
    height: var(--name-box-height);
    bottom: calc(var(--date-box-height));
    right: 0px;

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

date-box {
    position: absolute;
    width: 100%;
    height: var(--date-box-height);
    bottom: 0px;

    background-color: rgb(129, 30, 30);

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

title {
    width: 100%;
    height: 100%;
    color: var(--text-color);
    font-size: calc(0.7 * var(--title-box-width));
    font-family: var(--title-font-family);
    max-width: 100%;
    max-height: 100%;
    overflow: hidden; 
    white-space: nowrap;

    display: flex;
    text-align: center;
    justify-content: flex-start;
    align-items: flex-start;
    writing-mode: vertical-lr;

    padding: calc(0.05*var(--card-width));
    box-sizing: border-box;
}

name {
    width: 100%;
    height: 100%;
    color: var(--text-color);
    font-size: calc(0.5 * var(--name-box-width));   
    font-family: var(--name-font-family), 'kangxi';      
    max-width: 100%;         
    max-height: 100%;
    overflow: hidden; 
    white-space: nowrap;

    display: flex;
    text-align: center;
    justify-content: flex-end;
    align-items: flex-end;
    writing-mode: vertical-lr;
    text-orientation: upright;

    padding: calc(0.05*var(--card-width));
    box-sizing: border-box;
}

date {
    width: 100%;
    height: 100%;
    color: var(--text-color);
    font-size: calc(0.45 * var(--date-box-height));
    font-family: var(--date-font-family);
    max-width: 100%;
    max-height: 100%;
    overflow: hidden; 
    white-space: nowrap;

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

background-box {
    position: absolute;
    height: 100%;
    width: 100%;

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

background {
    width: 100%;
    height: 100%;
    color: var(--background-color);
    font-size: calc(1.5 * var(--card-width));
    font-family: var(--background-font-family);
    overflow: hidden; 
    white-space: nowrap;
    position: absolute;
    top:0%;
    right: 0%;

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

    /* padding: calc(0.5*var(--card-width));
    box-sizing: border-box; */
}