@import url("https://use.typekit.net/ozy6rdy.css"); body { background-color: #f7d3d6; font-family: "ivystyle-sans", Verdana, sans-serif; font-size: 1.1rem; min-height: 100vh; } a, a:visited { color: #fc7d99; } button { background-color: #fab1c1; color: white; text-decoration: none; border: none; } .full_text { border-top: solid 1px white; border-bottom: solid 1px white; padding: 1rem; } .created_at { font-size: 0.9rem; } .favorite_count, .retweet_count, .permalink { font-size: 0.9rem; } #search-input { font-size: 1.5em; width: 100%; } .search_time { margin-top: 4px; } .search_text { display: inline; } .search_link { display: inline; } #sorting { margin-top: 8px; line-height: 1.7em; } .sort-button { font-size: 1.0em; } .wrapper { display: block; max-width: 600px; margin: 0 auto; word-wrap: break-word; } .flex-wrap { display: flex; flex-direction: column; } .tweet { background-color: #f9dee1; max-width: 600px; padding: 16px; font-family: "ivystyle-sans", Verdana, sans-serif; font-size: 1.1rem; border: 2px solid white; border-radius: 16px; } .tweet img { max-height: 100%; vertical-align: bottom; width: auto; object-fit: contain; } .tweet video { max-height: 100%; vertical-align: bottom; width: 100%; } .tweet ul { display: flex; flex-wrap: wrap; list-style-type: none; gap: 8px; padding-left: 0px; margin-bottom: 0px; } .tweet li { height: 20vh; width: 20vh; flex-grow: 1; } .tweet .display_name { margin-bottom: 0; margin-top: 0; } .tweet .user_name { margin-top: 4px; } .tweet .favorite_count { display: inline-block; margin-bottom: 0; } .tweet .retweet_count { display: inline-block; margin-left: 16px; margin-bottom: 0; } .tweet .created_at { margin-bottom: 0; font-size: 0.9rem; } .tweet .permalink { margin-left: 16px; } .child { margin-top: 16px; margin-left: 64px; max-width: calc(600px - 64px); background-color: white; } .parent { margin-bottom: 16px; margin-right: 64px; max-width: calc(600px - 64px); background-color: white; } @media screen and (max-width: 599px) { .tweet li { height: 15vh; width: 15vh; flex-grow: 1; } } @media(prefers-color-scheme: dark) { body { background-color: #282A36; color: #F8F8F2; } a, a:visited { color: #ff79c6; } a:hover, a:active { color: #ff79c6; font-weight: bold; } .tweet { background-color: #44475a; border: 1px solid #bd93f9; /*#33ff00;*/ border-radius: 5px; } .child { background-color: #282A36; } .parent { background-color: #282A36; } button { background-color: #282A36; color: #F8F8F2; } input { background-color: #282A36; color: #F8F8F2; } .tweet .favorite_count { color: #ff79c6; } .tweet .retweet_count { color: #ff79c6; } .tweet .created_at { color: #ff79c6; } } #tabs { margin: -16px 0 0; } .tab:first-child { margin-left: -16px; border-top-left-radius: 16px; } .hr { margin: 0 -16px 16px -16px; } .tab { border: none; font-size: 1.2em; cursor: pointer; padding: 4px 10px; border-right: 2px solid #282A36; box-sizing: border-box; } .tab.active { text-decoration: underline; } #browse-sort > button { font-size: 1.0em; } #page-num { font-size: 1.0em; width: 80px; } #browse-sort { line-height: 1.7em; } #paging { margin: 8px 0; }