:root {
    --ctp-text: var(--ctp-mocha-text);
    --ctp-base: var(--ctp-mocha-base);
    --ctp-crust: var(--ctp-mocha-crust);
    --ctp-surface0: var(--ctp-mocha-surface0);
    --ctp-surface1: var(--ctp-mocha-surface1);
    --ctp-mauve: var(--ctp-mocha-mauve);
    --ctp-peach: var(--ctp-mocha-peach);
    --ctp-yellow: var(--ctp-mocha-yellow);
    --ctp-red: var(--ctp-mocha-red);
    --ctp-blue: var(--ctp-mocha-blue);
    --ctp-green: var(--ctp-mocha-green);
}

@media (prefers-color-scheme: light) {
    :root {
        --ctp-text: var(--ctp-latte-text);
        --ctp-base: var(--ctp-latte-base);
        --ctp-crust: var(--ctp-latte-crust);
        --ctp-surface0: var(--ctp-latte-surface0);
        --ctp-surface1: var(--ctp-latte-surface1);
        --ctp-mauve: var(--ctp-latte-mauve);
        --ctp-peach: var(--ctp-latte-peach);
        --ctp-yellow: var(--ctp-latte-yellow);
        --ctp-red: var(--ctp-latte-red);
        --ctp-blue: var(--ctp-latte-blue);
        --ctp-green: var(--ctp-latte-green);
    }
}

html {
    scroll-behavior: smooth;
}

body {
    padding: 0;
    margin: 0;
    color: var(--ctp-text);
    background: var(--ctp-base);
    font-family: "Iosevka Web";
}

a {
    color: var(--ctp-blue);
    text-decoration: none;
}

.header {
    display: grid;
    grid-template-areas:
        '🖼️ 🖼️'
        '✏️ ✏️'
        '👋 👋'
        '🧡 💜';
    width: 35rem;
    max-width: 90vw;
    margin: 0 auto;
    justify-items: center;
    text-align: center;
    grid-template-rows: 11fr minmax(6fr, min-content) 5fr repeat(auto-fill, 8fr);
}

@media screen and (max-width: 500px) {
    .header {
        grid-template-areas:
            '🖼️'
            '✏️'
            '👋'
            '🧡'
            '💜';
    }
}

.header>* {
    margin: 0;
}

.header>.avatar {
    grid-area: 🖼️;
}

.header>h1 {
    grid-area: ✏️;

    font-size: 4rem;
    font-weight: 200;
}

.header>h1::after {
    content: "";
    padding-left: 0.5rem;
    border-right: 0.15rem solid;
    animation: blink-caret .75s step-end infinite;
}

/* media query for reduced animations*/
@media (prefers-reduced-motion: reduce) {
    .header>h1::after {
        animation: none;
    }
}

.header>h2 {
    grid-area: 👋;
    /* width: 100%; */
    /* text-align: center; */
    /* margin-top: -1.5rem; */
    font-size: 2rem;
    font-weight: 100;
}


.header>.misskey {
    grid-area: 🧡;
}

.header>.github {
    grid-area: 💜;
}


.content {
    width: 35rem;
    max-width: 90vw;
    margin: 0 auto;
}

.center {
    display: grid;
    place-items: center;
    text-align: center;
}

.card {
    margin: 1rem;
}

.card h2 {
    font-size: 2rem;
    font-weight: 900;
}

.card h3 {
    font-size: 1.6rem;
    font-weight: 700;
}

.card p {
    font-size: 1.2rem;
    font-weight: 300;
    width: 80%;
    margin: 1rem auto;
    /* grid-template-rows: auto; */
}

.pre {
    box-sizing: border-box;
    font-size: 0.9rem;
    font-weight: 300;
    width: min(20rem, 80%);
    padding: 0.2rem;
    line-break: anywhere;
    background-color: var(--ctp-surface0);
    overflow-x: scroll;
}

.reading ul {
    display: grid;
    grid-template-rows: min-content;
    grid-template-columns: 1fr 1fr;
    margin: 1rem;
}


.reading li::marker {
    content: "📖 ";
}


.shadow {
    filter: drop-shadow(0 0 0.5rem var(--ctp-crust));
}

.avatar>img {
    height: 10rem;
    border-radius: 50%;
    display: block;
    margin-top: 1rem;
    transition: 1s;
    cursor: grab;
    user-select: none;
}

.avatar>img:hover {
    filter: drop-shadow(0 0 0.5rem var(--ctp-red)) brightness(1.3) saturate(2);
    transform: scale(1.03);
}

.avatar>img:active {
    animation: shake 500ms linear infinite;
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}



/* The typewriter cursor effect */
@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: var(--ctp-text);
    }
}




#socials-container {
    /* width: 100%; */
    /* display: flex;
    justify-content: center; */
    margin-top: 1rem;
}

#socials {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    align-items: center;
    /* margin-top: 2rem; */
    width: max-content;
}

.socials {
    text-decoration: none;
    color: var(--ctp-text);
    height: 4rem;
    border-radius: 1rem;
    font-size: 1.5rem;
    margin: 1rem 1rem;
    padding: 1rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--ctp-surface0);
    transition: 0.3s ease-in-out;
}

.socials:hover {
    background: var(--ctp-surface1);
    transform: scale(1.01);
}

.socials>i {
    margin-right: 2rem;
    font-size: 2.75rem;
}

.socials.misskey {
    color: var(--ctp-green);
}

.socials.github {
    color: var(--ctp-mauve);
}

@media screen and (max-width: 600px) {
    #avatar>img {
        height: 9rem;
    }

    #socials {
        grid-template-columns: 1fr;
    }
}

.show-more-down-arrow {
    /* width: 100%; */
    padding: 0.1rem 0;
    /* text-align: center; */
    font-size: 2rem;
    height: 3rem;
}

.show-more-down-arrow>i {
    position: relative;
}

.show-more-down-arrow>i:hover {
    animation: bounce 1s ease-in-out infinite;
}

.project img{
    width: 100%;
    max-width: 400px;
    transition: transform 200ms;
}

.project img:hover{
    transform: scale(1.05);
}

.nowrap {
	text-wrap: nowrap;
	display: inline-block;
}


.footer {
    margin: 0;
    margin-top: 2rem;
    background-color: var(--ctp-crust);
    width: 100%;
	display: inline-block;
}

.footer p {
    float: right;
    padding: 1rem;
    font-weight: 200;
}

.footer p:nth-child(1) {
    float: left;
    font-size: 0.9rem;
}

@keyframes bounce {
    0% {
        top: 0px;
    }

    50% {
        top: 0.3rem;
    }

    100% {
        top: 0px;
    }
}

@media screen and (min-height: 700px) {
    .show-more-down-arrow {
        display: none;
    }
}

.secret-link {
	color: var(--ctp-text);
}