@font-face 
{
  font-family : menlo_num ; 
  src : url(https://left-right-chancellor.github.io/f/Menlo-Regular.woff2) format(woff2) , url(https://left-right-chancellor.github.io/f/Menlo-Regular.otf) format(otf) ; 
  unicode-range : U+0030 - 003A ;
}
* 
{
  margin : 0 ; 
  padding : 0 ; 
  border : 0 ; 
  box-sizing : border-box ; 
}
::selection 
{
  background : #000a ; 
  color : #fc0 ; 
}
html , body 
{
  width : 100% ; 
  height : calc(100vh - 6rem) ; 
}
body 
{
  font-size : 1rem ; 
  font-family : menlo_num , "Noto Serif TC" , sans-serif , system-ui ; 
  margin-top : 6rem ; 
  display : flex ; 
  flex-direction : column ; 
}
main 
{
  margin : 1rem 3rem ; 
  font-weight : 500 ; 
  font-size : 1.15rem ; 
}
@media only screen and ( min-width : 900px ) 
{
  main 
  {
    margin : 1.5rem auto ; 
  }
}
@media only screen and (max-resolution :.9x)
{
  body
  {
    font-family : menlo_num , "Noto Sans TC" , sans-serif , system-ui ; 
  }
}
#now 
{
  text-align : center ; 
}
.day , .hr , .m , .s 
{
  display : inline-block ; 
}
footer 
{
  display : flex ; 
  flex-direction : column ; 
  align-items : center ; 
}
.footer-bottom 
{
  display : flex ; 
  justify-content : center ; 
  align-items : center ; 
}
.ex-links 
{
  position : relative ; 
  background : #000 ; 
  width : 32px ; 
  height : 32px ; 
  border-radius : 50% ; 
}
.ex-links:first-child svg , .ex-links:nth-child( 2 ) svg 
{
  position : absolute ; 
  top : 4px ; 
  left : 4px ; 
}
.ex-links:last-child svg , .ex-links:nth-child( 3 ) svg 
{
  position : absolute ; 
  top : 0 ; 
  left : 0 ; 
}
.ex-links:hover 
{
  background : #fff ; 
}
.ex-links:hover svg 
{
  fill : #000 ; 
}
.ex-links.yt:hover circle 
{
  fill : #000 ; 
  stroke : #fff ; 
}
.ex-links.yt:hover g path:first-child 
{
  fill : #fff ; 
}
.ex-links.yt:hover g path:last-child 
{
  fill : #000 ; 
}
.ex-links.gmail path 
{
  fill : #fff ; 
}
.ex-links.gmail:hover :first-child 
{
  fill : #4285f4 ; 
}
.ex-links.gmail:hover :nth-child( 2 ) 
{
  fill : #c5221f ; 
}
.ex-links.gmail:hover :nth-child( 3 )  
{
  fill : #ea4335 ; 
}
.ex-links.gmail:hover :nth-child( 4 ) 
{
  fill : #fbbc04 ; 
}
.ex-links.gmail:hover :last-child 
{
  fill : #34a853 ; 
}
a , a:visited 
{
  color : currentColor ; 
  text-decoration : none ; 
}
a:hover 
{
  text-decoration : none ; 
  color : #fc0 ; 
}
a:focus 
{
  text-decoration : underline ; 
  outline : 1px solid #000 ; 
}

header 
{
  color : #ddd ; 
  background : linear-gradient(#00009a 0% , 45% , #23c9c9 calc(5200% / 113) , calc(800% / 113) , #14952d calc(6000% / 113) , calc(11100% / 113) , #999 calc(11100% / 113) ) ; 
  width : 100% ; 
  position : fixed ; 
  top : 0 ; 
}
header nav 
{
  display : flex ; 
  align-items : center ; 
}
header nav a 
{
  line-height : 1 ; 
}
header nav a:not( :first-child ) 
{
  padding : .15rem .3rem ; 
}
header nav > :first-child > :first-child 
{
  margin : 1rem ; 
}
#home 
{
  width : 4rem ; 
  height : 4rem ; 
}
@media print 
{
  header 
  {
    display : none ; 
  }
}
@media only screen and ( min-width : 768px ) 
{
  header 
  {
    background : radial-gradient(circle at 50% 100% ,#00009a 0% , 45% , #23c9c9 calc(5200% / 113) , calc(800% / 113) , #14952d calc(6000% / 113) , calc(11100% / 113) , #999 calc(11100% / 113) ) ; 
  }
  header nav 
  {
    justify-content : center ; 
    flex-direction : column ; 
  }
  header nav > :nth-child( n ):not( :first-child ) 
  {
    margin-bottom : .25rem ; 
  }
  body 
  {
    margin-top : 10rem ; 
    height : calc(100vh - 10rem) ; 
  }
}