body {font-family: 'Itim',cursive;font-size: 20pt;background-color: rgba(136, 188, 200, 1);}

h1 {color:white;text-shadow: 2px 2px 4px #000000; line-height: 10px;}
h2 {color: white;text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;line-height: 10px;}
h3 {color:white;text-shadow: 2px 2px 4px #000000;line-height: 10px; }
h4 {color: white;text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;line-height: 10px;}
h5 {color:white;text-shadow: 2px 2px 4px #000000;line-height: 10px; }
h6 {color: white;text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;line-height: 10px;}
p {color: black;font-size: 15pt;} 

/* max-width: 450px; */
table {max-width: 750px;background:#FAFAFA;padding: 2px;
	margin: 2px auto;box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.35);
	border-radius: 10px;border: 6px solid #305A72;} 
td {line-height: 10px;}
td.td1 {border: 3px double blue;text-align: center;font-size: 20pt;}
td.td2 {text-align: center;font-size: 20pt;background-color: white;}
td.td3 {border: 3px double blue; overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;font-size: 15pt;}
td.td4 {text-align: left;font-size: 20pt;background-color: white;}
td.td5 {text-align: left; vertical-align:top;  border: 3px double blue; overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;font-size: 15pt;}
td.toright {text-align: right;font-size: 20pt;background-color: white;}
td.shadow {color:blue; box-shadow: 0 8px 16px 0 white, 0 6px 20px 0 grey;} /* แบบเงา */

div.topright {border: 1px double white;position:fixed;top:0;right:0;font-size:15pt;} 
div.bottomright {border: 1px double white;position:fixed;bottom:0;right:0;font-size:15pt;} 


div.f,form {max-width: 675px;background:#FAFAFA;padding: 30px;
	margin: 50px auto;box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.35);
	border-radius: 10px;border: 6px solid #305A72;}
form ul {padding:0;	margin:0;list-style:none;}
form ul li {display: block;margin-bottom: 10px;min-height: 35px;}
form ul li label {font-family: 'Itim',cursive;font-size: 30pt;}
form ul li  .field-style{box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; 
	padding: 8px;outline: none;	border: 1px solid #B0CFE0;	-webkit-transition: all 0.30s ease-in-out;	
    -moz-transition: all 0.30s ease-in-out;-ms-transition: all 0.30s ease-in-out;-o-transition: all 0.30s ease-in-out;
    font-family: 'Itim',cursive;font-size: 15pt;}
form ul li .field-style:focus{box-shadow: 0 0 5px #B0CFE0;border:1px solid #B0CFE0;  }
form ul li .field-split{width: 49%;}
form ul li .field-full{width: 100%;}
form ul li input.align-left{float:left; font-family: 'Itim',cursive;font-size: 25pt; }
form ul li input.align-right{float:right; font-family: 'Itim',cursive;font-size: 25pt;}
form ul li textarea{width: 100%;height: 100px;}
form ul li input[type="button"] , 
form ul li input[type="submit"] {
	-moz-box-shadow: inset 0px 1px 0px 0px #3985B1;-webkit-box-shadow: inset 0px 1px 0px 0px #3985B1;
	box-shadow: inset 0px 1px 0px 0px #3985B1;background-color: #216288;
	border: 1px solid #17445E;	display: inline-block;
	cursor: pointer;color: #FFFFFF;padding: 8px 18px;text-decoration:none;
    font-family: 'Itim',cursive;font-size: 15pt;}

form ul li input[type="button"]:hover, 
form ul li input[type="submit"]:hover {background: linear-gradient(to bottom, #2D77A2 5%, #337DA8 100%);background-color: #28739E;}

a:link {color: blue;text-decoration: none; }
a:visited {color: blue;text-decoration: none;} /* visited link */
a:hover {color: red;text-decoration: none;} /* mouse over link */
a:active {color: pink;text-decoration: none;} /* selected link */

img:hover {animation: shake 0.5s;animation-iteration-count: infinite;}
@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); }
  } 

/*
<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='UTF-8'>
	<meta http-equiv='X-UA-Compatible' content='IE=edge'>
	<meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <link rel='preconnect' href='https://fonts.gstatic.com'>
	<link href='https://fonts.googleapis.com/css2?family=Itim&display=swap' rel='stylesheet'>
    <link rel='preconnect' href='https://fonts.gstatic.com'>
	<link href='https://fonts.googleapis.com/css2?family=Charm&display=swap' rel='stylesheet'>
    <link rel='stylesheet' href='layout3.css'> 
    <title>Document</title>
</head>
<body>
    <h2><a href=''><img src='img/ico/home.ico' height='30px'>uyod.net</a>
    <a href=''><img src='img/ico/add.ico' height='30px'>Reset</a>
    </h2>
    <h1>พิภพ H1</h1>
    <h2>พิภพ H2</h2>
    <p>พิภพ P</p>
    <!-- 
	ส่งไปที่ LINE
	<img src="util.php?id=1&message=????" height="0px" width="0px">
	--> 
	<form>
        <ul>
        <li>
            <input type='text' name='field1' class='field-style field-split align-left' placeholder='ข้อความซ้าย' />
            <input type='email' name='field2' class='field-style field-split align-right' placeholder='ข้อความขวา' />
        </li>
        <li><input type='text' name='field3' class='field-style field-full align-none' placeholder='ข้อความเต็ม' /></li>
        <li><textarea name='field5' class='field-style' placeholder='ข้อความยาว'></textarea></li>
        <li><input type='submit' value='ส่ง/ตกลง' /></li>
        </ul>
        </form>
    </body>
</html>
*/