/* Famsite CSS */

/* Optional Emoji font to support clients without good system Emoji font
 * support. You can remove this to shave 300Kb from the total payload of
 * Famsite.
 ***********************************************************************
 */
@font-face {
    font-family: 'Twemoji';
    src: url("twemoji-subset.woff2") format("woff2");
}
.postbox textarea, .post .txt, #fc_popup, .emoji, .control-row
{ font-family: "Twemoji", serif !important; }
span.picked-emoji { font-family: "Twemoji"; }
/*
 * End of optional Emoji font declarations.
 ***********************************************************************
 */

html { margin: 0; padding: 0; height: 100%; }
body {
    margin: 0; padding: 0;
    font-size: 1.2em;
    background: #fefeee;
    color: #222;
}
a, a:visited { color: #538; }

header {
    background: #679;
    padding: 5px;
    color: #FFF;
    display: flex;
    align-items: center;
    gap: 20px;
}
header a, header a:visited {
    color: #ffd045;
    background: #444e64;
    padding: 3px;
    text-decoration: none;
}
header a:hover { filter: drop-shadow(3px 3px #000); }
header a:active { filter: drop-shadow(-1px -1px #000); }
header .avatar-container { display: flex; align-items: center; }
header .avatar { width: 30px; height: 30px; margin-right: 5px; }

.avatar {
    width: 46px; height: 46px;
    border: 2px solid #ffd87c; border-radius: 10px;
}

#timeline {
    max-width: 770px;
    margin: auto;
}

/* Post Box (Submit new post) */
.postbox {
    max-width: 650px;
    margin: 35px;
}
input[name='image'] { display: none; }
.control-row {
    width: 100%;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.postbox textarea {
    border: 2px solid #86B; border-radius: 15px;
    background: #FEC;
    width: 100%; height: 120px;
    font-family: "Twemoji", serif;
    font-size: 1em;
    padding: 15px;
}
#image-preview img {
    max-width: 200px;
    max-height: 200px;
    margin: 10px;
}
.postbox a:hover {
    background: #e7d8ff;
    color: #9700ff;
}
.postbox button {
    font-size: 1.1em;
    background: #86B;
    color: #FFF;
    border: 2px solid #000;
    border-radius: 15px;
    padding: 10px;
}
.postbox button:hover {
    filter: drop-shadow(5px 5px #000);
    top: -3px; left: -3px;
}
.postbox button:active {
    filter: drop-shadow(-2px -2px #000);
    top: 2px; left: 2px;
}
.postbox button.cancel {
    background-color: #ff5371;
    margin-right: 10px;
}


/* Popups */
#fc_popup { z-index: 2; }
.popup {
    position: absolute;
    display: flex;
    padding: 5px;
    border: 2px solid #FFF;
    border-radius: 10px;
    filter: drop-shadow(10px 10px 10px #000);
    gap: 5px;
    z-index: 1;
}
.popup.spoiler-pop { background: #000; }
.popup.reaction-pop { background: #00ceff; }
.popup .picked-emoji { font-size: 1.2em; }
.popup button {
    border: 2px solid white;
    border-radius: 5px;
    font-size: 1.1em;
}
.popup button.cancel { background-color: #ff5371; color: white; }
.popup button.add { background-color: #649951; color: white; }
.popup button.pick { background-color: #cbf5ff; }
.popup input {
    flex: 1;
    background: #FEC;
    font-size: 1em;
}


/* Animations */
.whee {
    border: 1px solid black;
    animation: whee-anim 2s infinite;
}
@keyframes whee-anim {
    0% { background: #D55; }
    50% { background: #FD8; }
    100% { background: #D55; }
}

/* Display Post */
h2.day {
    font-size: 2em;
    color: #ADE;
    border-bottom: 6px dotted;
}
.posts { margin-left: 20px; }
.post { max-width: 700px; margin-bottom: 30px; }
.post .avatar { }
.post .image { margin-left: 4em; }
.post .info {
    display: flex; gap: 10px;
    color: #888;
    font-size: 0.9em;
    margin: 10px 0;
    background-image: linear-gradient(to right, #F5F5E2FF , #F5F5E200);
}
.post .info a, .post .info a:visited {
    color: #999;
    padding: 5px;
    margin-left: 1em;
}
.post .info a:hover { color: #538; }
.post > .txt { margin-left: 60px; }
.spoiler { background: #d7bcff; color: #86b0; }
.spoiler:hover { background: #efe5ff; color: #000; cursor: pointer; }
.post .add_reaction:hover { background: #b3f7e4; }
.post .edit-link:hover { background: #f7d6b3; }
.reactions {
    color: #555;
    margin-left: 60px;
    border-top: 1px solid #555;
    margin-top: 5px;
    padding-top: 5px;
}
.reactions .emoji { font-size: 1.2em; margin-right: 5px; }
.reactions .user { font-size: 0.8em; margin-right: 5px; }
.reactions .txt { font-size: 0.8em; }
.post a.edit-link { margin-left: 1em; }


/* "Special" posts group together horizontally */
.special {
    display: flex; gap: 20px;
    border-width: 2px 2px 2px 16px;
    border-radius: 20px;
    border-style: solid;
    padding: 10px;
}
.special .post { flex: 1; max-width: 350px; }
.special .info a { margin-left: 5px; }
.special1 { /* wordplay */ border-color: #87c037; } 
.special2 { /* connections */ border-color: #bc70c4; }
.special .post .txt { margin-left: 0; }
.special .reactions { margin-left: 0; }
.special .control-row { display: flex; flex-direction: column; }
.special .control-row .buttons { display: flex; flex-direction: column; }
.special .control-row .buttons button { margin: 10px; }
                 /* swap order of submit and cancel */
.special .control-row .buttons .cancel { order: 2; }

.small { font-size: 0.9em; }