body {background-color:white;} 

div.inside {border-radius:5px;}
div.intro {text-indent:25px; margin-top:5px; margin-bottom:10px;} /* font-family:'Charm',cursive; font-size:120%;  */
div.intro ol {list-style-type:circle; margin-left:0.8ch;}
td.n {text-indent:1.5em;}
img.small {height:20px; width:20px;}
iframe {width:85%;} 
span.fm {font-size:75%;}
span.fcr {color:red;}
span.readme {color:red; background-color: yellow;}
span.imgsay {font-size:120%;}
hr.hw {width:50%;} /* แสดงครึ่งหน้าจอ */
hr.bs {border:none; height:5px; background-color:#333;} /* แสดงขอบเส้นใหญ่ๆ */
hr.hr { /* 1/2ของหน้าจอ แต่อยู่ฝั่งขวาหน้าจอ  */
    width:40%; background-color:#999; border:none; height:2px;
    margin-left:auto; margin-right:0; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);}

hr.divide4 { /* เต็มหน้าจอแต่แบ่งเป็น4ส่วน */
    width: min(100%, 720px); max-width: 100%; margin: 0.2rem auto; border: 0; 
    height: clamp(1px, 0.12vw, 2px);  
    background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0% 25%,rgba(0, 0, 255, 0.18) 25% 50%,
        rgba(0, 0, 0, 1) 50% 75%,rgba(0, 0, 255, 0.18) 75% 100%);
}
.r1 {text-align:right;}
t1 {font-weight:bold; font-size:large; color:blue; background-color:yellow; width:fit-content;}
t2 {font-weight:bold; font-size:large; color:red; background-color:yellow; width:fit-content;}
.rc  {font-size:24px; color:blue; margin-bottom:20px; font-weight: bold; text-align:center; line-height:45px;}
.ac {font-size:48px;}
/* ตัวลอยต่อท้ายคำ */
sub,sup {background-color:black; color:white; display:inline-block; border:1px solid white; padding:0.1em 0.3em; line-height:1; } /*      */
sub,sup {border-radius:0.35em; box-shadow:0 2px 5px rgba(0,0,0,0.15);} /* เป็นสี่เหลี่ยม */
sub.s2,sup.s2 {border-radius:50%;} /* เป็นวงกลม */
/* รูป */
.inside img.p,.inside img.ph,.inside iframe,.inside video {display:flex; justify-content:center; align-items:center;}
.inside img.p,.inside img.ph,.inside iframe,.inside video {margin-bottom:10px; margin-top:5px;} 
.inside img.p {height:100vh;}
.inside img.small2,.inside img.small3 {height:20px; box-shadow:none; border:none; padding:0px; border-radius:5px;} 
.inside img.small2 {border:1px double yellow; width:30px;}
.inside img.small3 {border:1px double grey; width:20px; transform:translateY(3px);}

/* ข้อความ ส่วนหัวข้อหัวข้อ */
/* <h>-><hw> <c>-><hy> <c2>-><hw2>   */
/*  <hw>--><htitle>   <hw2>--><hw> */
.inside hy,.inside hw,.inside hb,.inside htitlew,.inside htitley,.inside htitler {display:flex; justify-content:center; align-items:center;}
.inside hy,.inside hw,.inside hb,.inside htitlew,.inside htitley,.inside htitler {font-weight:bolder; border:1px solid black; width:fit-content; padding-right:10px; padding-left:-5px;}
.inside hy {background-color:yellow; border-radius:5px; padding-left:5px; padding-right:5px;}
.inside hw,.inside hb {border-radius:8px; padding-left:5px; padding-right:5px; box-shadow:0 4px 8px rgba(0,0,0,0.8);}
.inside hw {background-color:white;}
.inside hb {background-color:blue; color:white;}
.inside htitlew,.inside htitley,.inside htitler {border-radius:5px; padding-top:5px; margin-bottom:5px;
    box-shadow:10px 10px 5px -6px rgba(0,0,0,0.66);
    -webkit-box-shadow:10px 10px 5px -6px rgba(0,0,0,0.66);
    -moz-box-shadow:10px 10px 5px -6px rgba(0,0,0,0.66);
    text-indent:0px; padding-left:5px; padding-bottom:5px;
}
.inside htitlew {background-color:white;}
.inside htitley {background-color:yellow;}
.inside htitler {background-color:red; color:yellow;}
.inside htitlew.active {background-color:yellow;}
.inside htitley.active {background-color:white;}

/* b  ใช้สำหรับหัวข้อ  */
/* d  ใช้สำหรับภายในข้อความ  */
.inside dw,.inside sw {padding-left:0; padding-right:0; background-color:white;}
.inside db,.inside sb {padding-left:0; padding-right:0; background-color:blue; color:white;}
.inside dw2,.inside dy2,.inside db2 {padding-left:5px; padding-right:5px; }
.inside dw2 {background-color:white;}
.inside dy2 {background-color:yellow;}
.inside db2 {background-color:blue; color:white;}
.inside dr,.inside sr,.inside sbl {padding-left:0; padding-right:0; background-color:red; color:white;}
.inside dy,.inside sy {padding-left:0; padding-right:0; background-color:yellow; color:black;}
.inside dbl {width:fit-content; padding-right:5px; padding-left:-5px; 
    box-shadow:0 4px 8px rgba(0,0,0,0.8);}
.inside dbl,.inside sbl {background-color:black; color:white;}
/* s  ใช้สำหรับหัวข้อรอง  */
.inside sw,.inside sr,.inside sbl,.inside sy,.inside sb,.inside dw,.inside db,.inside dw2,.inside dy2,.inside db2,.inside dr,.inside dy {
    width:fit-content; box-shadow:1px 10px 5px -6px rgba(0,0,0,0.66); 
    -webkit-box-shadow:1px 10px 5px -6px rgba(0,0,0,0.66);
    -moz-box-shadow:1px 10px 5px -6px rgba(0,0,0,0.66);}

.inside sw,.inside sr,.inside sbl,.inside sy,.inside sb {display:inline-block; margin-bottom:5px; text-indent:-2.4ch; padding-left:2.4ch;}
.inside dy.active {background-color:red; color:yellow;}

.inside .t {text-indent:-2.4ch; padding-left:2.4ch; white-space:normal; overflow-wrap:break-word;} /* จะย่อหน้า บรรทัดที่2 Pipop */
.inside ol.ol2 {margin-left:1.4ch;}
.inside ol.no {list-style-type:none; margin-left:-35px;}
.inside .endstory {display:inline-block;padding:14px 26px;color:#fff;background:linear-gradient(135deg,#f48fb1,#8e24aa);
    border-radius:36px;box-shadow:0 0 24px rgba(142,36,170,0.45);font-size:1.5rem;font-weight:800;
    letter-spacing:0.2rem;text-shadow:0 0 8px rgba(0,0,0,0.25);}

.inside div.s-contr {display:flex; justify-content:space-between; align-items:center; 
    gap:0.5rem; margin:0 auto; padding-bottom:3px;}  
.inside div.s-contr div.s-contr2 {display:flex; gap:1.0rem;} 

div.timer,div.timerR {position:fixed; top:10px; font-size:16px; background:rgba(0,0,0,0.7); 
    color:#fff; padding:8px 12px; border-radius:5px; z-index:1000;}
div.timer {left:10px;}
div.timerR {right:10px;}
#bottom-content {background-color:yellow; color:blue; padding:1px; border-radius:8px; margin-top:1px; text-align:center;
    white-space:nowrap; overflow:hidden; display:inline-flex; padding-left:20px; padding-right:20px;}
.scroll-button {position:fixed; transform:translateY(-50%); border:none; 
    border-radius:50%; cursor:pointer; color:white; display:flex;
    align-items:center; justify-content:center; box-shadow:0 4px 8px rgba(0,0,0,0.2); 
    transition:all 0.3s ease; z-index:1000;
}
.scroll-button:hover {background-color:#2980b9; box-shadow:0 6px 12px rgba(0,0,0,0.3); color:yellow; transform:translateY(calc(-50%+5px));}
.scroll-button:active {transform: translateY(calc(-50% - 5px));}
.scroll-buttonUP {top:45%;}
.scroll-buttonDN {top:55%;}
.scroll-buttonBOTTOM {bottom:0%;}

.myblock,.myblock2,.myblock3 {width:90%; margin:1em auto; box-sizing:border-box; color:#000; 
    background:#fff; border:1px solid #000; box-shadow:4px 4px 0 #000; border-radius:5px;} /* ข้อความในกรอบ */
.myblock {text-align:center; padding:1em;}  /* อยู่ตรงกลาง */ 
.myblock2 {padding-left:20px; text-indent:-10px;} /* ชิดขอบ แต่บรรทัดแรกอยู่ซ้ายสุด */
.myblock3 {padding-left:10px; text-indent:15px;} /* ชิดขอบ แต่บรรทัดแรกเยื้องๆไปขวา */
.myblock-scroll {overflow:hidden; position:relative;} 
/* .myblock-scroll .myblock-text {animation:myblock-rise 10s linear 2 forwards; transform:translateY(100%);}  เป็นการเลื่อนขึ้น */
.myblock-scroll .myblock-text {animation:myblock-rise 6.66s linear 3 alternate forwards; transform:translateY(100%);} /* ขึ้น/ลง/ขึ้น */
.myblock-scroll.normal {max-height: none; overflow:visible;}
.myblock-scroll.normal .myblock-text {animation:none; transform:none;} /* เป็นการหยุดการเลื่อนขึ้น */
@keyframes myblock-rise {from {transform: translateY(100%);} to {transform:translateY(0%);}}

.objshake {animation:shake 0.5s; animation-iteration-count:infinite;}
.objshake2 {animation:shake 5s; animation-iteration-count:infinite;}

img.blackborder {margin-bottom:7px;}

.fullscreen-overlay {position:fixed; top:0; left:0; width:100%;  height:100%; display:none;
    justify-content:center;  align-items:center; background:rgba(0, 0, 0, 0.85); z-index: 9999;
    overflow: hidden;}
.fullscreen-overlay.active {display:flex;}
.fullscreen-overlay img {max-width:95%; max-height:95%; width:auto; height:auto;
    box-shadow: 0 0 30px white; border-radius:8px; } /* box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); */
.fullscreen-overlay .close-btn {position:absolute;  
    border:1px solid black; background-color: yellow;
    padding:1px 1px; font-size:18px; font-weight: bolder; border-radius:15%; cursor: pointer;
}
.sym4big {
    font-size:180%; font-weight:bolder; display:block; padding-top:2px; 
    padding-bottom:8px; line-height:1; box-sizing:border-box;}

/* สำหรับภาพเลื่นขึ้นและ จางใน 5 วินาที */
.stage{position:relative; height:100%; overflow:hidden;}
.anim-img{position:fixed; left:50%;	bottom:0; transform:translateX(-50%) translateY(40px) scale(0.2);
    transform-origin:center center; width:auto; height:20vh; /* เริ่มเล็ก */
    opacity:1; z-index:10; will-change:transform,opacity;
    animation:growFade 5s ease-in forwards; max-height:100vh; max-width:100vw;}
@keyframes growFade{
    0%{transform:translateX(-50%) translateY(60px) scale(0.02); /* translateY(40px) scale(0.2) */
        height:20vh; opacity:1; }
    60%{transform:translateX(-50%) translateY(0) scale(1);  height:70vh; opacity:0.7; } 
    90%{transform:translateX(-50%) translateY(0) scale(1); height:100vh; opacity:0;}  
    100%{transform:translateX(-50%) translateY(0) scale(1); height:100vh; opacity:1;}  
}

.bottomNotice {position:fixed;left:50%;bottom:0;transform:translateX(-50%);background:#fff;color:#000;
    padding:0.5rem 1rem;margin:0 0 0.5rem;border-radius:0.5rem;z-index:9999;text-align:center;
    box-shadow:0 0 10px rgba(0,0,0,0.1);}

.obj-blink {animation: blink 1s infinite;}
@keyframes blink {0%, 100% {opacity:1;  background-color:#2980b9;}  50% {opacity:0.2; color:inherit;}}

.inside img.small2:hover {transform:scale(10);}
@media screen and (max-width:600px) {  /* For Mobile */
    sub,sup {font-size:90%;}
    img,video,.inside div.s-contr {width:215px;} /* width:205px; */
    .scroll-button {background-color:white; color: black; right:2px; font-size:30px;} /* background-color:#3498db; */
    .scroll-button {width:40px; height:40px;}
    .scroll-button {box-shadow:0 4px 12px rgba(0,0,0,0.6); border:2px solid black; border-radius:5px;}
    .scroll-buttonUP {padding-top:1px;}
    .scroll-buttonDN {padding-bottom:1px;}
    .twitter-tweet {display:none;} 
    .inside iframe {height:45vh;} 
    .fullscreen-overlay img {max-width:98%; max-height:98%; }
    .fullscreen-overlay .close-btn {padding:8px 12px; font-size:16px;}
    .fullscreen-overlay .close-top {top:12px; right:12px;}
    .fullscreen-overlay .close-bot {bottom:12px; left:12px;} /* display:none;   */
    .anim-img{height:25vh} /* สำหรับภาพเลื่นขึ้นและ จางใน 5 วินาที */
    img.blackborder {height:150vh; max-height:250px;}
    img.h {height:150vh; max-height:300px;}
    .inside img.ph {height:150vh; max-height:225px;}
    span.fnpc {display:block; margin-left:2ch;} /* ถ้าในมือถือให้ขึ้นบรรทัดใหม่ */
}

@media screen and (min-width:601px) {  /* For PC */ 
    body {border:25px outset transparent; border-image:url(img/border.png) 68 68 round;}    
    sub,sup {font-size:80%;}
    div.inside {width:50%;}
    img,video,.inside div.s-contr {width:350px;} 
    span.imgsay {font-family:'Charm',cursive; font-weight:bold;}
    .scroll-button {background-color:black; right:30px; font-size:30px;}
    .scroll-button {width:60px; height:60px;}
    .twitter-tweet {margin:auto; height:auto; padding:10px;}  /*  PipopU-01 */
    .inside iframe {height:60vh;} /* Pipop */
    .fullscreen-overlay .close-top {top:20px; right:20px;}
    .fullscreen-overlay .close-bot {bottom:20px; left:20px;}
    img.blackborder {height:350px;}
    img.h {height:150vh; max-height:400px;}
    .inside img.ph {height:150vh; max-height:400px;}
}