body{ margin:0; font-family: 'europa','helvetica', sans-serif; overflow:hidden auto }

h1.main-header { text-align:center; font-family:'futura-pt-bold', sans-serif !important; margin:0 !important; text-transform: none !important; font-size: 60px; line-height: 1; padding: 140px 0 0 0; margin:auto; width:100%; color:#fff; text-shadow:4px 8px 20px #00000080 }
.mobileapp h1 { padding: 40px 0 0 0 }

.button-light,
.button-dark,
.button-outline {display: inline-block;position: relative;vertical-align: top;border-radius: 10px;padding: 9px 12px;font-weight: bold;transition:none;font-size: 18px;line-height: 1;}

.button-light { background: #ffffff40; color:#fff; cursor: pointer }
.button-light:hover { background: #ffffff60; color:#fff !important; text-decoration: none}
.button-dark { background: #00000040; color:#fff; cursor: pointer }
.button-dark:hover { background: #40404040; color:#fff !important; text-decoration: none}
.button-outline { background: none; color:#fff !important; border:1px solid #fff;padding:8px 12px; cursor: pointer }
.button-outline:hover { background: #fff; color:var(--sky); text-decoration: none}

.button-light:active,
.button-dark:active,
.button-outline:active { transform: scale(.95) }

#sort-order { position: absolute; top: 152px; left: 40px; width: auto; z-index: 1; border-radius:10px; overflow:hidden }
.mobileapp #sort-order { top:52px }
#sort-order a { display:block; text-decoration: none; border-radius:0 !important }
#sort-order #select-order { height:0px; opacity:0; transition:opacity .3s ease, height .3s ease; }
#sort-order #select-order.extend { height:108px; opacity:1 }
#sort-order #select-order a { background:#000000aa; backdrop-filter:blur(4px); }
#sort-order #select-order a:hover { background:#000000cc }
#sort-order #select-order a:active { transform:none }
@media screen and (max-width: 1100px) {
    #sort-order { top:100px; left:0; border-radius:0 0 10px 0 !important }
    .mobileapp #sort-order { top:0 }
}

#imgContainer { width:100%; padding:20px; text-align:center; box-sizing:border-box; }
#imgContainer .image { display:inline-block; position: relative; height:320px; width:auto; margin:20px }
#imgContainer .image a { display: inline-block; vertical-align: top; }
#imgContainer .image img { height:100%; width:auto; max-width: 100%; object-fit: contain; border-radius:10px }
#imgContainer .image img:hover { box-shadow: 0 0 0 5px #ffffff80; }
#imgContainer .image img:active { transform:scale(.95); }
#imgContainer .image:hover .credits { opacity:.5 }
#imgContainer .image:active .credits { display:none }
#imgContainer * { user-select: none; -webkit-user-drag:none }
/* firefox fix */
@-moz-document url-prefix() { #imgContainer .image a { display: initial } }

#loading, #errorText { position: fixed; top:0; left:0; height:100%; width:100%; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size:35px; background:#000000ab; color:#fff; z-index: 999; }
#errorText { background:none; z-index: -1 }
#loading i { color:#ffb2b2; font-size:70px; margin-bottom:10px; animation:icon-anim 3s linear infinite }
@keyframes icon-anim {
  from { filter:hue-rotate(0deg) }
  to { filter:hue-rotate(360deg) }
}

#bookLink {position: fixed;right: -160px;width: 180px;height:auto;background: #505050cc;border-radius: 10px 0 0 10px;top: 30px;color: #fff;line-height: 1;padding: 10px;font-size: 20px;font-weight: normal;box-shadow: 0 2px 100px 10px rgba(255,255,255,0.5), 0 2px 4px 1px rgba(0,0,0,0.5);user-select: none;cursor: pointer;transition:.3s ease;border: 2px solid #ffffff60;z-index: 100;box-sizing: content-box;text-align:left }
#bookLink:hover {background:#333333cc;margin-right:150px; }

#credits { position: fixed; bottom: 0; right: 0; width: auto; padding: 0 10px 8px 0; font-size: 20px; color: #fff; text-shadow:0 0 10px #000; z-index: 100; opacity: .25; text-align: left; line-height:1.15; pointer-events: none; user-select: none }
.credits { display:block; position:absolute; bottom:0; left:0; width:auto; max-width:100%; opacity:0; padding: 10px; font-size: 16px; color: #333; text-shadow: 0 0 5px #fff; text-align: left; line-height: 1.15; border-radius: 0 0 10px 10px; box-sizing:border-box; pointer-events: none; transition:opacity .3s }

#exitModal .exit-text { margin:40px 0 20px 0 }
#exitModal .exit-buttons { text-align: left }
#exitModal .button { min-width: 80px }

/* resize main images */
@media screen and (max-width: 1250px) {
    #imgContainer .image { height:160px; }
    .credits { font-size:12px }
}
@media screen and (max-width: 700px) {
    #imgContainer .image { width:calc(100% - 40px); height:auto; }
    #imgContainer .image a,
    #imgContainer .image img { width:100%; height:auto; }
    .credits { font-size:16px }
}



.fathom-modal .fathom-modal-body h1 { font-size:26px; color:#333; opacity: 1; padding:0; max-width:none; }

#container { position: fixed; top:0; right:0; width:100%; height:100%; }
#svgContainer { position: fixed; top:0; right:0; width:calc(100% - 60px); height:100%; overflow:hidden; display: flex; align-items: center; justify-content: center; transition: transform .3s; }
#svgContainer * { transition: .3s; cursor: pointer }
#svgContainer svg { max-width:100%; max-height:100%; background:none; cursor: default }
#svgContainer svg.width-100 { height:auto; width:100%; }
#svgContainer svg.height-100 { height:100%; width:auto; }
#svgContainer svg.stretch { height:100% !important; width:100% !important; }


#toolbar { position: fixed; left:0; top:0; width:58px; height:100%; z-index: 1; overflow: hidden auto; transition:opacity .3s; background:#eee; }
#toolbar > div { display: flex; align-items: center; justify-content: center; width:100%; height:58px; float:left; color:#333; font-size: 30px; cursor: pointer; border-bottom: 2px solid #ddd }
#toolbar > div:hover { background:#fff; }
#toolbar > div:active i { transform: scale(.9) }

#toolbar .activeColor:after,
#toolbar #addColor:after { content:"\f00c"; font-family:'FontAwesome'; font-size:20px; color:white; display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; text-shadow:0 0 4px #000000cc; opacity:.5 }
#toolbar #addColor:after { content:"\f067"; }
#toolbar #addColor.can-add:after { color:#00000040; opacity: 1; text-shadow: none }
#toolbar #addColor { background:none; }

#toolbar #basicColors, #toolbar #customColors { flex-wrap: wrap; padding:5px 0; height:auto; cursor: default }
#toolbar #basicColors:hover, #toolbar #customColors:hover { background:#eee }
#toolbar #basicColors div, #toolbar #customColors div { width:40px; height:40px; border-radius: 50%; margin:5px 0; box-shadow:0 0 10px #00000040; cursor: pointer; }
#toolbar #basicColors div:active, #toolbar #customColors div:active { transform:scale(.9) }
#toolbar #customColors { border-bottom:0 }
#toolbar #customColors #addedColors div { margin:10px 0 }
#toolbar #customColors #addedColors div:first-child { margin-top:5px }
#toolbar #customColors #addedColors div:last-child { margin-bottom:40px }


#toolbar { scrollbar-width: thin; }
#toolbar::-webkit-scrollbar { width:8px; }
#toolbar::-webkit-scrollbar-track { background: #bbb; background-image: linear-gradient(to bottom, #40B0E1cc, #0E2E41cc) }
#toolbar::-webkit-scrollbar-thumb { background: #ffffffcc; box-shadow:inset 0 0 10px #00000040; }
#toolbar::-webkit-scrollbar-thumb:hover { background: #fffffffa; }

#scrollGradient { display: none; position: fixed; left: 0; bottom: 0; width: 58px; height: 60px; background-image: linear-gradient(to bottom, transparent, transparent 25%, #eeeeeecc); z-index: 2; pointer-events: none; }


#addColorModal { position: fixed; bottom:2px; left: 58px; padding:20px; background:#eee; text-align:center; border-radius: 20px; z-index: 2; box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%) }
#addColorModal #button-group { margin-bottom:20px }
#addColorModal #button-group div { display: inline-block; width: 146px; border-radius: 20px; padding: 10px; font-size: 20px; font-weight: bold; color: #333; box-shadow: 0 0 10px #00000040; cursor: pointer; user-select: none }
#addColorModal #button-group div:hover { background:#fff }
#addColorModal #button-group div:active { transform:scale(.9) }
#addColorModal #button-add { margin-right: 20px; }
.IroWheel, .IroSlider { cursor: pointer }

.color.red    { background:#ff0000 }
.color.orange { background:#ffa500 }
.color.yellow { background:#ffff00 }
.color.green  { background:#008000 }
.color.blue   { background:#0000ff }
.color.purple { background:#800080 }
.color.pink   { background:#ff69b4 }
.color.brown  { background:#781f1f }
.color.black  { background:#000000 }
.color.white  { background:#ffffff }

@media print {
    .no-print, .no-print * { display: none !important }
    #svgContainer { width:100% }
}