/* 		CLOCK STYLE */
		
		@import url('https://fonts.googleapis.com/css2?family=Pirata+One&display=swap');

:root {
   --dark-red:#7b0700;
   --main-font:"Pirata One", cursive;
}



/* Clock */

#clock, #clock * {
   color:var(--dark-red);
   box-sizing:border-box;
   font-family:"Times New Roman";
   font-family:var(--main-font);
}

#clock {
   display:flex;
   position:relative;
   margin:0px;
   border:0px;
   padding:0px;
   background-color:transparent;
   background-image:url('https://i.imgur.com/5wIL4AP.png');
/* background-image:url('pix/Dubbeldam_wapen.svg'); */
   background-size:100%;
   background-repeat:no-repeat;
   flex-direction:column;
   justify-content:center;
   align-items:center;
   overflow:hidden;
}

@media only screen and (orientation: portrait) { #clock { width:90vw; height:90vw; } }
@media only screen and (orientation: landscape) { #clock { width:90vh; height:90vh; } }

#clock .hand_wrap {
   display:flex;
   width:100%;
   height:100%;
   margin:0px;
   border:0px;
   padding:0px;
   background-color:transparent;
   flex-direction:column;
   justify-content:center;
   align-items:center;
   overflow:hidden;
   z-index:0;
}

#clock .hand {
   display:flex;
   width:100%;
   height:100%;
   margin:0px;
   border:0px;
   padding:0px;
   background-color:transparent;
   background-size:100%;
   background-repeat:no-repeat;
   transform:rotate(0deg);
   -webkit-transform:rotate(0deg);
   -moz-transform:rotate(0deg);
   transform-origin:center center;
   -webkit-transform-origin:center center;
   -moz-transform-origin:center center;
}

#clock .hand.short { background-image:url('https://i.imgur.com/hDzKEGh.png'); z-index:1; }
#clock .hand.long { background-image:url('https://i.imgur.com/Ipje0VB.png'); z-index:3; margin-top:-100%; }

#clock .shadow {
   display:flex;
   position:relative;
   width:100%;
   height:100%;
   margin:-100% 0px 0px 0px;
   border:0px;
   padding:0px;
   background-color:transparent;
   background-size:100%;
   background-repeat:no-repeat;
   transform:rotate(0deg);
   -webkit-transform:rotate(0deg);
   -moz-transform:rotate(0deg);
   transform-origin:center center;
   -webkit-transform-origin:center center;
   -moz-transform-origin:center center;
   transition:transform 1s linear;
   -webkit-transition:transform 1s linear;
   -moz-transition:transform 1s linear;
}

#clock .shadow.short { background-image:url('https://i.imgur.com/hDzKEGh.png'); z-index:0; }
#clock .shadow.long { background-image:url('https://i.imgur.com/Ipje0VB.png'); z-index:2; }

/* Title & Creator Section */

#clock .head {
   display:flex;
   position:relative;
   width:50%;
   height:3.5%;
   line-height:auto;
   margin:0px;
   border:0px;
   padding:0px;
   background-color:transparent;
   flex-wrap:nowrap;
   flex-direction:row;
   justify-content:center;
   align-items:center;
   overflow:hidden;
   z-index:1;
}

#clock .head.title { bottom:-3.7%; margin-bottom:-3.5%; }
#clock .head.creator { top:-3.5%; margin-top:-3.5%; }
@media only screen and (orientation: portrait) { #clock .head.title { font-size:3.2vw; } #clock .head.creator { font-size:2.5vw; } }
@media only screen and (orientation: landscape) { #clock .head.title { font-size:3vh; } #clock .head.creator { font-size:2.5vh; } }

#clock .head span {
   margin:0px;
   border:0px;
   padding:0px;
   text-decoration:none;
   cursor:default;
}

#clock .head a {
   display:flex;
   width:auto;
   height:100%;
   margin:0px 0px 0px 5%;
   border:0px;
   padding:0px;
   justify-content:center;
   align-items:center;
}

#clock .head img {
   width:auto;
   height:100%;
   margin:0px;
   border:0px;
   padding:0px;
}