@import url('https://fonts.googleapis.com/css2?family=Charm&display=swap');
/* @import url('https://fonts.googleapis.com/css?family=Chonburi'); */
body {font-family:'Charm',cursive; font-size:20px; color:white; min-height:100%;
    background:linear-gradient(#0007,#0000),#123;} 
h2 {padding-left:10px; border:1px double white;}
table {margin:auto; border:0px solid #333;} td.t {text-align:left; vertical-align:top;}    
td.c {text-align:center;vertical-align:middle;} td.r {font-size:15px; text-align: right ; vertical-align:bottom;}    
td.b {border:1px white double;}
img {width:250px; height:250px; border:none; margin-left:auto; margin-right:auto; background-color:white; 
    border:2px solid black; border-radius:15px 50px 30px; padding:10px;
    box-shadow:3px 6px 5px 0px rgba(201,183,12,0.75);
    -webkit-box-shadow:3px 6px 5px 0px rgba(201,183,12,0.75);
    -moz-box-shadow:3px 6px 5px 0px rgba(201,183,12,0.75);}  
img.noborder {box-shadow:none; border:none; padding:0px; border-radius:0;}
img.small {height:20px; width:auto;}
img.lQuick {width:250px; border-radius:15px 50px 30px; padding:10px; display:block;}
.r {color:yellow;background-color:black;}
.bigfont {font-size:30px;font-weight:bolder;}
img:hover {animation:shake 0.5s; animation-iteration-count:infinite;}

div.mydaymoon {position:fixed; bottom:0; left:7px; font-family:'Charm',cursive; font-size:20px; color:white;}
div.myweb {position:fixed; bottom:7px; right:7px; font-family:'Charm',cursive; font-size:20px;}
div.myweb {color:white; line-height:15px; text-align:right;}
div.myweb {animation:shake 2.5s; animation-iteration-count:infinite;}
div.myweb2 {animation:shake 1.5s; animation-iteration-count:infinite;}
div.myads {position:fixed; right:7px; font-family:'Charm',cursive; font-size:20px; background-color:transparent; text-align:right;
    border: 2px double yellow; padding:7px; border-radius:10px; 
    padding-top:12px; padding-left:5px; padding-right:5px; padding-bottom:0px;}
div.myads {box-shadow: 10px 10px 5px -6px rgba(255,255,255,0.75);
    -webkit-box-shadow: 10px 10px 5px -6px rgba(255,255,255,0.75);
    -moz-box-shadow: 10px 10px 5px -6px rgba(255,255,255,0.75);}
div.mypic {position:fixed; bottom:0; left:0;}
div.myword {position:fixed; width:100%; text-align:center; vertical-align:auto;}
div.myclock {position:fixed; padding-bottom:5px; text-align:center; line-height:120%;} /* line-height:100%; */
div.pokdmess {position:fixed; bottom:35px; left:5px; color:black; background-color:white; 
    border:4px double black; display:none;}
table.myimg {height:250px;}
span.w {color:white;}
span.y {color:yellow;}
span.b {font-size:50px; text-align:center;}
a:link,a:visited,a:hover,a:active {color:white; text-decoration:none;}
@keyframes shake {
    0% {transform: translate(1px, 1px) rotate(0deg); }
    10% {transform: translate(-1px, -2px) rotate(-1deg); }
    20% {transform: translate(-3px, 0px) rotate(1deg); }
    30% {transform: translate(3px, 2px) rotate(0deg); }
    40% {transform: translate(1px, -1px) rotate(1deg); }
    50% {transform: translate(-1px, 2px) rotate(-1deg); }
    60% {transform: translate(-3px, 1px) rotate(0deg); }
    70% {transform: translate(3px, 1px) rotate(-1deg); }
    80% {transform: translate(-1px, -1px) rotate(1deg); }
    90% {transform: translate(1px, 2px) rotate(0deg); }
    100% {transform: translate(1px, -2px) rotate(-1deg); }
}
@media screen and (max-width:600px) { /* Mobile */
    div.myclock {top:30px; right:5px;} table {width:95%;} 
    div.myads {top:28px;} div.myword {top:485px;}
    h2 {font-size:50%;}
} 
@media screen and (min-width:601px) { /* PC */
    div.myclock {top:5px; left:5px;} table {width:320px;} 
    div.myads {top:0;} div.myword {top:520px;}
}