:root {--main-color:white;--main-bgcolor:#39373A;--main-bsize:7px; }
body {font-family: 'Charm',cursive; background-color:var(--main-bgcolor);}
button {text-align:right;}
hr {width:70%;text-align:left;margin: auto; }
div.borderimg2 {border: 30px outset transparent;border-image:url(card/border-1.jpg) 68 68 round; 
    background-color:white ; color: black;}
div.divtoprightb {border:0px; position:fixed; top:0; right:0;text-align:center;border: 30px outset transparent; 
    border-image:url(card/border-1.jpg) 68 68 round;background-color:white ; color: black;}
div.divcenter {text-align:center;} 
div.divbottright {border:0px; position:fixed; bottom:0; right:0;} 
div.textRight {text-align:right;}
div.warn {color:red;background-color:yellow; font-size: 15px;}
img.right {float:right; border-radius:50%;}
img.rightborder {border: 7px outset transparent;border-image:url(card/border-1.png) 68 68 round;
    float:right;border-radius:50%;}
p.r {background-color: yellow;color: red;}
table.add {border: 1px solid yellow; margin-left: auto;margin-right: auto}
td.tdtopleft {text-align: left; vertical-align: top; }
td.w0 {vertical-align: top;border: 0px double white; }
td.w2 {vertical-align: top;border: 2px double white; }
td.n {text-align: right;}
input{background-color: white;  color:black;}
.mySlides {display:none; margin: auto; height: 250px; width: auto;border: 3px dotted gold; padding: 10px; }
.sampleborH {background-color: white;}
.samplebor {height:250px; width:200px ;background-color: white;color: black; 
	padding: 5px 10px 15px 5px; margin-left: 100px;
	border:20px outset transparent;border-image:url(img/my/border1.png) 68 68 round; }
.sampleimg {height:200px; width: 150px; border:20px outset transparent;border-image:url(card/border-1.jpg) 68 68 round;
border-radius:50%; padding-left: 5px; padding-right:5px; } 
.sampleH2 {height:335px; width:220px; padding: auto; border: 5px double gray; margin-top: 80px; margin-left: 60px;}
.samplebor2 {height:325px; width:210px ;background-color: white;color: black; ; 
     padding: 0px 10px 15px 0px;border:20px outset transparent;border-image:url(img/my/border1.png) 68 68 round; }  
.sampleimg2 {height:200px; width: 150px; border:20px outset transparent;border-image:url(card/border-1.jpg) 68 68 round;
    border-radius:50%; padding-left: 15px; padding-right:5px; margin-left: 10px;} 
.sampletext2 {height:90px; width:150px; border:20px outset transparent;border-image:url(card/border-1.jpg) 68 68 round;
    margin-left: 10px; }  
.sampleH3 {height:325px; width:275px; padding: auto; border: 5px double gray; margin-top: 50px; margin-left: 40px; }
.sampleimg3 {height:200px; width: 180px; border:20px outset transparent;border-image:url(card/border-1.jpg) 68 68 round;
        border-radius: 50px 10px; margin: auto; display: block; margin-top: 1px;  
        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);  } 
.sampletext3 {height:100px; width:180px; border:20px outset transparent;border-image:url(card/border-1.jpg) 68 68 round;
        margin: auto; display: block; color:black;  
        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); }  

/* For Mobile */
@media screen and (max-width: 600px) {
    div.borderimg {border: var(--main-bsize) outset transparent;border-image:url(card/border-1.png) 68 68 round; 
    background-color:var(--main-bgcolor); color:var(--main-color);}
    fwH {font-size: 15px; }
    fwD {font-size: 15px; }
    div.letter {height: 200px;}
    div.divleft {margin-left:5%;}
    div.divleft2 {margin-left:10%;}
    div.divleft3 {margin-left:15%;} 
    input[type='number']{width: 80px;} 
    img.center {margin: auto;border-radius:50%;border: 3px solid green;height: 275px;}
}

/* For PC */
@media screen and (min-width: 601px) {
    div.borderimg {border: 30px outset transparent;border-image:url(card/border-1.png) 68 68 round; 
    background-color:var(--main-bgcolor); color:var(--main-color);}
    fwH {font-size: 35px;}
    fwD {font-size: 25px; }
    div.letter {height: 300px;}
    div.divleft {margin-left:20%;}
    div.divleft2 {margin-left:25%;}
    div.divleft3 {margin-left:15%;} 
    input[type='number']{width:125px;} 
    img.center {margin: auto;border-radius:50%;border: 3px solid red;height: 318px;}
}