@font-face {
    font-family: "Chirp";
    src: url("../assets/fonts/chirp.woff2");
    font-weight: 400;
}
@font-face {
    font-family: "Chirp";
    src: url("../assets/fonts/chirpbold.woff2");
    font-weight: 700;
}
@font-face {
    font-family: "Chirp";
    src: url("../assets/fonts/chirpheavy.woff2");
    font-weight: 900;
}

/*//////////////////////////////////////////////////////////////////////*/

:root {
    --white: #e7e9ea;
    --blue: #1d9bf0;
    --grey: #71767b;
}

body {
    font-family: "Chirp";
    display: flex; justify-content: center;
    min-height: 100vh; margin: 0;
    background: #000; color: var(--white);
    overflow-y: auto; scrollbar-width: none;
}
::-webkit-scrollbar {display: none}
.page {
    width: min(90vw, 700px);
    padding-bottom: 40px;
}
:any-link {
    color: var(--blue); text-decoration: none;
    cursor: pointer !important
}

/*//////////////////////////////////////////////////////////////////////*/

.search {
    position: relative;
    margin: 12px 0 12px; width: 90%;
}
.searchicon {
    position: absolute;
    left: 18px; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    opacity: 0.5; pointer-events: none;
}
.searchbar {
    width: 100%; height: 44px; padding: 0 16px 0 48px;
    border-radius: 999px;
    border: 1px solid #2f3336;
    background: transparent; color: var(--white);
    font-family: inherit; font-size: 15px;
    caret-color: var(--blue);
}
.searchbar::placeholder {color: var(--grey)}
.searchbar:focus {
    outline: none;
    border-color: var(--blue);
}

/*//////////////////////////////////////////////////////////////////////*/

.note {
    display: flex; align-items: center;
    background: rgba(255, 0, 0, 0.12);
    border: 1px solid #7a0000; color: var(--white);
    gap: 7px; border-radius: 10px;
    padding: 16px; font-size: 15px;
}

/*//////////////////////////////////////////////////////////////////////*/

.profile {
    border-radius: 16px;
    overflow: hidden;
}
.profilebanner {
    height: 200px;
    background-size: cover;
    background-position: center;
}
.profilebody {
    position: relative;
    padding: 78px 16px 16px;
    background: #000;
}
.profileavatar {
    position: absolute;
    top: -64px; left: 16px;
    width: 128px; height: 128px;
    border-radius: 50%;
    border: 4px solid black;
}
.profileheader {display: flex}
.profilenameblock {
    display: flex; flex-direction: column;
    gap: 4px;
}
.profilenamerow {display: flex; font-size: 22px; font-weight: 700}
.profilehandle {color: var(--grey); font-size: 15px;}
.profileactions {margin-left: auto; display: flex; gap: 8px;}

b {color: white}

.profilelinks, .profilemeta, .profilestats {
    display: flex; flex-wrap: wrap;
    font-size: 15px; margin-top: 12px;
    color: var(--grey);
}
.profilelinks span, .profilelinks a {padding-left: 3px; padding-right: 10px}
.profilestats span {
    padding-right: 20px;
}

.profilestats a {
    text-decoration: none;
    color: inherit; display: flex; gap: 4px;
}
.profilefollowed {
    margin-top: 12px; font-size: 15px;
    color: var(--grey);
}

/*//////////////////////////////////////////////////////////////////////*/

.replying {
    color: var(--grey); padding-bottom: 2px;
}
.tweet {
    display: flex; position: relative; padding: 12px;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, black 0%, rgb(47, 51, 54) 5% 95%, black 100%);
    border-image-slice: 1;
}
.avatar {
    width: 40px; height: 40px;
    border-radius: 50%; margin-right: 7px;
}
.content {flex: 1; min-width: 0}
.header {
    display: flex; align-items: center;
    margin-bottom: 2px; gap: 4px;
}
.name {
    font-weight: 700;
    color: var(--white);
    font-size: 15px;
}
.handle {
    color: var(--grey);
    font-size: 15px;
    margin-left: 1px;
}
.date {
    color: var(--grey);
    font-size: 15px;
}
.text {
    color: var(--white);
    font-size: 15px; line-height: 20px;
    margin-bottom: 12px;
    white-space: pre-wrap;
}

/*//////////////////////////////////////////////////////////////////////*/

.actions {
    display: flex; justify-content: space-between;
    max-width: 425px; margin-top: -7.5px; margin-left: -7.5px;
}
.action {
    display: flex; align-items: center;
    color: var(--grey); user-select: none;
    background: none; border: none;
    padding: 0; font-size: 13px;
    font-family: inherit; transition: color 0.2s;
    min-width: 60px;
}
.action span:last-child {
    min-width: 30px;
    text-align: left;
}
.actionicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    transition: background-color 0.2s;
}
svg {
    width: 18.75px; height: 18.75px;
    fill: currentColor;
}
.action:hover {color: var(--blue)}
.action:hover .actionicon {background-color: rgba(29,155,240,0.15)}
.retweet:hover {color: #00BA7C !important}
.retweet:hover .actionicon {background-color: rgba(0,186,124,0.15)}
.like:hover {color: #EC177A !important}
.like:hover .actionicon {background-color: rgba(249,24,128,0.15)}
.reply, .retweet {cursor: pointer !important}
[disabled] {opacity: 0.5; cursor: not-allowed !important}

.emoji {
    user-select: none; cursor: help !important;
    font-stretch: condensed;
    letter-spacing: -1px; color: var(--grey);
    padding-right: 1px;
}

/*//////////////////////////////////////////////////////////////////////*/

.info {
    position: absolute;
    text-align: right;
    right: 1em; top: 1.5em; font-size: 0.5em;
    color: var(--grey);
    display: flex;
    flex-direction: column;
    gap: 0.2em;
}
.info .id {
    font-size: 1.25em;
}