*, body{margin:0;padding:0;line-height:1.5; font-family:Noto Sans Tamil,Arial;font-size:min(4.2vw, 16px); 
	box-sizing:border-box} /* max-size ltd to 16px*/
g{color:green}
r{color:#f00}
.hid{display:none; background:#fff; width:100%; max-width:600px;}
.pad5{padding:5px 17px;}
.hpad{padding:12px 0}
.fr{float:right}
.fl{float:left}
.fn{margin:auto;float:none}
.tac{text-align:center}
.tal{text-align:left}
.tar{text-align:right}
.w20{width:20%;float:left}
.w25{width:25%;float:left}
.w50{width:50%;float:left}
.w33{width:33.33%;float:left}
.w66{width:66.66%;float:left}
.w100{width:100%}
.bd0{border:0}
.bd1{border:1px solid}
.bgw{background:#fff}
.bg4{background:#fbb}
.bg7{background:linear-gradient(0deg, #70f, #fff 15%);}
.bg8{background:#ff0;}
.bglg{background:#afa;}
.b{font-weight:bold}
.clr2{color:#a0a}
.clr3{color:#808}
.clrw{color:#fff}
.green{color:green}
.indigo{color:indigo}
.item{box-shadow:2px 2px 2px #777;margin:5px 0}
.inner{width:100%;max-width:600px;margin:auto}
.d2u{-webkit-animation:d2u 0.7s; animation:d2u 0.7s;}
@keyframes d2u{0%{-webkit-transform: translateY(100%);transform: translateY(100%);}
	100%{visibility: hidden;-webkit-transform: translateY(0);transform: translateY(0);}}
.l2r{-webkit-animation: l2r 1s cubic-bezier(0, 0, 0.3, 1); }
@-webkit-keyframes l2r {0%{-webkit-transform:translateX(-550px);}
	100% {-webkit-transform: translateX(0px);}}
.r2l{-webkit-animation: r2l 1s cubic-bezier(0, 0, 0.3, 1); }
@-webkit-keyframes r2l {0%{ -webkit-transform:translateX(550px);}
	100% {-webkit-transform: translateX(0px);}}
::placeholder{color:#aaa}
::-webkit-scrollbar{width: 1px;border-radius: 25px;}
::-webkit-scrollbar-track{background: #f1f1f1;}
::-webkit-scrollbar-thumb{background:transparent;}
/*============================================*/
#index{display:block; width:100%; float:left; background:#fee; color:#135; border-bottom:6px solid #a07;
h4{text-align:center;font-size:1em;}
#head{height:50px;padding:10px 0;color:#fff;background:#a07; 	font-family:Georgia;
	line-height:1.2;font-size:1.4em; text-align:center;}
#front{width:100%; box-shadow:0 0 10px #a07 inset;}
#frontbox{display:flex;flex-direction:column;padding:30px; height:calc(100dvh - 55px); 
		font-weight:400; max-width:350px; margin:auto; }	
a{text-decoration:none;color:blue;}
#addnl{padding:0 30px 30px;height:100dvh;}
#phfr{width:230px;margin:0 auto;}
#photo3{width:110px;height:160px;float:left;background:#f07;border-radius:10px 0 0 10px}
#photo4{width:120px;height:160px;float:right;background:#f07;border-radius:0 10px 10px 0}}
/*============================================*/
#link{
a{text-decoration:none;color:blue;}
body{background:#ddd}
h1{color:#123; font-size:1.4em;line-height:1.3;margin:2px;display:block;background:#eee}
h2{text-align:center;font-size:1.2em;  color:#f00;}
h4{text-align:center;font-size:1em;  color:#89a;}
h3{text-align:center;font-size:1.5em;margin-bottom:8px; font-family:Georgia;}
button{border:0;padding:6px;height:34px;}
gr{color:grey}
g{color:green}
w{color:#fff}
n{color:navy}
span{color:#050}
textarea{height:90px; width:100%; overflow:hidden;resize:none;margin: 1px auto;
	border:0; border-bottom:1px solid #aaa; padding:5px;}
table{border-collapse:collapse;width:100%;}
td{border:1px solid #def;color:#777;padding:0 5px;line-height:1}
.formbg{background:#369}
input,select{width:90%; max-width:300px; height:34px;padding:0 6px;border:0;
	background:#fff;border-bottom:1px solid #bbb;display:block;margin:0px auto 6px;}
option{padding:0;font-size:1em;}
select:invalid{color:#777;}
img{border:0}
div{scrolbar-width:none;}
r{color:red;font-weight:bold}
li{list-style:none;margin-bottom:3px;padding:4px;border-bottom:1px solid #aaa;}
li:focus{background:#fdd;}
li:active, button:active{color:red}
.hid{display:none; padding:5px 15px;background:#fff; width:100%; max-width:600px;}
.hid2{display:none}
.red, #create select option r{color:#f0a}
.navy{color:navy}
.oval, #menu .oval, #likes a,#menu3 .oval{border-radius:10px;border:1px solid #fff;padding:3px 8px;
	width:auto; background:#08f;color:#fff;font-weight:normal}
.ovalbut{transform:scale(1.2);transform-origin:start;z-index:10;float:left; border-radius:8px;}
.btn{width:max;text-align:left; font-weight:bold; padding:0 10px;
	background:transparent;color:green;}
.but1{background:#fff;}
.btn2{font-size:1.2em;line-height:1;color:#999;background:#eee}
.vh100{min-height:100dvh}
.tnalist{height:40vh;overflow-y:auto;scrollbar-width:thin;}
.corner{color:gold;}
.menu2{width:max;text-align:center;padding:2px 15px; font-weight:bold;border-radius:30px;}
.menu4{color:gold;padding-right:10px;float:left;text-align:center}
.titles{word-spacing:2px;max-width:360px}/*box-shadow:2px 2px 10px 4px #aaa;*/
.titles p{clear:both;display:block}
.dd,.dd2{font-size:1rem;font-weight:normal; float:right}
.hr{border:6px solid #08f;margin:12px 0}
.menuform{width:100%;max-width:400px;padding:12px 12px 12px 20px;border-radius:7px;background:#fff;
	margin:20px auto;color:#123;}
#f1{padding:0 4%}
#f2{padding:4%;border:0;border-bottom:20px solid #08f;}
#f3{padding:20px 0;background:orange;color:#345}
#main{border-bottom:15px solid orange;height:97dvh;}
#main p{margin:2px;padding:3px 5px;text-align:left;line-height:1.4;font-size:1em;}
#minilistpad{height:86dvh;overflow:auto;width:100%;padding:5px}
#minilist{text-align:left;margin-top:6px;color:#555;padding:0;}
#minilist p{padding:15px 10px; margin:4px auto; width:98%; border-bottom:0px solid #aaa;background:#fff; 
	box-shadow:0 0 10px #aaa;}
#blogger{float:left;width:100%;padding:2px;background:#eee;font-weight:bold;}
#icon{width:40px;}
#img{margin-left:calc(50% - 70px)}
#create h3,#minisearch h3{color:#123}
#likemenu{height:60px; white-space:nowrap; overflow-x:scroll; scrollbar-width:thin; 
	width:100%;max-width:600px}
#likemenu button, #pmalar button{border:2px solid; border-radius:7px; margin:5px; display:inline-block;
	font-weight:bold;  background:transparent;color:green; padding:2px 10px;}
#board{width:100%; max-width:600px; background:#a07; height:50px;padding:10px 3px; font-weight:600;color:#fff }
#logger{background:#fbb;height:50px;}
#outer{padding-bottom:40px; width:100%;clear:both; max-width:600px; float:left; overflow:auto; scrollbar-width:none;
	min-height:100dvh; border:1px solid #aaa; border-top:0;}
#inner{width:100%; max-width:600px; margin:0 auto;}
#msgs button{border-top:1px solid;width:100%;text-align:left;color:#678;height:auto}
#msgs button:focus{background:#ddd}
#footer{bottom:0;position:fixed;height:30px;background:#aae;color:#fff}
#footer button{height:30px;text-align:center;width:33%;color:#fff;background:transparent}
#intitles{display:none}
#title{transform:scale(1.2,1.3);width:83%;margin:auto;font-family:Mukta malar}
#menu2{color:#fff;background:transparent;width:100px}
#panel{padding:15px 0;}
#plan1{border-radius:6px;box-shadow:2px 2px 2px #777}
#wanum{border:0}
#login input{width:50%;}
.profno{padding:0; text-align:center; border:1px solid #000; background:gold; color:#000; width:60px;margin:0; 
	padding:2px;border-radius:0 20px 20px 0}
#profno{border-radius:20px 0 0 20px;width:100px;margin-left:10px;width:100px;height:auto}
#profile{padding:8px;background:#fff;margin-bottom:100px; border-bottom:5px solid #08a;}
#menu3{background:#fff;width:100%;padding:10px 20px 40px;}
#menu{padding:5px 20px;background:#eee;height:100dvh;}
#menu button{width:auto;color:#123; font-weight:400;border-radius:10px;background:transparent}
#menu a, #contact a, #contact button{padding:5px;margin:2px; width:auto; color:#123;}
#menu3 button,#menu3 a{width:100%;text-align:left;margin:3px;}
#menu3 a,#menu a{border:0;background:#;padding:2px}
#profnum button{text-align:left;}
#call{color:#aaa; letter-spacing:1.5px; padding:10px 0;width:100%;margin:auto}
#photo,.photo{margin:10px auto; width:140px; min-height:140px; border:0; background-size:100%;display:block;
	background-repeat:no-repeat;float:none;} 
#profphoto{margin:0}
#note{display:none;color:#000;width:80%;position:fixed;max-width:600px;font-size:1.2em;border-radius:10px;
	top:100px;left:10%;background:#faa;padding:20px;}
#castebox2,#castebox3{display:none2;color:#000;width:99%;position:fixed;max-width:600px;text-align:left;
	font-size:1.2em;display:none;z-index:1000;top:5px;left:0;background:#fee;padding:10px;height:95dvh;overflow-Y:scroll;}
@media print{
	body{visibility:hidden}  #photo2{visibility:hidden}
	#printable{display:block;visibility:visible;position:absolute;top:0mm;}}
@media(min-width:400px){#likesbar{scrollbar-width:thin;}}
/*transform:scale(1.1,1.2);transform-origin:start;z-index:10;*/
}