HW GroupB PArin

✨ Jakarin Yensuk

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body
      {
        background-image:url('https://www.teahub.io/photos/full/285-2859108_street-fighter-ken-stage.png');
        margin:1em;
        font-family:sans-serif;
        overflow: hidden
      }
		.grid
      {
        	background-image:url('https://ak.picdn.net/shutterstock/videos/1036052831/thumb/1.jpg');
    		display: flex;
    		flex-wrap: wrap;
    		border: solid 1px;
    		width: 800px;
    		height: 500px;
        	position:relative;
        	overflow:hidden;
        	color:red;
			font-family: 'Courier New', monospace;
		}
      @keyframes kraprib
      {
        0%{opacity:.2;box-shadow:0px 0px 20px 5px gold;}
        5%{opacity:1;}
        10%{opacity:.2;}
        15%{opacity:1;}
        20%{opacity:.2;}
        25%{opacity:1;}
        30%{opacity:.2;}
        35%{opacity:1;}
        40%{opacity:.2;}
        45%{opacity:1;}
        50%{opacity:.2;}
        55%{opacity:1;}
        60%{opacity:.2;}
        65%{opacity:1;}
        70%{opacity:.2;}
        75%{opacity:1;}
        80%{opacity:.2;}
        85%{opacity:1;}
        90%{opacity:.2;}
        95%{opacity:1;}
        100%{opacity:.2;box-shadow:0px 0px 20px 5px gold;}
      }
      @keyframes kraprib2
      {
        0%{opacity:.2;box-shadow:0px 0px 20px 5px red;}
        5%{opacity:1;}
        10%{opacity:.2;}
        15%{opacity:1;}
        20%{opacity:.2;}
        25%{opacity:1;}
        30%{opacity:.2;}
        35%{opacity:1;}
        40%{opacity:.2;}
        45%{opacity:1;}
        50%{opacity:.2;}
        55%{opacity:1;}
        60%{opacity:.2;}
        65%{opacity:1;}
        70%{opacity:.2;}
        75%{opacity:1;}
        80%{opacity:.2;}
        85%{opacity:1;}
        90%{opacity:.2;}
        95%{opacity:1;}
        100%{opacity:.2;box-shadow:0px 0px 20px 5px red;}
      }
      @keyframes kraprib3
      {
        0%{opacity:.2;box-shadow:0px 0px 20px 5px purple;}
        5%{opacity:1;}
        10%{opacity:.2;}
        15%{opacity:1;}
        20%{opacity:.2;}
        25%{opacity:1;}
        30%{opacity:.2;}
        35%{opacity:1;}
        40%{opacity:.2;}
        45%{opacity:1;}
        50%{opacity:.2;}
        55%{opacity:1;}
        60%{opacity:.2;}
        65%{opacity:1;}
        70%{opacity:.2;}
        75%{opacity:1;}
        80%{opacity:.2;}
        85%{opacity:1;}
        90%{opacity:.2;}
        95%{opacity:1;}
        100%{opacity:.2;box-shadow:0px 0px 20px 5px purple;}
      }
      .box1 /* Toey */
      {
			background-image:url('https://scontent.fbkk2-6.fna.fbcdn.net/v/t1.0-9/77124318_1401060160062741_278862270795087872_o.jpg?_nc_cat=109&ccb=3&_nc_sid=09cbfe&_nc_eui2=AeFxG6Kjmwbxevi2dBIQerDbvcWV1-jzgDq9xZXX6POAOncO3sPThjlP8WmoK7uz02cSxTmMgRMSepxE6FIl0Nmd&_nc_ohc=4yMC-oh-5F8AX_aFBTU&_nc_ht=scontent.fbkk2-6.fna&oh=4ae390a777b79cc09432ada20bc92ac6&oe=6048640D');
        background-size:cover;
        	width:50px;
        	height:50px;
        	position:relative;
        	top:350px;
        	left:237px;
        	border-radius:10px;
        	box-shadow:0px 0px 0px 2px red;
        	margin:3px;
        	animation: kraprib2  alternate;
        	animation-duration: 5s;
        	animation-delay:8s;
        z-index:2;
        	
        
      }
      .box2 /* Save */
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809331291945435136/7583D0C7-658F-4318-BDF7-1C35351EBECF.jpg');
        	background-size:cover;
        	width:50px;
        	height:50px;
        	position:relative;
        	top:350px;
       	left:237px;
        	border-radius:10px;
        	box-shadow:0px 0px 0px 2px red;
        	margin:3px;
        	animation: kraprib2  alternate;
        	animation-duration: 5s;
        	animation-delay:14s;
        z-index:2;
           
      }
      .box3 /* Pae */
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809331914099654656/IMG20210211145508.jpg');
        	background-size:cover;
        	width:50px;
        	height:50px;
        	position:relative;
        	top:350px;
        	left:237px;
        	border-radius:10px;
        	box-shadow:0px 0px 0px 2px red;
        	margin:3px;
        	animation: kraprib2  alternate;
        	animation-duration: 5s;
        	animation-delay:20s;
        z-index:2;
           
      }
      .box4 /* Jit */
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809330564670816276/135201594_3605230476212893_7071914341693562105_n.jpg');
        	background-size:cover;
        	width:50px;
        	height:50px;
        	position:relative;
        	top:350px;
        	left:237px;
        	border-radius:10px;
        	box-shadow:0px 0px 0px 2px red;
        	margin:3px;
        	animation: kraprib2  alternate;
        	animation-duration: 5s;
        	animation-delay:26s;
        z-index:2;
           
      }
      .box5 /* Jabont */
      {
			background-image:url('https://scontent.fbkk2-7.fna.fbcdn.net/v/t1.0-9/93520242_10219841843149529_6244240891939127296_n.jpg?_nc_cat=106&ccb=3&_nc_sid=09cbfe&_nc_eui2=AeFiZfefyWf3bjTX-CYiqca2DL73xLjREmQMvvfEuNESZHKCSAZtmEso4W7DGaVTIPvITolIK1q75KrHaj0816Z3&_nc_ohc=MdHPvKNL3XsAX_Nmn7M&_nc_ht=scontent.fbkk2-7.fna&oh=5d3dd842c737abdad8f144c126d4750b&oe=604A34A1');
        	background-size:cover;
        	width:50px;
        	height:50px;
        	position:relative;
        	top:410px;
        	left:-100px;
        	border-radius:10px;
        	box-shadow:0px 0px 0px 2px purple;
        	margin:3px;
        	animation: kraprib3  alternate;
        	animation-duration: 5s;
        	animation-delay:32s;
        z-index:2;
        
        
      }
      .box6 /* Tong */
      {
			background-image:url('https://cdn.discordapp.com/attachments/756177447896088577/809332623729754172/20210211_145621.jpg');
        	background-size:cover;
        	width:50px;
        	height:50px;
        	position:relative;
        	top:410px;
        	left:-100px;
        	border-radius:10px;
        	box-shadow:0px 0px 0px 2px red;
        	margin:3px;
        	animation: kraprib2  alternate;
        	animation-duration: 5s;
        	animation-delay:26s;
        z-index:2;
        
      }
      .box7 /* Mon */
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809333112311250964/my_photo.jpg');
        	background-size: cover;
        	width:50px;
        	height:50px;
        	position:relative;
        	top:410px;
        	left:-100px;
        	border-radius:10px;
        	box-shadow:0px 0px 0px 2px red;
        	margin:3px;
        	animation: kraprib2  alternate;
        	animation-duration: 5s;
        	animation-delay:20s;
        z-index:2;
        
      }
      .box8 /* Pink */
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809749684776206336/S__36544524.jpg');
        background-size:cover;
        	width:50px;
        	height:50px;
        	position:relative;
        	top:410px;
        	left:-100px;
        	border-radius:10px;
        	box-shadow:0px 0px 0px 2px red;
        	margin:3px;
        	animation: kraprib2  alternate;
        	animation-duration: 5s;
        	animation-delay:14s;
        z-index:2;
        
      }
      .box9 /* Earth */
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809333901042253854/unknown.png');
        	background-size:cover;
        	width:50px;
        	height:50px;
        	position:relative;
        	top:410px;
        	left:-100px;
        	border-radius:10px;
        	box-shadow:0px 0px 0px 2px red;
        	margin:3px;
        	animation: kraprib2  alternate;
        	animation-duration: 5s;
        	animation-delay:8s;
        z-index:2;
        
      }
      .box10 /* P'Ae */
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809337271894933554/unknown.png');
        	background-size:cover;
        	width:50px;
        	height:50px;
        	position:relative;
        	top:410px;
        	left:-100px;
        	border-radius:10px;
        	box-shadow:0px 0px 0px 2px gold;
        	margin:3px;
        	animation: kraprib  alternate;
        	animation-duration: 5s;
        	animation-delay: 2s;
        	z-index:2;
      }
      .box11 /* T.Muna */
      {
			background-image:url('https://scontent.fbkk2-8.fna.fbcdn.net/v/t1.0-9/102466793_10158094575126590_7416939879325592566_n.jpg?_nc_cat=102&ccb=3&_nc_sid=09cbfe&_nc_eui2=AeFHaczNirmygOTUIL0kHCd3eYDMacJ32Wd5gMxpwnfZZwIeGjDuMpNRD4DG8uTxFdQ5rNu5dYNJ9AoE4c8aOcMs&_nc_ohc=KYj7U7gOSSMAX_nNYwF&_nc_ht=scontent.fbkk2-8.fna&oh=4b4123c839a8f0095d3a3fc400447539&oe=604B6FF2');
        	background-size:cover;
        	width:50px;
        	height:50px;
        	position:relative;
        	top:350px;
        	left:237px;
        	border-radius:10px;
        	box-shadow:0px 0px 0px 2px gold;
        	margin:3px;
        	animation: kraprib  alternate;
        	animation-duration: 5s;
        	animation-delay: 2s;
        	z-index:2;
      }
      .box12 /* Arin */
      {
			background-image:url('https://scontent.fbkk2-5.fna.fbcdn.net/v/t1.0-9/134372666_2851472108421234_1650577855754040748_n.jpg?_nc_cat=110&ccb=3&_nc_sid=09cbfe&_nc_eui2=AeG0WnY0UC8_QvuRSNzVrzgx9PpBrx_88of0-kGvH_zyh-zvu052qCgmWyq_OkjwHMYbiCGiXRzrfF8jWRI0oArC&_nc_ohc=PLpg4Dx15PEAX-ghNN6&_nc_ht=scontent.fbkk2-5.fna&oh=91dd025e66c6fa30c124aaff37e494b1&oe=604A9CB8');
        	background-size:cover;
        	width:50px;
        	height:50px;
        	position:relative;
        	top:350px;
        	left:237px;
        	border-radius:10px;
        	box-shadow:0px 0px 0px 2px purple;
        	margin:3px;
        	animation: kraprib3  alternate;
        	animation-duration: 5s;
        	animation-delay:32s;
        	z-index:2;
      }
      @keyframes matangsai
      {
        0%{opacity:0}
      
        10%{opacity:0}
        50% {left:350px;}
        98% {left:350px; opacity:1}
        100%{left:350px; opacity:0}
      }
		@keyframes matangkwa
      {
        0%{opacity:0}
      
        10%{opacity:0}
        50% {left:-40px;}
        98% {left:-40px; opacity:1}
        100%{left:-40px; opacity:0}
      }
      
      /*P2*/
      .PAe
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809338920038301716/dr.png');
        background-size:cover;
        background-repeat: no-repeat;
        height:450px;
        width:450px;
        position:relative;
        bottom: 50px;
        left:600px;
        animation: matangsai 2.2s;
        animation-duration: 5s;
        animation-delay:2s;
        opacity:0
        
      }
      .earth
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809341464264966184/2.png');
        background-size:cover;
        background-repeat: no-repeat;
        height:430px;
        width:450px;
        position:relative;
        bottom: 480px;
        left:500px;
        animation: matangsai6 2.2s;
        animation-duration: 5s;
        animation-delay:8s;
        opacity:0;
      }
      @keyframes matangsai6
      {
        0%{opacity:0}
      
        10%{opacity:0}
        50% {left:400px;}
        98% {left:400px; opacity:1}
        100%{left:400px; opacity:0}
      }
      
      .mon
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809341464105582662/1.png');
        background-size:cover;
        background-repeat: no-repeat;
        height:420px;
        width:420px;
        position:relative;
        bottom: 2607px;
        left:500px;
        animation: matangsai7 2.2s;
        animation-duration: 5s;
        animation-delay:20s;
/*         20 */
        opacity:0;
      }
      @keyframes matangsai7
      {
        0%{opacity:0}
      
        10%{opacity:0}
        50% {left:420px;}
        98% {left:420px; opacity:1}
        100%{left:420px; opacity:0}
      }
      .tong
      {
			background-image:url('https://cdn.discordapp.com/attachments/756177447896088577/809332618855710730/20210211_145621-removebg-preview.png');
        background-size:cover;
        background-repeat: no-repeat;
        height:500px;
        width:440px;
        position:relative;
        bottom: 3550px;
        left:600px;
        animation: matangsai8 2.2s;
        animation-duration: 5s;
        animation-delay:26s;
/*         26 */
        opacity:0;
      }
      @keyframes matangsai8
      {
        0%{opacity:0}
      
        10%{opacity:0}
        50% {left:400px;}
        98% {left:400px; opacity:1}
        100%{left:400px; opacity:0}
      }
      
      .jabont
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809337114080575508/jabont.png');
        background-size:cover;
        background-repeat: no-repeat;
        height:410px;
        width:410px;
        position:relative;
        bottom: 4330px;
        left:650px;
        animation: matangsai9 2.2s;
        animation-duration: 5s;
        animation-delay:32s;
/*         32 */
        opacity:0;
      }
      @keyframes matangsai9
      {
        0%{opacity:0}
      
        10%{opacity:0}
        50% {left:470px;}
        98% {left:470px; opacity:1}
        100%{left:470px; opacity:0}
      }
      
      /*P1*/
      
      .muna
      {
			background-image:url('https://cdn.discordapp.com/attachments/809362797909639178/809362893967589416/tmunac.png');
        background-size:cover;
        background-repeat: no-repeat;
        height:355px;
        width:355px;
        position:relative;
        bottom: 835px;
        left:-200px;
        animation: matangkwa 2.2s;
        animation-duration: 5s;
        animation-delay:2s;
        opacity:0;
        
        
      }
      .toey
      {
			background-image:url('https://cdn.discordapp.com/attachments/809362797909639178/809368316237578240/toey.png');
        background-size:cover;
        background-repeat: no-repeat;
        height:451px;
        width:451px;
        position:relative;
        bottom: 1285px;
        left:-200px;
        animation: matangkwa2 2.2s;
        animation-duration: 5s;
        animation-delay:8s;
/*         8 */
        opacity:0;
      }
      @keyframes matangkwa2
      {
        0%{opacity:0}
      
        10%{opacity:0}
        50% {left:-70px;}
        98% {left:-70px; opacity:1}
        100%{left:-70px; opacity:0}
      }
      .save
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809328052572127242/save.png');
        background-size:cover;
        background-repeat: no-repeat;
        height:420px;
        width:420px;
        position:relative;
        bottom: 1703px;
        left:-200px;
        animation: matangkwa1 2.2s;
        animation-duration: 5s;
        animation-delay:14s;
        opacity:0;
        transform:scalex(-1)
      }
      @keyframes matangkwa1
      {
        0%{opacity:0}
      
        10%{opacity:0}
        50% {left:-15px;}
        98% {left:-15px; opacity:1}
        100%{left:-15px; opacity:0}
      }
      .pae2
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809337347686400050/IMG20210211145508-removebg-preview.png');
        background-size:cover;
        background-repeat: no-repeat;
        height:481px;
        width:381px;
        position:relative;
        bottom:2186px;
        left:-200px;
        animation: matangkwa4 2.2s;
        animation-duration: 5s;
        animation-delay:20s;
/*         20 */
        opacity:0;
      }
      @keyframes matangkwa4
      {
        0%{opacity:0}
      
        10%{opacity:0}
        50% {left:-30px;}
        98% {left:-30px; opacity:1}
        100%{left:-30px; opacity:0}
      }
    	.jit
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809337090679767060/jit.png');
        background-size:cover;
        background-repeat: no-repeat;
        height:450px;
        width:450px;
        position:relative;
        bottom: 3050px;
        left:-200px;
        animation: matangkwa5 2.2s;
        animation-duration: 5s;
        animation-delay:26s;
/*         26 */
        opacity:0;
      }
      @keyframes matangkwa5
      {
        0%{opacity:0}
      
        10%{opacity:0}
        50% {left:-70px;}
        98% {left:-70px; opacity:1}
        100%{left:-70px; opacity:0}
      }
      .arin
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809337119477596180/arin.png');
        background-size:cover;
        background-repeat: no-repeat;
        height:400px;
        width:400px;
        position:relative;
        bottom: 3950px;
        left:-100px;
        animation: matangkwa6 2.2s;
        animation-duration: 5s;
        animation-delay:32s;
/*           32; */
        opacity:0;

}
      @keyframes matangkwa6
      {
        0%{opacity:0}
      
        10%{opacity:0}
        50% {left:0px;}
        98% {left:0px; opacity:1}
        100%{left:0px; opacity:0}
      }
      .text
      {
        	font-size:30px;
        	left: 50px;
        	top: 30px;
        	color:white;
			font-family: 'Courier New', monospace;
        	position:absolute;
        	z-index:2;
        
      }
      .text2
      {
        	font-size:30px;
        	left: 565px;
        	top: 30px;
        	color:white;
			font-family: 'Courier New', monospace;
        	position:absolute;
        	z-index:2;
        
      }
      .container 
      {
  			width: 100%;
  			background-color: #ddd;
        	animation: matangkwa6 2.2s;
        	animation-duration: 5s;
        	animation-delay:2s;
        	opacity:0;
		}
      .container_Toey
      {
  			width: 100%;
  			background-color: #ddd;
        	animation: matangkwa6 2.2s;
        	animation-duration: 5s;
        	animation-delay:8s;
        	opacity:0;
		}
      .container_Save
      {
  			width: 100%;
  			background-color: #ddd;
        	animation: matangkwa6 2.2s;
        	animation-duration: 5s;
        	animation-delay:14s;
        	opacity:0;
		}
      .container_Pae
      {
  			width: 100%;
  			background-color: #ddd;
        	animation: matangkwa6 2.2s;
        	animation-duration: 5s;
        	animation-delay:20s;
        	opacity:0;
		}
      .container_Arin
      {
  			width: 100%;
  			background-color: #ddd;
        	animation: matangkwa6 2.2s;
        	animation-duration: 5s;
        	animation-delay:32s;
        	opacity:0;
		}
      .container_Jabont
      {
  			width: 100%;
  			background-color: #ddd;
        	animation: matangkwa6 2.2s;
        	animation-duration: 5s;
        	animation-delay:32s;
        	opacity:0;
		}
      .container_Tong
      {
  			width: 100%;
  			background-color: #ddd;
        	animation: matangkwa6 2.2s;
        	animation-duration: 5s;
        	animation-delay:26s;
        	opacity:0;
		}
      .container_Mon
      {
  			width: 100%;
  			background-color: #ddd;
        	animation: matangkwa6 2.2s;
        	animation-duration: 5s;
        	animation-delay:20s;
        	opacity:0;
		}
      .container_Jit
      {
  			width: 100%;
  			background-color: #ddd;
        	animation: matangkwa6 2.2s;
        	animation-duration: 5s;
        	animation-delay:26s;
        	opacity:0;
		}
      .container_Pink 
      {
  			width: 100%;
  			background-color: #ddd;
        	animation: matangkwa6 2.2s;
        	animation-duration: 5s;
        	animation-delay:14s;
        	opacity:0;
		}
      .container_Earth
      {
  			width: 100%;
  			background-color: #ddd;
        	animation: matangkwa6 2.2s;
        	animation-duration: 5s;
        	animation-delay:8s;
        	opacity:0;
		}
      .container_P
      {
  			width: 100%;
  			background-color: #ddd;
        	animation: matangkwa6 2.2s;
        	animation-duration: 5s;
        	animation-delay:2s;
        	opacity:0;
		}

.skills 
      {
  			text-align: center;
  			padding-top: 1px;
  			padding-bottom: 1px;
  			color: black;
		}

.munahp 
      {
        width: 100px; 
        background-color: #4CAF50;
        position:absolute;
        z-index:2;
        top: 390px;
        left: 40px 
      }
		.munamp 
      {
        width: 80px; 
        background-color: #2196F3;
        position:absolute;
        z-index:2;
        top: 425px;
        left: 40px;
      }
      .Toeyhp 
      {
        width: 90px; 
        background-color: #4CAF50;
        position:absolute;
        z-index:2;
        top: 390px;
        left: 40px 
      }
		.Toeymp 
      {
        width: 50px; 
        background-color: #2196F3;
        position:absolute;
        z-index:2;
        top: 425px;
        left: 40px;
      }
      .Savehp 
      {
        width: 100px; 
        background-color: #4CAF50;
        position:absolute;
        z-index:2;
        top: 390px;
        left: 40px 
      }
		.Savemp 
      {
        width: 50px; 
        background-color: #2196F3;
        position:absolute;
        z-index:2;
        top: 425px;
        left: 40px;
      }
      .Jithp 
      {
        width: 70px; 
        background-color: #4CAF50;
        position:absolute;
        z-index:2;
        top: 390px;
        left: 40px 
      }
		.Jitmp 
      {
        width: 100px; 
        background-color: #2196F3;
        position:absolute;
        z-index:2;
        top: 425px;
        left: 40px;
      }
      .Paehp 
      {
        width: 100px; 
        background-color: #4CAF50;
        position:absolute;
        z-index:2;
        top: 390px;
        left: 40px 
      }
		.Paemp 
      {
        width: 45px; 
        background-color: #2196F3;
        position:absolute;
        z-index:2;
        top: 425px;
        left: 40px;
      }
      .Arinhp 
      {
        width: 100px; 
        background-color: #4CAF50;
        position:absolute;
        z-index:2;
        top: 390px;
        left: 40px 
      }
		.Arinmp 
      {
        width: 100px; 
        background-color: #2196F3;
        position:absolute;
        z-index:2;
        top: 425px;
        left: 40px;
      }
      .gameborder
      {
			background-image:url('https://cdn.discordapp.com/attachments/649213852654895137/809440798311579648/pngtree-rectangular-border-game-border-colored-border-science-fiction-style-png-image_447119-removeb.png');
        	background-size:cover;
        	position:absolute;
        	height:200px;
        	width:240px;
        	top:300px;
      }
      .Php 
      {
        width: 100px; 
        background-color: #4CAF50;
        position:absolute;
        z-index:2;
        top: 390px;
        left: 600px 
      }
		.Pmp 
      {
        width: 100px; 
        background-color: #2196F3;
        position:absolute;
        z-index:2;
        top: 425px;
        left: 600px;
      }
      .Earthhp 
      {
        width: 100px; 
        background-color: #4CAF50;
        position:absolute;
        z-index:2;
        top: 390px;
        left: 600px 
      }
		.Earthmp 
      {
        width: 80px; 
        background-color: #2196F3;
        position:absolute;
        z-index:2;
        top: 425px;
        left: 600px;
      }
      .Pinkhp 
      {
        width: 60px; 
        background-color: #4CAF50;
        position:absolute;
        z-index:2;
        top: 390px;
        left: 600px 
      }
		.Pinkmp 
      {
        width: 100px; 
        background-color: #2196F3;
        position:absolute;
        z-index:2;
        top: 425px;
        left: 600px;
      }
      .Monhp 
      {
        width: 80px; 
        background-color: #4CAF50;
        position:absolute;
        z-index:2;
        top: 390px;
        left: 600px 
      }
		.Monmp 
      {
        width: 95px; 
        background-color: #2196F3;
        position:absolute;
        z-index:2;
        top: 425px;
        left: 600px;
      }
      .Tonghp 
      {
        width: 95px; 
        background-color: #4CAF50;
        position:absolute;
        z-index:2;
        top: 390px;
        left: 600px 
      }
		.Tongmp 
      {
        width: 50px; 
        background-color: #2196F3;
        position:absolute;
        z-index:2;
        top: 425px;
        left: 600px;
      }
      .Jabonthp 
      {
        width: 100px; 
        background-color: #4CAF50;
        position:absolute;
        z-index:2;
        top: 390px;
        left: 600px 
      }
		.Jabontmp 
      {
        width: 100px; 
        background-color: #2196F3;
        position:absolute;
        z-index:2;
        top: 425px;
        left: 600px;
      }
      .gameborder2
      {
			background-image:url('https://cdn.discordapp.com/attachments/649213852654895137/809440798311579648/pngtree-rectangular-border-game-border-colored-border-science-fiction-style-png-image_447119-removeb.png');
        	background-size:cover;
        	position:absolute;
        	height:200px;
        	width:240px;
        	top:300px;
        left:560px;
      }
      .logo1
      {
			background-image:url('https://cdn.discordapp.com/attachments/649213852654895137/809746616839569418/unknown-removebg-preview_7.png');
        background-size:cover;
        position:absolute;
        height:80px;
        	width:80px;
        	top:375px;
        	left:135px;
        z-index:2;
      }
      .logo2
      {
			background-image:url('https://cdn.discordapp.com/attachments/649213852654895137/809746712914034718/unknown-removebg-preview_8.png');
        background-size:cover;
        position:absolute;
        height:70px;
        	width:70px;
        	top:380px;
        	left:145px;
        z-index:2;
      }
      .logo3
      {
			background-image:url('https://cdn.discordapp.com/attachments/649213852654895137/809745120810893352/unknown-removebg-preview.png');
        background-size:cover;
        position:absolute;
        height:80px;
        	width:80px;
        	top:375px;
        	left:135px;
        z-index:2;
      }
      .logo4
      {
			background-image:url('https://cdn.discordapp.com/attachments/649213852654895137/809746100759035944/unknown-removebg-preview_2.png');
        background-size:cover;
        position:absolute;
        height:70px;
        	width:70px;
        	top:380px;
        	left:140px;
        z-index:2;
      }
      .logo5
      {
			background-image:url('https://cdn.discordapp.com/attachments/649213852654895137/809746195890962483/unknown-removebg-preview_3.png');
        background-size:cover;
        position:absolute;
        height:80px;
        	width:80px;
        	top:375px;
        	left:140px;
        z-index:2;
      }
      .logo6
      {
			background-image:url('https://cdn.discordapp.com/attachments/649213852654895137/809745268391936000/unknown-removebg-preview_1.png');
        background-size:cover;
        position:absolute;
        height:75px;
        	width:75px;
        	top:380px;
        	left:143px;
        z-index:2;
      }
      .logo7
      {
			background-image:url('https://cdn.discordapp.com/attachments/649213852654895137/809746424609767444/unknown-removebg-preview_5.png');
        background-size:cover;
        position:absolute;
        height:75px;
        	width:75px;
        	top:380px;
        	left:700px;
        z-index:2;
      }
      .logo8
      {
			background-image:url('https://cdn.discordapp.com/attachments/649213852654895137/809746300487991316/unknown-removebg-preview_4.png');
        background-size:cover;
        position:absolute;
        height:75px;
        	width:75px;
        	top:380px;
        	left:697px;
        z-index:2;
      }
      .logo9
      {
			background-image:url('https://cdn.discordapp.com/attachments/649213852654895137/809746520881758280/unknown-removebg-preview_6.png');
        background-size:cover;
        position:absolute;
        height:75px;
        	width:75px;
        	top:380px;
        	left:703px;
        z-index:2;
      }
      .logo10
      {
			background-image:url('https://cdn.discordapp.com/attachments/649213852654895137/809746791104905246/unknown-removebg-preview_9.png');
        background-size:cover;
        position:absolute;
        height:75px;
        	width:75px;
        	top:375px;
        	left:700px;
        z-index:2;
      }
      .logo11
      {
			background-image:url('https://cdn.discordapp.com/attachments/649213852654895137/809746875019165724/unknown-removebg-preview_10.png');
        background-size:cover;
        position:absolute;
        height:75px;
        	width:75px;
        	top:376px;
        	left:700px;
        z-index:2;
      }
      .logo12
      {
			background-image:url('https://cdn.discordapp.com/attachments/649213852654895137/809746968083300352/unknown-removebg-preview_11.png');
        background-size:cover;
        position:absolute;
        height:75px;
        	width:75px;
        	top:380px;
        	left:700px;
        z-index:2;
      }
      .gamelogo
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809782413831569418/Untitled-1.png');
        background-size:cover;
        position:absolute;
        height:300px;
        	width:300px;
        	top:80px;
        	left:230px;
      }
      .mode
      {
			background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809784927209521152/unknown-removebg-preview_1.png');
        background-size:cover;
        position:absolute;
        height:150px;
        	width:200px;
        	top:-30px;
        	left:320px;
        z-index:2;
      }
      .Pink
      {
			background-image:url('https://cdn.discordapp.com/attachments/649213852654895137/809753193792929802/S__36544524-removebg-preview.png');
        background-size:cover;
        position:absolute;
        height:400px;
        	width:300px;
        	top:50px;
        	left:550px;
        animation: matangsai9 2.2s;
        animation-duration: 5s;
        animation-delay:14s;
        opacity:0;
      }
      .anima
      {
        background:url('https://i.gifer.com/ZRPK.gif');
        background-size:cover;
        position:absolute;
        height:250px;
        	width:200px;
        	top:200px;
        	left:-1000px;
        	z-index:2;
        	animation: movee 3s;
        	animation-fill-mode: forwards;
        animation-delay:36s;
      }
      @keyframes movee
      {
  			from {left: -1000px;}
  			to {left: 0px; }
      }
      .anime2
      {
			background-image:url('https://i.gifer.com/1V8t.gif');
        background-size:cover;
        position:absolute;
        height:250px;
        	width:200px;
        	top:200px;
        	left:1000px;
        z-index:2;
        	animation: movee2 3s;
        	animation-fill-mode: forwards;
        animation-delay:36s;
      }
      @keyframes movee2
      {
  			from {left: 1000;}
  			to {left: 530px; }
      }
    </style>
  </head>
  <body>

<center>
    	<div class="grid">
        <div class="gamelogo">
        </div>
        <div class="box11"></div>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box12"></div>
        <div class="box5"></div>
        <div class="box6"></div>
        <div class="box7"></div>
        <div class="box8"></div>
        <div class="box9"></div>
        <div class="box10"></div>
        <div class="PAe"></div>
        <div class="earth"></div>
        <div class="muna"></div>
        <div class="toey"></div>
        <div class="save"></div>
        <div class="pae2"></div>
        <div class="mon"></div>
        <div class="jit"></div>
        <div class="tong"></div>
        <div class="arin"></div>
        <div class="jabont"></div>
        <div class="Pink"></div>
        <div class="container">
          	<div class="text">Prof. Muna</div>
          	<div class="logo1"></div>
          	<div class="gameborder"></div>
  				<div class="skills munahp">100HP</div>
          	<div class="skills munamp">80MP</div>
			</div>
        <div class="container_Toey">
          	<div class="text">Toey Jakarin</div>
          	<div class="logo2"></div>
          	<div class="gameborder"></div>
  				<div class="skills Toeyhp">90HP</div>
          	<div class="skills Toeymp">50MP</div>
			</div>
        <div class="container_Save">
          	<div class="text">Save Chattarin</div>
          	<div class="logo3"></div>
          	<div class="gameborder"></div>
  				<div class="skills Savehp">100HP</div>
          	<div class="skills Savemp">50MP</div>
			</div>
        <div class="container_Pae">
          	<div class="text">Pae Chinatip</div>
          	<div class="logo4"></div>
          	<div class="gameborder"></div>
  				<div class="skills Paehp">120HP</div>
          	<div class="skills Paemp">45MP</div>
			</div>
        <div class="container_Jit">
          	<div class="text">Jit Jitrin</div>
          	<div class="logo5"></div>
          	<div class="gameborder"></div>
  				<div class="skills Jithp">70HP</div>
          	<div class="skills Jitmp">100MP</div>
			</div>
        <div class="container_Arin">
          	<div class="text">Arin Arinnaline</div>
          	<div class="logo6"></div>
          	<div class="gameborder"></div>
  				<div class="skills Arinhp">100HP</div>
          	<div class="skills Arinmp">100MP</div>
			</div>
        <div class="container_P">
          	<div class="text2">Ae Suchatchavee</div>
          	<div class="logo7"></div>
          	<div class="gameborder2"></div>
  				<div class="skills Php">999++HP</div>
          	<div class="skills Pmp">999++MP</div>
        </div>
        <div class="container_Earth">
          	<div class="text2">Earth Nattapong</div>
          	<div class="logo8"></div>
          	<div class="gameborder2"></div>
  				<div class="skills Earthhp">132HP</div>
          	<div class="skills Earthmp">80MP</div>
        </div>
        <div class="container_Pink">
          	<div class="text2">Pink Chompoonuch</div>
          	<div class="logo9"></div>
          	<div class="gameborder2"></div>
  				<div class="skills Pinkhp">60HP</div>
          	<div class="skills Pinkmp">120MP</div>
        </div>
        <div class="container_Mon">
          	<div class="text2">Mon Narit</div>
          	<div class="logo10"></div>
          	<div class="gameborder2"></div>
  				<div class="skills Monhp">80HP</div>
          	<div class="skills Monmp">95MP</div>
        </div>
        <div class="container_Tong">
          	<div class="text2">Tong Jessada</div>
          	<div class="logo11"></div>
          	<div class="gameborder2"></div>
  				<div class="skills Tonghp">95HP</div>
          	<div class="skills Tongmp">50MP</div>
        </div>
        <div class="container_Jabont">
         	<div class="text2">Jabont Chamikorn</div> 
          	<div class="logo12"></div>
          	<div class="gameborder2"></div>
  				<div class="skills Jabonthp">100HP</div>
          	<div class="skills Jabontmp">100MP</div>
        </div>
        <div class="mode"></div>
			<div class="anima"></div>
        <div class="anime2"></div>
        
      	
        
      </div>
      <iframe width="0" height="0" src="https://www.youtube.com/embed/5nyext1folg?autoplay=1"></iframe>
      
    </center>
  </body>
</html>