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 }

.text-center { text-align:center }

.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 { font-size:70px; margin-bottom:10px; animation:icon-anim 3s infinite }
@keyframes icon-anim {
  from { transform:rotate(0deg) }
  to { transform:rotate(360deg) }
}

#bookLink {position: fixed;right: -160px;width: 180px;height:auto;background: #505050cc;border-radius: 10px 0 0 10px;top: 60px;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: #fff; text-shadow: 0 0 5px #000; 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 }
}



#canvas-wrap, #bg-options .bg { background-position:center; background-size:cover }

#toolbar {position: fixed;left:0;top: 0;width: 100%;height: 50px;z-index: 501;overflow: hidden auto;transition:opacity .3s;background:#eee; }
#toolbar > div {display: flex;align-items: center;justify-content: center;width: auto;min-width: 58px;padding: 0 10px;height: 100%;float:left;color:#333;font-size: 30px;font-weight: bold;cursor: pointer;border-right: 2px solid #ddd; transition:box-shadow .1s }
#toolbar > div:hover { background:#fff; }
#toolbar > div:active i { transform: scale(.9) }
#toolbar > div * { pointer-events: none }
#toolbar > div.selected { box-shadow:inset 0 0 8px #00000080 }


#toolbar > div span { display: inline-block; font-size: 23px; user-select: none }
#toolbar > div.disabled { pointer-events: none; opacity: .5; cursor: default !important }

#toolbar .start { background:#1da868; color:#fff; transition:opacity .3s ease }
#toolbar .start:hover { background:#44c68a; }

#toolbar .time { float: right; border: none; }
#toolbar .time:hover { background:#eee; cursor: default }
#toolbar .time span { width: 116px; padding:0 !important }
#toolbar .time * { transition:.2s }
#toolbar .time.reset i { transform:scale(1.25); color:#1da868 }
#toolbar .time.reset span { transform:scale(1.1); color:#1da868 }
#toolbar .time .hidden { display:none !important }

#toolbar .toggle-pieces i { font-size: 34px; }

#toolbar .create-puzzle i { font-size:27px; margin:8px 0 0 -3px }
#toolbar .create-puzzle i:after { content:"\f055"; position:absolute; font-size:20px; margin:-9px 0 0 -11px; background:#eee; border-radius:50%; padding:1px }
#toolbar .create-puzzle:hover i:after { background:#fff }


.fathom-modal .fathom-modal-body h1 { font-size:26px; color:#333; opacity: 1; padding:0; max-width:none; }
@media screen and (max-height: 525px) {
    .fathom-modal { z-index: 1000 !important }
}

#optionsModal * { user-select: none }
#optionsModal h1 { display: inline-block; width: auto; }
#optionsModal hr { margin:25px 0; border:0; border-top:2px solid #ddd; height:0; }

#pieceSlider { margin: 20px auto; max-width: 480px }
#pieceSlider .noUi-connect { transition: background-color .3s ease }
#pieceSliderText { display:inline-flex;align-items:center; justify-content:center; width: 90px;height: 50px;border: 1px solid #efefef; border-radius: 10px; font-size: 24px; font-weight: normal; font-family: europa, sans-serif; color: #333; margin-left:10px }
#pieceSliderText #pieceVal { display: inline-block; font-weight:bold; width:40px; }
#pieceSliderText i { color:#aaa }

#diff-options { margin:30px 0 20px 0; cursor: default; user-select: none }
#diff-options div { text-shadow:0 0 10px #00000040; display: inline-block; width: auto; min-width: 150px;margin: 0 6px;padding: 6px 0; font-size: 26px; font-weight: bold; text-align:center; background:#aaa; color: #fff; border-radius: 10px; cursor: pointer; transition:background-color .3s ease; }
#diff-options div:hover { opacity: .9 }
#diff-options div:active { transform:scale(.92) }
#diff-options .easy.selected { background:#1da868 }
#diff-options .medium.selected { background:#f6a53a }
#diff-options .hard.selected { background:#f64646 }

#bg-options { margin:20px 30px 0 30px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap }
#bg-options div { width:50px; height:50px; min-width:50px; margin:0 10px 10px 10px; flex:1; background:linear-gradient(45deg, #eee, transparent); box-shadow:0 0 0 2px #ddd; border-radius:6px; cursor: pointer }
#bg-options div:hover { opacity: .75 }
#bg-options div:active { transform:scale(.92) }
#bg-options div.selected { box-shadow:0 0 0 2px #ddd, 0 0 0 5px #333 }
#bg-options div.selected:after { content:"\f00c"; color:#fff; text-shadow:0 0 10px #00000040; opacity:1; font-size:26px; font-family:'FontAwesome'; display:flex; align-items:center; justify-content:center; width:100%; height:100%}

#fun-sounds { display:flex; align-items:center; justify-content:center }
#fun-sounds .toggle { position:relative; display:inline-block; background:#f64646; padding:3px; height:40px; width:77px; margin-left:20px; border-radius:99px; cursor:pointer; overflow:hidden; box-sizing:border-box; transition:background .3s ease;}
#fun-sounds .toggle:hover { opacity:.9 }
#fun-sounds .toggle:active { transform:scale(.92) }
#fun-sounds .toggle.toggle-on { background:#1da868 }
#fun-sounds .toggle.toggle-on .toggle-switch { left:40px }
#fun-sounds .toggle-text { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:space-around; font-weight:bold; font-size:16px; color:#fff;}
#fun-sounds .toggle-switch { width:34px; height:34px; background:white; border-radius:50%; box-shadow:0 0 20px #00000040; position:absolute; top:3px; left:3px; z-index:1; transition:left .3s ease }

#previewModal { position:fixed; left:0; bottom:0; width:auto; height:30vh; max-height:400px; z-index:100; box-shadow: 0 0 12px 4px #00000040; pointer-events: none }
#previewModal .fathom-modal-close { pointer-events: auto }
#previewModal img { width:auto; height:100%; -webkit-user-drag:none }


#create-puzzle form { margin:0 }
#create-puzzle input { font-size: 20px; font-family: 'europa', sans-serif; margin: 0; padding:20px; border: 1px solid #ddd; border-radius: 10px; width: 100%; box-sizing: border-box; cursor: pointer }
#create-puzzle #image-error { font-weight: bold; margin:34px 0 20px 0; color: #f64646; opacity: 0; transition:opacity .3s }
#create-puzzle #dnd { font-weight: bold; user-select: none; color:#00000080; margin:20px 0 46px 0 }
@media (pointer: coarse) {
    #create-puzzle input { margin-bottom:20px }
    #create-puzzle #dnd { display: none !important }
}


#congrats { position:fixed; top:0; left:0; width:100%; height:100%; z-index:1000; display:flex; align-items:center; justify-content:center; color:white; background:#000000cc; line-height:1; user-select:none; -webkit-animation-name: fadein; -webkit-animation-duration: 0.5s; animation-name: fadein; animation-duration: 0.5s; }
#congrats-text > div:nth-of-type(1) { font-size:calc((7vw + 7vh)/2); text-transform:uppercase; font-weight:bold; margin:5vh 0 10vh 0; }
#congrats-text > div:nth-of-type(2) { font-size:calc((3vw + 3vh)/2); color:#ffffffcc; margin-bottom:2vh }
#congrats-time { font-size:calc((5vw + 5vh)/2); font-weight:bold;  background:#ffffff20; color:#fff; width:max-content; margin:auto; padding:.1em .2em; line-height:1; border-radius:10px; }
#congrats-score { font-size:calc((3vw + 3vh)/2); color:#ffffffcc; margin-top:2vh }

#congrats-buttons { margin-top:15vh}
#congrats-buttons div { display:inline-block; width:250px; margin:auto; font-size:26px; background:#ffffff20; margin:10px; padding:10px; border-radius:10px;  }
#congrats-buttons div:hover { background:#ffffff40; cursor:pointer }
#congrats-buttons div:active { transform:scale(.92) }
/* congrats anim */
@-webkit-keyframes fadein {
  from {opacity:0} 
  to {opacity:1}
}
@keyframes fadein {
  from {opacity:0}
  to {opacity:1}
}

@media screen and (max-width: 900px) {
    #toolbar .fullscreen { display:none }
    #toolbar .create-puzzle { display:none }
    #toolbar .toggle-pieces { display:none }
    #toolbar .shadow { display:none }
    #toolbar .preview { display:none }
}
@media screen and (max-width: 669px) {
    #optionsModal #diff-options { margin:10px 0 }
    #optionsModal #diff-options .medium { margin-top:15px }
    #optionsModal #diff-options .hard { margin-top:15px }
    
    #congrats-text > div:nth-of-type(1) { margin-top:0 }
    #congrats-text > div:nth-of-type(2) { font-size:26px }
    #congrats-text > div:nth-of-type(3) { font-size:40px;padding:10px; }
}
@media screen and (max-width: 450px) {
    #toolbar > div { min-width: 30px }
    #toolbar .start span { padding:0 !important }
    #toolbar .start i,
    #toolbar .time i { display:none }
}