/*

https://znn3fvyqmpkqtarahiawca-on.drv.tw/%24web/
https://znn3fvyqmpkqtarahiawca-on.drv.tw/%24web/home.html

> Free Icons | Font Awesome
https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free

> Icons - Google Fonts
https://fonts.google.com/icons

*/

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap');
@font-face {
	font-family: "D14MB";
	src: url("https://znn3fvyqmpkqtarahiawca-on.drv.tw/%24web/fonts/DSEG14Modern-Bold.woff") format("woff");
}
@font-face {
	font-family: "JK-Maru-Gothic-M";
	src: url("fonts/JK-Maru-Gothic-M.otf") format("truetype");
}
@font-face {
	font-family: "Migu1M";
	src: url("fonts/migu-1m-regular.ttf") format("truetype");
}
@font-face {
	font-family: "PlemolJP35ConsoleNF-Text";
	src: url("fonts/PlemolJP35ConsoleNF-Text.ttf") format("truetype");
}





body {
  background: black;
  color: white;
//  height: 100vh;
  margin: 0 10vw;
  margin-top: 20vh;
  padding: 0 5vw;
  font: 13px "M PLUS Rounded 1c";
  overflow-y: hidden;
  list-style-type: none;
}

#clock {
  font: 10vw "JK丸ゴシック Medium","JK-Maru-Gothic-M" ;
  color: #00a99d;
  margin: 1vw 0;
  border: solid 1px #00977b;
  border-radius: 1vw;
  height: 15vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
#date {
  font: 3vw "M PLUS Rounded 1c" ;
  margin: 1vw 0;
  border: solid 1px #33caaf;
  border-radius: 1vw;
  height: 5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.5;
}

hr {
  margin: 3vw;
  border: dashed 1px #33caaf;
}

ul {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
li {
  display: inline-flex;
  align-items: center;
  align-content: center;
}

a {
  text-decoration: none;

  display: flex;
  justify-content: ;
  align-items: center;

  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: 200% auto;

  box-shadow: 0 3px 10px rgb(0 0 0 / 16%);
  transition: background-position ease 0.4s;
}
a:hover {
  background-position: 0 0;
}
a {
  background-image: linear-gradient(
    to right,
    #a48c61 0%,
    #a48c61 50%,
    lightgray 50%,
    lightgray 100%
  );
}
a.twitter {
  background-image: linear-gradient(
    to right,
    #a48c61 0%,
    #a48c61 50%,
    #00acee 50%,
    #00acee 100%
  );
}
a.youtube {
  background-image: linear-gradient(
    to right,
    #a48c61 0%,
    #a48c61 50%,
    red 50%,
    red 100%
  );
}

.slink {
  width: 100%;
  padding: 0.1vw;
  border: solid 1px #33caaf;
  border-radius: 0.5vw;
  text-align:center;
  display:flex;
  justify-content:center;
  align-items:center;
  opacity: 0.7;
}
ul.slink li a {
  font-size: 1vw;
  border: solid 1px #FFF;
  border-radius: 6px;
  margin: 0.1vw 0.1vw;
  padding-left: 10px;
  color: #000;
  width: calc(16.5vw - 2px);
  height: 2vw;
//  height: 1.8vh;
}
ul.slink li img ,
ul.slink li i {
  width: 1vw;
  height: 1vw;
  margin-right: 0.5vw;
  color: #FFF;
  -webkit-text-stroke: 1px #000;
}