@font-face {
    font-family: Monabold;
    src: url("./assets/fonts/MonaspaceNeon-SemiWideSemiBold.otf");
}

@font-face {
    font-family: Monathin;
    src: url("./assets/fonts/MonaspaceNeon-Light.otf");
}

@font-face {
    font-family: PTMono;
    src: url("./assets/fonts/PTMono-Regular.ttf");
}

@font-face {
    font-family: Avenir;
    src: url("./assets/fonts/Avenir.ttc");
}

@font-face {
    font-family: Antonio;
    src: url("./assets/fonts/Antonio-SemiBold.ttf");
}

.mona {
    font-family: Monathin
}

.ptmono {
    font-family: PTMono;
}

.antonio {
    font-family: Antonio
}

p.sans {
    font-family: Avenir
}

p.serif {
    font-family: Monabold
}

.huge {
    font-size: 70pt;
}

.huge-adjust {
    font-size: 70pt;
    font-size: 7vw;
}

.large {
    font-size: 30pt;
}

.medium {
    font-size: 20pt;
}

.small-space {
    letter-spacing: -7px;
}

.red-font {
    color: #d4d4d4;
}

a {
    color: #62a1ff;
}

a:hover {
    color: #c8d8f0;
}

.white-font {
    color: white;
}

.red-shadow {
    filter: none;
}


.grow {
    transition: transform 250ms ease-in-out;
    transform-origin: middle;
}

.shrink {
    transition: transform 200ms ease-in-out;
    transform-origin: middle;
}

.tilt {
    transition: transform 250ms ease-in-out;
    transform-origin: middle;
}

.tilt:hover {
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    transform: rotate(10deg);
}

.slant {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
}

.grow:hover {
    transform: none;
}

.shrink:hover {
    transform: none;
}

/* Index page */
.portrait-wrapper {
    perspective: 600px;
    margin-bottom: 1.5rem;
}

#portrait {
    width: 200px;
    max-width: 200px;
    height: auto;
    display: block;
    will-change: transform;
    transition: transform 50ms ease-out;
}

.site-title {
    font-size: 1.3rem;
    color: #ccc;
    letter-spacing: 0.02em;
    margin: 0 0 1rem 0;
}

.intro-text {
    font-size: 0.85rem;
    line-height: 1.7;
    color: #999;
    margin: 0 0 1.5rem 0;
}

.link-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.link-list li {
    margin-bottom: 0.3rem;
}

.link-list a {
    font-size: 0.9rem;
    color: #a8b8d0;
    text-decoration: none;
    transition: opacity 200ms ease, padding-left 200ms ease;
}

.link-list a:hover {
    opacity: 0.7;
    padding-left: 4px;
}
.home {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: 4rem;
    align-items: start;
}

.feed-title {
    font-size: 0.8rem;
    font-weight: normal;
    color: #666;
    letter-spacing: 0.05em;
    margin: 0 0 1rem 0;
}

.feed-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feed-item {
    margin-bottom: 0.9rem;
}

.feed-item > a {
    display: block;
    text-decoration: none;
    padding: 0.7rem 0.9rem;
    border: 1px solid #1c1c1c;
    border-radius: 6px;
    transition: border-color 200ms ease;
}

.feed-item > a:hover {
    border-color: #3a3a3a;
}

.feed-meta {
    font-size: 0.7rem;
    color: #555;
    margin-bottom: 0.35rem;
}

.feed-text {
    font-size: 0.82rem;
    line-height: 1.6;
    color: #a8b8d0;
}

.feed-author {
    font-size: 0.75rem;
    color: #666;
    margin-top: 0.35rem;
}

.feed-item iframe {
    width: 100%;
    border: 0;
    border-radius: 6px;
}

@media (max-width: 800px) {
    .home {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }
}