:root {
    --primary: #333333;
    --secondary: #212121;
    --primary-reverse: #d7d7d7;
}

header, footer {
    display: none;
}

header, body, main {
    display: flex;
    flex-direction: column;
}

/* body display part */
body {
    background: var(--primary);
    height: 100vh;
    width: 100vw;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    main {
        flex: 1 1 auto;
        background: var(--primary);
        flex-direction: row;
        height: inherit;
        width: inherit;
        justify-content: center;
        align-items: center;

        div[id="title"]::before, div[id="title"]::after {
            width: 100%;
            height: 100%;
        }
        div[id="title"]::before {
            content: "猫尾巴";
            position: absolute;
        }
        div[id="title"]::after {
            color: transparent;
            content: "_";
            transition: all 2s ease-in-out;
        }
        div[id="title"] {
            display: flex;
            justify-content: center;
            align-items: center;

            gap: calc(1rem + 2vmin);

            height: 50vh;
            width: 50vw;
            font-size: calc(4rem + 2vmin);
            background: transparent;
        }
        div[id="title"]:hover {
            font-size: calc(5rem + 2vmin);
        }
        div[id="title"]:hover::after {
            color: var(--secondary);
        }
    }
}

/* div basic property */

div {
    user-select: none;
    transition: all 2s ease;
}

/* effective class */

.shadowed, .shadowed ::before {
    text-shadow: var(--primary-reverse) 2px 5px 1rem;
}