@import url('https://fonts.googleapis.com/css2?family=Item&display=swap');

body {background-color:azure;}
h2 {font-family:"Item",cursive;}
div.fix {border:0px; position:fixed; font-size:20pt; text-align:left;  color: red; background-color: yellow; 
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);} 
span.r {color:red; background-color:yellow;}
span.bw {color:blue; background-color:white;}
span.by {color:blue; background-color:yellow;}
span.b {font-size:larger; font-style:unset; box-shadow:10px 10px 5px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow:10px 10px 5px 0px rgba(0,0,0,0.75);-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);}
img.big:hover {transform:scale(5);}
img.fullscreen:hover {transform:scale(2.2); position:fixed; top:0px; left:0px;}
img.shaked:hover {animation:shake 0.5s; animation-iteration-count:infinite;}
img.small {height:40px; width:auto;} 
img.mobile {height:20px; width:20px;} 
hr {border:2px double black;}

table,th,td {border:1px solid black; border-collapse:collapse;}     
td {padding-left:10px; padding-right:10px;}
td.r {text-align:right; padding-right:0px; padding-left:0px;}         
td.rp {text-align:right; padding-right:5px;}         
td.l {text-align:left;}
td.c {text-align:center;}
td.bw {background-color:white;}
td.n {border:0;}
a:link {color:blue;text-decoration:none;}
a:visited {color:blue;text-decoration:none;} 
a:hover {color:red;text-decoration:none;} 
a:active {color:red;text-decoration:none;} 

.bshadow {background-color:yellow; display:inline; padding:5px; box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow:10px 10px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); }
.bshadow:hover {color:black; background-color:white; box-shadow:10px 10px 5px 0px rgba(0,0,0,0);
    -webkit-box-shadow:10px 10px 5px 0px rgba(0,0,0,0); -moz-box-shadow:10px 10px 5px 0px rgba(0,0,0,0); }
.fontshake:hover {animation:shake 0.8s;}

@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:601px) {
    table.tbmobile {display:none;} 
}


@media screen and (max-width:1000px) {  /* For Mobile */
    .colA {padding-left:2px; list-style-type:"➽";}  /* 🔔 */
    .colB {padding-left:10px; list-style-type:"➪";}  /* */
    .colC {padding-left:20px; list-style-type:square;} 
    .colD {padding-left:2px; list-style-type:"➤";} /* 🍀 */
    .colE {padding-left:2px; list-style-type:"🔥";}  /* 🔔 */
    .colAA {padding-left:2px; list-style-type:"≣";}  /* 🔥 */
    .colDD {padding-left:2px; list-style-type:"➧";} /* 🌿 */
    .imgA {width:200px; height:auto;}
    .imgB {width:300px; height:auto;}
    div.fix {top:50px; left:10px;}
    div.pageside {margin-left:0px;}
    td.tdmobile {display:none;}
}  

@media screen and (min-width:1001px) { /* For PC */
    div.fix {top:0px; left:115px;}
    div.pageside {margin-left:110px;}
    /* img.mobile:hover {transform:scale(30); position:fixed; top:50%; right:20%;} */
    div.pcshow {position:fixed; top:50px; right:20px; width:500px; height:615px; 
        background-color:rgba(255,255,255,0.8); border:1px solid black; padding:10px; 
        box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); }
    div.pcshow img.mIMG {width:100%; height:80%; border:1px solid black; border-radius:10%; padding:5px; 
        box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); }    
    div.pcshow span.mBrand {font-size:12pt; font-weight:bold; color:blue; padding-left:10px;}
    div.pcshow span.mDetail {padding-left:10px;}    
    div.pcshow span.mPrice {font-size:12pt; font-weight:bold; color:red; padding-left:10px;}
    div.pcshow button.button4 {font-size:12pt; font-weight:bold; color:white; background-color:blue; position:absolute; left:15px;
        padding:5px 10px; border:none; border-radius:5px; cursor:pointer;}    

}