@charset "UTF-8";
html {font-size:16px;}
body {
    padding:0;
    margin:0;
    font-family:TrebuchetMS,Arial,sans-serif;
    overflow:hidden;
}
a:link, a:visited {color:#090;}
a:hover {color:#0c0;}
.nightmode {
    background: #121212 linear-gradient(to bottom left, #121212 10%,#333955 100%);
    color:#fff;
    text-shadow:1px 1px 1px black;
}
.daymode {
    background:#87ceeb linear-gradient(to bottom left, #87ceeb 0%,#ccc 100%);
    color:#333;
    text-shadow:2px 2px 4px white;
}

#container {
    margin:0 auto;
    padding:0;
    width:100vw;
    height:100vh;
    text-align:center;
    overflow:hidden;
}
#clocklayer {position:absolute;left:0;top:0;width:100%;height:100%;overflow:auto;
    background:transparent;color:inherit;}

.clocktext {
    display:block;
    margin:0;
    padding:1px 0 0 0;
    width:100%;
    text-align:center;
    line-height:1.0;
    white-space:nowrap;
}
#date {
    font-size:1.3rem;
    padding-top:15px;
}
#time {
    font-size:5rem;
    margin:1px 0 0 0;
}
#time span {
    display:inline-block;
    padding:0;
    vertical-align: baseline;
    text-align:left;
    width: 2em;
    margin:0 0 0 0.5em;
    font-size:1.5rem;
    line-height:1.5;
    white-space:normal;
}
.infotext {
    margin:0;
    padding:0 5px 0 5px;
    font-size:1.3rem;
    line-height:1.4;
    width:auto;
}
#weather {display:block;width:auto;}
#weatherdetails {margin:50px 0 20px 0;}

#gpsbutton, #refreshbutton {
    -webkit-appearance: none;
    -moz-appearance: none;
    display:block;
    margin:0 auto;
    padding:0 16px 0 16px;
    width:auto;
    height:40px;
    border:2px outset #fff;
    border-radius:12px;
    background:#dedeff;
    color:black;
    font-size:20px;
    cursor:pointer;
}
#gpsbutton:hover, #refreshbutton:hover {
    background:#000033;
    border:2px inset #fff;
    color:#fff;
}
#refreshbutton {display:none;margin-bottom:20px;}
#icon {display:inline-block;opacity:0;background-color:transparent;width:50px;height:50px;background-size:100% 100%;overflow:hidden;vertical-align:middle;margin:0 10px 0 10px;}

@media (min-width: 480px){
    #date {font-size:2rem;}
    #time {font-size:8rem;}
    #time span {
        font-size:2rem;
        line-height: 2;
    }
    .infotext {
        font-size:1.8rem;
    }
    #weather {display:inline-block;}
}
@media (min-width: 1000px){
    #date {font-size:4rem;}
    #time {font-size:16rem;}
    #time span {
        font-size:4rem;
        line-height: 2;
    }
    .infotext {
        font-size:3.6rem;
    }
    #weather {display:inline-block;}
    #icon {display:inline-block;width:100px;height:100px;}
}


/*
Animated cloud code adapted from Mark Bowley's CodePen at https://codepen.io/Mark_Bowley/pen/xEbuI
*/
#cloudlayer, #rainlayer, #snowlayer, #sunlayer, #clearnightlayer, #mistlayer {position:absolute;left:0;top:0;width:100%;height:100%;opacity:0.75;pointer-events:none;overflow:hidden;display:none;background-color:transparent;}
#clearnightlayer {background-color:transparent;background-image:url("fx/blacknightstars.jpg");background-size:700px 500px;}
#rainlayer {overflow:visible;background-color:transparent;background-image:url("fx/raindrops.jpg");background-size:100% 100%;}
#mistlayer {overflow:visible;background-color:transparent;background-image:url("fx/mist.png");}
#snowlayer {background-color:transparent;background-image:url("fx/snow.png");}
.snowimage {animation: animateRain 10s linear infinite;position:relative;opacity:1;width:100%;height:auto;}
#sunlayer {background: #ffff00 linear-gradient(45deg, #ffffff 0%,#87ceeb 66%,#ffff33 95%, #ffff00 100%);background-size:100% 100%;}
/* KEYFRAMES */
@keyframes animateCloud { 0% {margin-left: -500px; } 100% {margin-left: 100%;}}

/* ANIMATIONS */

.x1 {animation: animateCloud 65s linear infinite;}
.x2 {animation: animateCloud 50s linear infinite;}

/* OBJECTS */

.cloud {position: relative;top:30px;}

.x1 .cloud {
    width: 250px;
    height:162px;
    background-image:url("fx/clouds.png");background-size:100% 100%;
}
.x2 .cloud {
    width: 350px;
    height:227px;
    background-image:url("fx/cloudsflip.png");background-size:100% 100%;
}