/* @import url(https://fonts.googleapis.com/css?family=Anaheim); */
/* สำหรับ 9 รูป หมุน */
*{margin: 0;padding: 0;outline: none;border: none;box-sizing: border-box;}
*:before,
*:after{box-sizing: border-box;}
html,body {min-height: 100%;}
body {background-image: radial-gradient(mintcream 0%, lightgray 100%);}
h1 {display:table; margin:5% auto 0; text-transform:uppercase; font-family: 'Anaheim',sans-serif;font-size: 2em;
font-weight:400; text-shadow:0 1px white, 0 2px black;}
/* กรอบแสดงข้อความ */
.container {margin:4% auto; width:210px; height:140px; position:relative; perspective:1000px;}
/* กรอบแสดงข้อความ เสริมตำแหน่ง */
.cbuddy {margin:auto; width:50%; padding-top:100px;}
.cswk77 {margin:auto; width:50%; padding-top:150px;}
.cphone {padding-top:80px;} /* padding-top:100px; */
/* รูปแต่ละรูป */
#carousel {width:100%; height:100%; position:absolute; transform-style:preserve-3d; animation:rotation 20s infinite linear;}
#carousel figure {display:block; position:absolute; left:10px; top:10px; overflow: hidden;
background:white; border:solid 5px black;} /* background:black; */
#carousel figure:nth-child(1) {transform: rotateY(0deg) translateZ(288px);}
#carousel figure:nth-child(2) {transform: rotateY(40deg) translateZ(288px);}
#carousel figure:nth-child(3) {transform: rotateY(80deg) translateZ(288px);}
#carousel figure:nth-child(4) {transform: rotateY(120deg) translateZ(288px);}
#carousel figure:nth-child(5) {transform: rotateY(160deg) translateZ(288px);}
#carousel figure:nth-child(6) {transform: rotateY(200deg) translateZ(288px);}
#carousel figure:nth-child(7) {transform: rotateY(240deg) translateZ(288px);}
#carousel figure:nth-child(8) {transform: rotateY(280deg) translateZ(288px);}
#carousel figure:nth-child(9) {transform: rotateY(320deg) translateZ(288px);}
img {cursor:pointer; transition:all .5s ease;} /* -webkit-filter: grayscale(1); */
/* ส่วนเวลาใช้เมาส์แตะ */
#carousel:hover {animation-play-state:paused;}
/* figure:hover {zoom:125%;} */
img:hover {transform:scale(1.2,1.2);} /* -webkit-filter:grayscale(0); */
@keyframes rotation{from{transform: rotateY(0deg);} to{ transform: rotateY(360deg);}}
/*
🕷 🕸
// เต็มที่ 9 รูป
*/
/* สำหรับ อักษร ประกอบ */
@font-face {font-family:"Decovar Regular24"; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Decovar-VF.ttf");}
div.inh4 {background-image: radial-gradient(yellow 0%, green 100%);}
h2 {margin:0; font-size:15vw;}
h3.swk77 {margin-top:180px; margin-left:0px; font-size:20vw;}
h4.buddy1 {margin-top:125px; margin-left:0px; font-size:15vw;} /* Moblie */
h4.buddy2 {margin-top:180px; margin-left:0px; font-size:15vw;} /* PC */
h2,h3,h4 {font-family: "Decovar Regular24";color: white;font-variation-settings: "SSTR" 1000;
-webkit-animation: loadin 4s infinite linear;animation: loadin 4s infinite linear;
display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;text-align: center;
transform: translateZ(0);-webkit-backface-visibility: hidden; backface-visibility: hidden;
text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.7), 1px -1px 0 rgba(255, 255, 255, 0.7)
, -1px 1px 0 rgba(255, 255, 255, 0.7), 1px 1px 0 rgba(255, 255, 255, 0.7)
, -1px 2px 1px #a0a0a0, -2px 4px 2px #a0a0a0, -3px 6px 3px rgba(160, 160, 160, 0.6)
, -4px 8px 4px rgba(160, 160, 160, 0.5), -5px 10px 5px rgba(160, 160, 160, 0.4)
, -6px 12px 6px rgba(160, 160, 160, 0.3), -7px 13px 7px rgba(160, 160, 160, 0.2)
, -8px 15px 8px rgba(160, 160, 160, 0.2), -9px 17px 9px rgba(160, 160, 160, 0.2)
, -10px 19px 10px rgba(160, 160, 160, 0.2), -11px 20px 11px rgba(160, 160, 160, 0.1)
, -12px 22px 12px rgba(160, 160, 160, 0.1), -13px 24px 13px rgba(160, 160, 160, 0.1)
, -14px 26px 14px rgba(160, 160, 160, 0.1), -15px 28px 15px rgba(160, 160, 160, 0.1)
, -16px 30px 16px rgba(160, 160, 160, 0.1), -17px 32px 17px rgba(160, 160, 160, 0.1)
, -18px 34px 18px rgba(160, 160, 160, 0.1), -19px 36px 19px rgba(160, 160, 160, 0.1)
, -20px 38px 20px rgba(160, 160, 160, 0.1), -21px 39px 21px rgba(160, 160, 160, 0.1);}
@-webkit-keyframes loadin {0% {font-variation-settings: "SSTR" 1000;}
50% {font-variation-settings: "SSTR" 0;}}
@keyframes loadin {0% {font-variation-settings: "SSTR" 1000; }
50% {font-variation-settings: "SSTR" 0; }}
/* เพิ่มเติม */
button.button1 {position:fixed; right: 5px; border: 1px double black; font-size: 30px; font-weight: bold;}
button.swk77 {position:fixed; margin:auto; height:50px; width:120px; border:1px double black; font-size:20px;
font-weight:bold; color:black;}
div.imgbig {background-image:url('https://buddysoftware.net/img/my/pipopyouyod3.jpg'); height:97%; width:97%;
background-position:center; background-repeat:no-repeat; background-size:cover; margin:auto; }
div.imgbig {border:4px solid gold; 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)}
div.labelright,div.labelleft,div.labelBright,div.labelBleft,div.labelcenter
{position:fixed; background-color:yellow; color:blue; padding:5px;
border:2px double black; border-radius:10px 10px 10px;}
div.labelright {top:3px; right:5px;}
div.labelleft {top:3px; left:5px;}
div.labelBright {bottom:3px; right:5px;}
div.labelBleft {bottom:3px; left:5px;}
div.labelcenter {position:absolute; top:70%; left:50%; margin-top:-50px; margin-left:-50px;}
.bf {font-size:xx-large; font-weight:bolder; padding:15px;}
@media screen and (max-width:600px) { /* For Mobile */
#carousel figure {width:155px; height:116px;}
img {width:150px; height:110px;}
button {top:450px;}
}
@media screen and (min-width:601px) { /* For PC */
#carousel figure {width:186px; height:116px;}
img {width:186px; height:110px;}
button {bottom:5px;}
}