@media only screen and (min-width:640px) and (-webkit-min-device-pixel-ratio:1){
    #slider #well{
        min-width:500px;
        max-width:500px
    }
}
html{
    width:100%;
    height:100%;
    margin:0;
    padding:0
}
body{
    width:100%;
    height:100%;
    padding:0;
    font-family:Helvetica,sans-serif;
    color:white;
    font-weight:200;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    margin:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    -webkit-user-select:none;
    background-color: #333;
}
body.wait{
    background:#333
}
header{
    background:linear-gradient(to bottom,rgba(105,104,104,0.6),rgba(35,35,35,0.6) 50%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.6));
    border-bottom:1px solid #4646467a;
    outline:1px solid #000000cf;
    display:block;
    text-align:center
}
.time{
    font-size:4em;
    margin-bottom:0;
    margin-top:5px
}
.date{
    margin-top:0;
    margin-bottom:5px;
    font-weight:300;
    font-size:1.05em;
    position:relative;
    top:-5px
}
span.colon::after{
    font-size:.9em;
    top:-0.1em;
    bottom:15px;
    content:":";
    position:relative
}
#main{
    display:flex;
    justify-content:center;
    z-index:-1
}
#logo{
    animation:tf-zoombob 2s linear infinite;
    width:65vmin;
    height:65vmin
}
#notice{
    display:none
}
body.wait #notice{
    display:block;
    font-size:30pt;
    font-weight:bold;
    text-align:center
}
#slider{
    background:linear-gradient(to bottom,rgba(56,56,56,0.48),rgba(21,21,21,0.78) 50%,rgba(0,0,0,0.77) 50%,rgba(0,0,0,0.7));
    border-top:1px solid #ffffff47;
    outline:1px solid #000000cf;
    display:flex;
    flex-direction:row;
    justify-content:center;
    min-height:54px;
    padding:20px
}
#slider #well{
    background:linear-gradient(to bottom,#000,#222222b0);
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    border:1px solid #3f3f3f;
    min-height:50px;
    width:100%;
    padding:0 3px
}
#slider #thumbtack{
    z-index:5;
    background:linear-gradient(to bottom,#fefefe,#dddddd 50%,#d2d2d2 50%,#a2a2a2);
    color:black;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:68px;
    min-height:44px;
    border-radius:12px;
    position:relative
}
#hint{
    display:block;
    text-align:center;
    width:100%
}
#hint>span{
    display:inline-block;
    font-size:1.5em;
    font-weight:400;
    background:linear-gradient(to right,#4d4d4d,#4d4d4d 40%,#ffffff 50%,#4d4d4d 60%,#4d4d4d);
    background-size:200%;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:slidetounlock 2.5s infinite linear
}
@keyframes slidetounlock{
    0%{
        background-position:140% center
    }
    to{
        background-position:-40% center
    }
}
@keyframes tf-rotate{
    0%{
        transform:rotate(0deg)
    }
    to{
        transform:rotate(360deg)
    }
}
@keyframes tf-zoombob{
    0%{
        transform:rotate(0deg) scale(1)
    }
    50%{
        transform:rotate(360deg) scale(1.5)
    }
    to{
        transform:rotate(720deg) scale(1)
    }
}
@keyframes tf-softbob{
    0%{
        transform:rotate(0deg)
    }
    25%{
        transform:rotate(15deg)
    }
    75%{
        transform:rotate(-15deg)
    }
    to{
        transform:rotate(0deg)
    }
}
@keyframes bg-crazycolors{
    0%{
        background-color:#e91e63
    }
    25%{
        background-color:#03a9f4
    }
    50%{
        background-color:#4caf50
    }
    75%{
        background-color:#673ab7
    }
    to{
        background-color:#e91e63
    }
}
@keyframes tf-fadein{
    0%{
        transform:translate(100vw);
        opacity:0
    }
    to{
        transform:translate(0vw);
        opacity:100
    }
}
@keyframes tf-fadeout{
    0%{
        transform:translate(0vw);
        opacity:100
    }
    to{
        transform:translate(-100vw);
        opacity:0
    }
}
@keyframes bob{
    0%{
        transform:translateY(-10px)
    }
    50%{
        transform:translateY(10px)
    }
    to{
        transform:translateY(-10px)
    }
}
body.incompatible{
    display:flex;
    justify-content:center;
    align-items:center;
    font-family:Helvetica,sans-serif;
    color:#95d0c6;
    background-color:#0c3b3e
}
.center{
    display:flex;
    flex-direction:column;
    text-align:center;
    animation:bob 5s ease-in-out infinite
}