/* Minimal Theme designed by Artur Kim (http://arturkim.com) for Tumblr | version 1.5 */

/* RESET */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

:focus {
    outline: 0;
}

del {
    text-decoration: line-through;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* GLOBAL ELEMENTS */
body {
    background: #fff;
}

body,
input,
textarea {
    color: #000;
    font: 14px/20px "helvetica neue", helvetica, arial, sans-serif;
}

p,
ul,
ol,
dd,
pre {
    margin-bottom: 20px;
}

pre,
code {
    font: 12px Monaco, monospace;
    line-height: 20px;
}

blockquote {
    border-left: 5px solid #ddd;
    color: #555;
    font-style: italic;
    margin-bottom: 20px;
    padding-left: 10px;
}

table {
    border: 1px solid #ccc;
    border-width: 1px 1px 0 1px;
    font-size: 14px;
    line-height: 20px;
    margin: 0 0 22px 0;
    text-align: left;
}

caption {
    text-align: left;
}

tr {
    border-bottom: 1px solid #ccc;
}

th,
td {
    padding: .7em 1.25em;
}

hr {
    background-color: #ccc;
    border: 0;
    color: #555;
    height: 1px;
    margin-bottom: 20px;
}

a:link,
a:visited {
    color: #555;
}

a:focus,
a:hover,
a:active {
    color: #dd3333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    clear: both;
}

img {
    background: #eee;
}

a img:focus,
a img:hover,
a img:active {
    background: #dd3333;
}

/* DEFAULT CSS */
#header .menu {
    border-bottom: 1px solid #ccc;
    margin: 0 auto 3px;
    overflow: hidden;
    padding: 20px 0 10px;
    width: 900px;
}

#header #pages {
    float: left;
    width: 580px;
}

#header #pages ul {
    float: left;
    margin-bottom: 0;
}

#header #pages li {
    float: left;
    margin-right: 10px;
    padding: 4px 10px 3px 0;
}

#header #pages a,
#header #pages a:visited {
    color: #555;
    font-size: 16px;
    text-decoration: none;
}

#header #pages a:focus,
#header #pages a:hover,
#header #pages a:active {
    color: #dd3333;
}

#header #search {
    float: right;
}

#header #search input {
    border: 1px solid #ccc;
    line-height: 20px;
    padding: 4px;
}

#header #search input.search-button {
    background: #eee;
    color: #555;
    padding: 3px;
    width: 60px;
}

#header #branding {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin: 0 auto 3px;
    padding: 40px 0;
    width: 900px;
}

#header h1 a {
    color: #111;
    font: 80px Georgia, serif;
    font-weight: normal;
    line-height: 100px;
    text-decoration: none;
}

#header h1 a:focus,
#header h1 a:hover,
#header h1 a:active {
    color: #dd3333;
}

#header img {
    max-width: 900px;
}

#main {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    clear: both;
    margin: 0 auto 3px;
    overflow: hidden;
    width: 900px;
}

#container {
    border-right: 1px solid #ccc;
    float: left;
    min-height: 400px;
    width: 580px;
}

.post-meta {
    border-bottom: 1px solid #ccc;
    color: #555;
    overflow: hidden;
    padding: 9px 0;
}

.post-meta .type {
    float: left;
}

.post-meta .type a {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    padding: 0 10px 10px;
    text-decoration: none;
}

.post-type-text .post-meta .type a {
    border-bottom: 1px solid #555555;
    color: #555555;
}

.post-type-photo .post-meta .type a {
    border-bottom: 1px solid #555555;
    color: #555555;
}

.post-type-photoset .post-meta .type a {
    border-bottom: 1px solid #555555;
    color: #555555;
}

.post-type-quote .post-meta .type a {
    border-bottom: 1px solid #555555;
    color: #555555;
}

.post-type-link .post-meta .type a {
    border-bottom: 1px solid #555555;
    color: #555555;
}

.post-type-chat .post-meta .type a {
    border-bottom: 1px solid #555555;
    color: #555555;
}

.post-type-video .post-meta .type a {
    border-bottom: 1px solid #555555;
    color: #555555;
}

.post-type-audio .post-meta .type a {
    border-bottom: 1px solid #555555;
    color: #555555;
}

.post-meta .type a:focus,
.post-meta .type a:hover,
.post-meta .type a:active {
    margin-left: 5px;
}

.post-meta .date,
.post-meta .comments,
.post-meta .note-count {
    float: left;
    padding: 0 10px;
}

.post-content {
    padding: 30px 30px 60px;
}

.post-content div:last-child,
.post-content div:last-child p,
.post-content div:last-child ul,
.post-content div:last-child ol,
.post-content div:last-child blockquote {
    margin-bottom: 0;
}

.post-content h3 {
    font: 20px Georgia, serif;
    margin-bottom: 20px;
}

.post-content h3 a,
.post-content h3 a:visited {
    color: #111;
    text-decoration: none;
}

.post-content h3 a:focus,
.post-content h3 a:hover,
.post-content h3:active {
    color: #dd3333;
}

.post-content img {
    margin-bottom: 20px;
    padding: 10px;
}

.post-type-text .post-content ul {
    padding-left: 30px;
}

.post-type-text .post-content ul ul {
    margin-bottom: 0;
}

.post-type-text .post-content ul li {
    list-style-type: disc;
}

.post-type-text .post-content ul ul li {
    list-style-type: circle;
}

.post-type-text .post-content ol {
    padding-left: 30px;
}

.post-type-text .post-content ol ol {
    margin-bottom: 0;
}

.post-type-text .post-content ol li {
    list-style-type: upper-latin;
}

.post-type-text .post-content ol ol li {
    list-style-type: lower-latin;
}

.post-type-photoset .post-content .html_photoset {
    background: #eee;
    margin-bottom: 20px;
    padding: 10px;
}

.post-type-link .post-content .link-wrap {
    margin-bottom: 20px;
}

.post-type-chat .post-content .label {
    color: #333;
    font-weight: bold;
}

.post-type-video .post-content .video-wrap {
    background: #f0f0f0;
    margin-bottom: 20px;
    padding: 10px;
}

.post-type-audio .post-content .caption {
    margin-top: 10px;
}

.tags {
    font-size: 13px;
}

.tags a {
    text-decoration: none;
}

.tags a:after {
    content: ",";
}

.tags a:last-child:after {
    content: "";
}

#disqus_thread {
    border-top: 1px solid #ccc;
    padding: 10px 30px 0;
}

#disqus_thread h3 {
    color: #111;
    font: 18px Georgia, serif;
    margin: 20px 0 10px;
}

#dsq-content .dsq-subscribe-menu {
    font-size: 12px;
}

#post-notes {
    border-top: 1px solid #ccc;
    padding: 30px;
}

#post-notes ol li {
    border-bottom: 1px dotted #ccc;
    padding: 10px 0;
}

#post-notes ol li img {
    background: none;
    padding-right: 3px;
    vertical-align: middle;
}

.pagination {
    border-top: 1px solid #ccc;
    overflow: hidden;
    padding: 20px 0;
}

.pagination .previous-page {
    float: left;
}

.pagination .next-page {
    float: right;
    margin-right: 30px;
}

.pagination a {
    font: 20px Georgia, serif;
    text-decoration: none;
}

#sidebar {
    float: left;
    padding-bottom: 30px;
    width: 319px;
}

#sidebar h3 {
    border-bottom: 1px dotted #ccc;
    color: #999;
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 20px;
    padding: 9px 20px;
    text-transform: uppercase;
}

#sidebar h3 a,
#sidebar h3 a:visited {
    color: #999;
    text-decoration: none;
}

#sidebar h3 a:focus,
#sidebar h3 a:hover,
#sidebar h3 a:active {
    color: #dd3333;
}

#sidebar ul {
    margin-bottom: 0;
}

.widget {
    border-bottom: 1px solid #ccc;
    color: #333;
    font-size: 13px;
    padding: 0 20px 20px 20px;
}

.widget h3 {
    font: 20px Georgia, serif;
    margin-bottom: 20px;
}

.widget h3 a,
.widget h3 a:visited {
    color: #000;
    text-decoration: none;
}

.widget h3 a:focus,
.widget h3 a:hover,
.widget h3 a:active {
    color: #dd3333;
}

.widget img {
    padding: 5px;
    max-width: 250px;
}

.widget p:last-child,
.widget ul:last-child,
.widget ol:last-child,
.widget blockquote:last-child {
    margin-bottom: 0;
}

#about {
    overflow: hidden;
}

#about img {
    background: #fff;
    border: 1px solid #ccc;
    float: left;
    margin: 0 10px 0 0;
    padding: 3px;
}

.like_post {
    border-bottom: 1px dotted #ccc;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.like_post:last-child {
    border: none;
    margin: 0;
    padding: 0;
}

.like_post ul {
    padding-left: 20px;
}

.like_post ul ul {
    margin-bottom: 0;
}

.like_post ul li {
    list-style-type: disc;
}

.like_post ul ul li {
    list-style-type: circle;
}

.like_post ol {
    padding-left: 20px;
}

.like_post ol ol {
    margin-bottom: 0;
}

.like_post ol li {
    list-style-type: upper-latin;
}

.like_post ol ol li {
    list-style-type: lower-latin;
}

.like_post p:last-child,
.like_post ul:last-child,
.like_post ol:last-child,
.like_post blockquote:last-child {
    margin-bottom: 0;
}

#tweets {
    margin-bottom: 10px;
}

#tweets .content {
    margin-bottom: 10px;
}

#tweets a {
    text-decoration: none;
}

#following_container {
    overflow: hidden;
    padding-bottom: 20px;
}

#following_container li {
    display: inline;
    padding: 0;
    margin: 0;
}

#footer {
    border-top: 1px solid #ccc;
    clear: both;
    margin: 0 auto;
    overflow: hidden;
    width: 900px;
}

#colophon {
    color: #555;
    float: right;
    font-size: 12px;
    padding: 10px 0 20px;
}

#footer a {
    border-bottom: 1px dotted #555;
    text-decoration: none;
}

:host {
    all: initial;
    pointer-events: inherit;
    --ruffle-blue: #37528c;
    --ruffle-orange: #ffad33;
    display: inline-block;
    font-family: Arial, sans-serif;
    height: 400px;
    letter-spacing: .4px;
    position: relative;
    touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 550px;
    -webkit-tap-highlight-color: transparent
}

:host(:-webkit-full-screen) {
    display: block;
    height: 100% !important;
    width: 100% !important
}

.hidden {
    display: none !important
}


#message-overlay,
#panic,
#play-button,
#splash-screen,
#unmute-overlay,
#unmute-overlay .background {
    inset: 0;
/*     position: absolute */
}

#container {
    outline: none;
    overflow: hidden
}

#container canvas {
    height: 100%;
    width: 100%
}

#play-button,
#unmute-overlay {
    cursor: pointer;
    display: none
}

#unmute-overlay .background {
    background: #000;
    opacity: .7
}

#play-button .icon,
#unmute-overlay .icon {
    height: 50%;
    left: 50%;
    max-height: 384px;
    max-width: 384px;
    opacity: .8;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50%
}

#play-button:hover .icon,
#unmute-overlay:hover .icon {
    opacity: 1
}

#unmute-overlay-svg {
    scale: .8
}

#panic {
    background: linear-gradient(180deg, #fd3a40, #fda138);
    color: #fff;
    display: flex;
    flex-flow: column;
    font-size: 20px;
    justify-content: space-around;
    overflow: auto;
    text-align: center
}

#panic a {
    color: var(--ruffle-blue);
    font-weight: 700
}

#panic-title {
    font-size: xxx-large;
    font-weight: 700
}

#panic-body.details {
    flex: 0.9;
    margin: 0 10px
}

#panic-body textarea {
    height: 100%;
    resize: none;
    width: 100%
}

#panic ul {
    display: flex;
    justify-content: space-evenly;
    list-style-type: none;
    padding: 0
}

#message-overlay {
    align-items: center;
    background: var(--ruffle-blue);
    color: var(--ruffle-orange);
    display: flex;
    justify-content: center;
    opacity: 1;
    overflow: auto;
    position: absolute;
    z-index: 2
}

#message-overlay .message {
    font-size: 20px;
    max-height: 100%;
    max-width: 100%;
    padding: 5%;
    text-align: center
}

#message-overlay p {
    margin: .5em 0
}

#message-overlay .message div {
    -moz-column-gap: 1em;
    column-gap: 1em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

#message-overlay a,
#message-overlay button {
    background: var(--ruffle-blue);
    border: 2px solid var(--ruffle-orange);
    border-radius: .6em;
    color: var(--ruffle-orange);
    cursor: pointer;
    font-size: 1.25em;
    font-weight: 700;
    margin: 2% 0;
    padding: 10px;
    text-decoration: none
}

#message-overlay a:hover,
#message-overlay button:hover {
    background: #ffffff4c
}

#continue-btn {
    background: var(--ruffle-blue);
    border: 2px solid var(--ruffle-orange);
    border-radius: 20px;
    color: var(--ruffle-orange);
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    padding: 10px
}

#continue-btn:hover {
    background: #ffffff4c
}

#context-menu-overlay,
.modal {
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 1
}

#context-menu {
    background-color: var(--modal-background);
    border: 1px solid gray;
    box-shadow: 0 5px 10px -5px #000;
    color: rgb(var(--modal-foreground-rgb));
    font-size: 14px;
    list-style: none;
    margin: 0;
    padding: 3px 0;
    position: absolute;
    text-align: start;
    white-space: nowrap
}

#context-menu .menu-item {
    color: rgb(var(--modal-foreground-rgb));
    padding: 5px 10px
}

#context-menu .menu-item.disabled {
    color: rgb(var(--modal-foreground-rgb), .5);
    cursor: default
}

#context-menu .menu-item:not(.disabled):hover {
    background-color: rgb(var(--modal-foreground-rgb), .15)
}

#context-menu .menu-separator hr {
    border: none;
    border-bottom: 1px solid rgb(var(--modal-foreground-rgb), .2);
    margin: 3px
}

#splash-screen {
    align-items: center;
    background: var(--splash-screen-background, var(--preloader-background, var(--ruffle-blue)));
    display: flex;
    flex-direction: column;
    justify-content: center
}

.loadbar {
    background: #253559;
    height: 20%;
    max-height: 10px;
    max-width: 316px;
    width: 100%
}

.loadbar-inner {
    background: var(--ruffle-orange);
    height: 100%;
    max-width: 100%;
    width: 0
}

.logo {
    display: var(--logo-display, block);
    max-height: 150px;
    max-width: 380px
}

.loading-animation {
    aspect-ratio: 1;
    margin-bottom: 2%;
    max-height: 28px;
    max-width: 28px;
    width: 10%
}

.spinner {
    stroke-dasharray: 180;
    stroke-dashoffset: 135;
    stroke: var(--ruffle-orange);
    animation: a 1.5s linear infinite;
    transform-origin: 50% 50%
}

@keyframes a {
    to {
        transform: rotate(1turn)
    }
}

#virtual-keyboard {
    height: 1px;
    opacity: 0;
    position: absolute;
    top: -100px;
    width: 1px
}

.modal {
    background-color: #0008
}

.modal-area {
    background-color: var(--modal-background);
    border-radius: 12px;
    box-shadow: 0 2px 6px 0 #0008;
    color: rgb(var(--modal-foreground-rgb));
    left: 50%;
    padding: 8px 12px;
    position: relative;
    transform: translateX(-50%);
    width: -moz-fit-content;
    width: fit-content
}

#modal-area {
    height: 300px;
    width: 450px
}

.close-modal {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 -960 960 960'%3E%3Cpath d='M480-392 300-212q-18 18-44 18t-44-18-18-44 18-44l180-180-180-180q-18-18-18-44t18-44 44-18 44 18l180 180 180-180q18-18 44-18t44 18 18 44-18 44L568-480l180 180q18 18 18 44t-18 44-44 18-44-18z'/%3E%3C/svg%3E");
    cursor: pointer;
    filter: var(--modal-foreground-filter);
    height: 16px;
    width: 16px
}

.modal-button {
    background-color: rgb(var(--modal-foreground-rgb), .2);
    border-radius: 6px;
    color: rgb(var(--modal-foreground-rgb));
    cursor: pointer;
    display: inline-block;
    padding: 4px 8px;
    text-decoration: none
}

:not(#volume-controls)>.close-modal {
    position: absolute;
    right: 16px;
    top: 14px
}

.general-save-options {
    border-bottom: 2px solid rgb(var(--modal-foreground-rgb), .3);
    padding-bottom: 8px;
    text-align: center
}

#local-saves {
    border-collapse: collapse;
    color: inherit;
    display: block;
    height: calc(100% - 45px);
    min-height: 30px;
    overflow-y: auto
}

#local-saves td {
    border-bottom: 2px solid rgb(var(--modal-foreground-rgb), .15);
    height: 30px
}

#local-saves td:first-child {
    width: 100%;
    word-break: break-all
}

.save-option {
    cursor: pointer;
    display: inline-block;
    filter: var(--modal-foreground-filter);
    height: 24px;
    opacity: .4;
    vertical-align: middle;
    width: 24px
}

#local-saves>tr:hover .save-option {
    opacity: 1
}

#download-save {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 -960 960 960'%3E%3Cpath d='M480-337q-8 0-15-2.5t-13-8.5L308-492q-12-12-11.5-28t11.5-28q12-12 28.5-12.5T365-549l75 75v-286q0-17 11.5-28.5T480-800t28.5 11.5T520-760v286l75-75q12-12 28.5-11.5T652-548q11 12 11.5 28T652-492L508-348q-6 6-13 8.5t-15 2.5M240-160q-33 0-56.5-23.5T160-240v-80q0-17 11.5-28.5T200-360t28.5 11.5T240-320v80h480v-80q0-17 11.5-28.5T760-360t28.5 11.5T800-320v80q0 33-23.5 56.5T720-160z'/%3E%3C/svg%3E")
}

#replace-save {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 -1080 960 1200'%3E%3Cpath d='M440-367v127q0 17 11.5 28.5T480-200t28.5-11.5T520-240v-127l36 36q6 6 13.5 9t15 2.5T599-323t13-9q11-12 11.5-28T612-388L508-492q-6-6-13-8.5t-15-2.5-15 2.5-13 8.5L348-388q-12 12-11.5 28t12.5 28q12 11 28 11.5t28-11.5zM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h287q16 0 30.5 6t25.5 17l194 194q11 11 17 25.5t6 30.5v447q0 33-23.5 56.5T720-80zm280-560q0 17 11.5 28.5T560-600h160L520-800z'/%3E%3C/svg%3E")
}

#delete-save {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 -1020 960 1080'%3E%3Cpath d='M280-120q-33 0-56.5-23.5T200-200v-520q-17 0-28.5-11.5T160-760t11.5-28.5T200-800h160q0-17 11.5-28.5T400-840h160q17 0 28.5 11.5T600-800h160q17 0 28.5 11.5T800-760t-11.5 28.5T760-720v520q0 33-23.5 56.5T680-120zm120-160q17 0 28.5-11.5T440-320v-280q0-17-11.5-28.5T400-640t-28.5 11.5T360-600v280q0 17 11.5 28.5T400-280m160 0q17 0 28.5-11.5T600-320v-280q0-17-11.5-28.5T560-640t-28.5 11.5T520-600v280q0 17 11.5 28.5T560-280'/%3E%3C/svg%3E")
}

.replace-save {
    display: none
}

#video-modal .modal-area {
    box-sizing: border-box;
    height: 95%;
    width: 95%
}

#video-holder {
    box-sizing: border-box;
    height: 100%;
    padding: 36px 4px 6px
}

#video-holder video {
    background-color: #000;
    height: 100%;
    width: 100%
}

#volume-controls {
    align-items: center;
    display: flex;
    gap: 6px
}

#mute-checkbox {
    display: none
}

label[for=mute-checkbox] {
    cursor: pointer;
    filter: var(--modal-foreground-filter);
    height: 24px;
    line-height: 0;
    width: 24px
}

#volume-mute {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 -960 960 960'%3E%3Cpath d='m719.13-419.35-71.67 71.68Q634.78-335 617.13-335t-30.33-12.67q-12.67-12.68-12.67-30.33t12.67-30.33L658.48-480l-71.68-71.67q-12.67-12.68-12.67-30.33t12.67-30.33Q599.48-625 617.13-625t30.33 12.67l71.67 71.68 71.67-71.68Q803.48-625 821.13-625t30.33 12.67q12.67 12.68 12.67 30.33t-12.67 30.33L779.78-480l71.68 71.67q12.67 12.68 12.67 30.33t-12.67 30.33Q838.78-335 821.13-335t-30.33-12.67zM278-357.87H161.22q-17.66 0-30.33-12.67-12.67-12.68-12.67-30.33v-158.26q0-17.65 12.67-30.33 12.67-12.67 30.33-12.67H278l130.15-129.91q20.63-20.63 46.98-9.45 26.35 11.19 26.35 39.77v443.44q0 28.58-26.35 39.77-26.35 11.18-46.98-9.45z'/%3E%3C/svg%3E")
}

#volume-min {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='161 -960 960 960'%3E%3Cpath d='M438.65-357.87H321.87q-17.65 0-30.33-12.67-12.67-12.68-12.67-30.33v-158.26q0-17.65 12.67-30.33 12.68-12.67 30.33-12.67h116.78L568.8-732.04q20.63-20.63 46.98-9.45 26.35 11.19 26.35 39.77v443.44q0 28.58-26.35 39.77-26.35 11.18-46.98-9.45z'/%3E%3C/svg%3E")
}

#volume-mid {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='80 -960 960 960'%3E%3Cpath d='M357.98-357.87H241.2q-17.66 0-30.33-12.67-12.67-12.68-12.67-30.33v-158.26q0-17.65 12.67-30.33 12.67-12.67 30.33-12.67h116.78L487.65-731.8q20.63-20.64 47.1-9.57t26.47 39.65v443.44q0 28.58-26.47 39.65t-47.1-9.57zM741.8-480q0 42.48-20.47 80.09-20.48 37.61-54.94 60.82-10.22 5.98-20.19.25-9.98-5.73-9.98-17.44v-248.44q0-11.71 9.98-17.32 9.97-5.61 20.19.37 34.46 23.71 54.94 61.45Q741.8-522.48 741.8-480'/%3E%3C/svg%3E")
}

#volume-max {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='9 -960 960 960'%3E%3Cpath d='M754.22-480.5q0-78.52-41.88-143.9t-111.91-98.62q-14.47-6.74-20.47-20.96t-.53-28.93q5.74-15.72 20.34-22.46t29.58 0q92.48 42.46 147.97 127.05 55.48 84.6 55.48 187.82t-55.48 187.82q-55.49 84.59-147.97 127.05-14.98 6.74-29.58 0t-20.34-22.46q-5.47-14.71.53-28.93t20.47-20.96q70.03-33.24 111.91-98.62t41.88-143.9M286.98-357.87H170.2q-17.66 0-30.33-12.67-12.67-12.68-12.67-30.33v-158.26q0-17.65 12.67-30.33 12.67-12.67 30.33-12.67h116.78L416.65-731.8q20.63-20.64 47.1-9.57t26.47 39.65v443.44q0 28.58-26.47 39.65t-47.1-9.57zM670.8-480q0 42.48-20.47 80.09-20.48 37.61-54.94 60.82-10.22 5.98-20.19.25-9.98-5.73-9.98-17.44v-248.44q0-11.71 9.98-17.32 9.97-5.61 20.19.37 34.46 23.71 54.94 61.45Q670.8-522.48 670.8-480'/%3E%3C/svg%3E")
}

#volume-slider-text {
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 4.8ch
}

#hardware-acceleration-modal .modal-area {
    box-sizing: border-box;
    padding: 16px 48px;
    text-align: center;
    width: 95%
}

#acceleration-text {
    display: block;
    margin-bottom: 8px
}

#clipboard-modal h2 {
    margin-right: 36px;
    margin-top: 4px
}

#clipboard-modal p:last-child {
    margin-bottom: 2px
}

@media (prefers-color-scheme:light) {
    :host {
        --modal-background: #fafafa;
        --modal-foreground-rgb: 0, 0, 0;
        --modal-foreground-filter: none
    }
}

@media (prefers-color-scheme:dark) {
    :host {
        --modal-background: #282828;
        --modal-foreground-rgb: 221, 221, 221;
        --modal-foreground-filter: invert(90%)
    }
}