* {
	 	box-sizing: border-box;
	 }
	body{		
		font-family: Ariel ,Helvetica ,sans-serif;
		font-size: 20px;
		background-color: #f4f5f5;
		margin: 0px;

	}
	a {
		text-decoration: none;
	}
	ul {
		list-style: none;
	}
	.red {
		color: red;
	}
	.green {
		color: rgb(0,255,0);
	}
	.icon {
		width: 150px;
		height: 30px;
		object-fit: cover;
		border-radius: 5px;
	}
	.icon:hover {
		opacity: 0.7;
	}
	.m-20 {
		width: 80vw;
		margin: auto;

	}
	.high {
		color: yellow;
	}
/*header rgb(0,69,138)*/
	header{
		background-color:slateblue;
		background-image: linear-gradient(180deg,navy 0px,steelblue 150px);
		height: 150px;
		margin:0;
		padding: 0;
		min-height: 100px;
		border:none;
		border-bottom:red  5px solid;

		width: 100%;

		z-index: 5;
		/*overflow: hidden;*/
		
	}
	#profile {
		width: 40vw;
		float: left;
	}
	#hm {
		object-fit: cover;
		width: 100px;
		margin:10px 0 0 10px;
	}
	#profile p {
		margin:0 0 0 10px;
		color: rgb(255,200,0);
		font-weight: 600;
	}
	 nav{
		width: max(45%, 385px);
		float: right;
		height:150px;
		margin:0;
		overflow: hidden;
		position: relative;
	}
	nav ul {
		width: 100%;
		height: 30px;
		padding: 0;
		
	}
	nav li{
		display: inline-block;
		text-align: center;
		padding: 10px;
	}
	nav li:hover {
		background-color: olive;
	}

	nav a{
		color: white;
		font-size: 0.8em;
		font-weight: 600;
	}
	#prl {
		visibility: visible;
	}
	#tg {
		width: 100px;
		margin: auto;
		padding: 3px;
		font-size: 0.9em;
		background-color: pink;
		border-radius: 5px;
		position: absolute;
		top: 50px;
		left:50px;
		display: none;
	}
	#tg:hover {
		background-color: greenyellow;
	}
/*end of header*/
	#main {
		min-height:calc(100vh - 200px); 
		background-color: yellowgreen;
		background:url(images/mt4.png);
		background-repeat: no-repeat;
		object-fit: cover;
		background-position: center bottom;
		display: flex;
		flex-direction: row;
		z-index: 4;
		position: relative;
	}
	#main:before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.8);	
		position: absolute;
		top: 0;
		z-index: 1;
		
	}
	#intro p,#right-bar p {
		text-align: center;
	}
	#intro {
		width:calc(100vw - max( 30% , 280px));
		min-width: 470px;
		min-height: 470px;
		padding: 10px;
		color: white;
		z-index: 2;
	}
	#pr1 {
		height: 200px;
		width: 80%;
		margin: auto;
		background-color: olive;
		border:2px solid black;
		border-radius: 5px;
		text-align: left;
		overflow: hidden;
	}


	#intro h4 {
	 	text-align: center;
	 	margin-bottom: 0; 
	 	color: orange;
	 }
	 .link-b{
	 	display:block;
	 	text-align: center;
	 	width: 150px;	
	 	margin: auto;
	 	color: black;
	 	font-size: 18px;
		font-weight: bold;
		border-color: red;
		border-radius: 10px;
		cursor: pointer;
		
	 }
	 .link-b:hover {
		position: relative;
		top:2px;		
	}
	 #intro .link-b {
	 	background-color: rgba(10,200,10,0.9);
	 }
	 #intro .link-b:hover {
	 	background-color:pink;	
	 } 
	
	#fd {
		font-style: oblique;
	}
	/*end of intro*/
	#right-sec {
		width: max(30%,280px);
		min-height: 300px;
		z-index: 2;	
		padding-top: 5px;	
	}
	#right-bar {
		height: 260px;
		min-width:280px;
		background-color: rgba(10,200,200,0.9);
		border-top-left-radius: 100px;
		border-bottom-left-radius: 100px;	
	}
	#right-bar p{
		margin-top: 0;

	}
	.pim {
		margin: 0;
		overflow: hidden;
	}
	#rps {
		margin: 0;
		padding: 0;
		width: 100%;
	}
	#qt {
		color: black;
		background-image: linear-gradient(90deg,rgba(0,0,0,0) 0px, rgba(10,200,100,1) 100px);
		padding: 10px 0;
		margin-top: 10px;
	}
	#qt p{
		margin: 0 0 10px 0;
		padding-left: 10px;
		text-align: center;

	}
	#qt .link-b {
			background-color: rgba(164,0,0,0.9);
	}
	#qt .link-b:hover {
	 	background-color:orange;	
	 }

	 /*scroll bar */
	 #curr {
		height: 50px;
		background-color: black;
		overflow: hidden;
		font-size: 1em;
		
	}
	#clist{
		list-style: none;
		margin: 0;
		display: inline-block;

		padding: 5px 0 0 0;
		position: relative;
		left: 100vw;
		height: 50px;
		animation:slide 15s linear infinite;
	}
	#clist li {	
		display: inline-block;
		width: 130px;
		height: 50px;
		font-size: 1em;
	}
	#clist li span {
		display: block;
		text-align: center;
	}
	#clist li span:first-child {
		color: orange;
		font-weight: bold;
	}
	@keyframes slide {
		0% {
			left:100vw;
		}
		
		to{
			left:var(--listw);
		}
		
	}
	
	/*other sectuions -banner*/
	h3 {
		font-size: 2em;
		font-weight: 700;
		border-bottom: 3px solid teal;
		border-right:  3px solid teal;
		border-bottom-right-radius: 10px;
	}
	#abth {
		width: 280px;
	}
	#conh {
		width: 180px;
	}
	#pro {
		width: 180px;
	}
	/*end of h3*/
	#bd {
		margin: 0 0 5px 0;
		padding-top: 0;
		width: 60px;
		height: 60px;
		background-color: rgba(0,64,128,0.8);
		border-radius:50%;
		overflow: hidden;
		padding-top: 10px;
		z-index: 2;
		position: fixed;
		bottom: 0;
		left:calc(50vw - 50px); 
	}
	#bd:hover  {
		background-color: rgba(0,64,200,0.9);
		
	}
	#bd img {
		transform: rotate(90deg) scale(0.9);
		width: 30px;
		display: block;
		margin:auto;
	}
/*about */

/*custom ea*/
	fieldset {
		border:2px solid blue;
		margin:10px;
		border-radius: 5px;
	}
	legend {
		border:2px solid blue;
		border-radius: 10px;
		padding: 5px;
		background-color: greenyellow;
	}
	#form1 p{
		margin:5px 0;
	}
	#form1 label {
		display: inline-block;
		width: 100px;
	}
	#form1 input {
		font-size: 1em;
		display: inline-block;
		width: 200px;
	}
	label[for]{
		vertical-align: top;
	}
	#form1 textarea,ul textarea {
		display: inline-block;
		min-width:200px;
		max-width: max(400px,60%);
		min-height: 100px;
		max-height: 400px;
	}
	#form1 button {
		background-color: rgba(10,200,10,0.9);
	}
	#form1 button:hover {
		background-color: pink;
		position: relative;
		top:2px;
	}

	/*fieldset 2*/
	.pls {
		display: inline-block;
		width: 120px;
		padding: 3px;
	}
	#twitter{
    color: white;
    font-size: 40px;
    line-height: 50px;
    display: block;
    width: 50px;
    height: 50px;
    background-color: blue;
   	text-align: center;


    
	}
	#twitter:hover {
    	background-color: #55ACEE;
	}
	ul li p:first-child  {
		background-color: lightblue;	
		text-align: center;
	}
	li button{
		background-color: rgba(10,150,250,0.9);
	}
	li button:hover{
		background-color: pink;
		position: relative;
		top:2px;
	}
	#note {
		border: 1px solid green;
		border-radius: 5px;
		padding: 8px;
	}

	footer {
		text-align: center;
		background-color: gray;
		height: 30px;
		padding-top: 5px;
	}
	@media(max-width: 770px){
		.m-20 {
			width: 95vw;
		}
		header {
			height: 175px;
		}
		nav {
			width: 200px;
			height: 100px;
			margin: 40px 10px 0 0;
			border:2px solid gold;
			border-radius: 5px;

			position: absolute;
			top: 0;
			right: 0;
			z-index: 5;
			background-color: steelblue;
			background-image: linear-gradient(180deg,navy 0px,steelblue 150px);
		
		}
		#tg {
			display: block;
		}
		nav ul {
			margin-top: 0;
		}
		nav ul li {
			display: block;
			width: 150px;
			margin: 0 auto 5px auto;
		}

		#main {
			flex-wrap: wrap;
			width: 100vw;
			margin: auto;
			overflow: hidden;
		}
		#intro {
			width: 100vw;
			min-width: 95vw;
		}
		
		#pr1 {
			width: 95%;
			margin: auto;
		}
		#pr1 img {
			display: block;
			object-fit: cover;
			height: 100%;
		}
		#right-sec {
		width: 100vw;
		min-height: 100px;
		}
		#right-bar{
		width: 100%;
		border-radius: 0;
		padding-top: 10px;
		height: 200px;
		}
		.pim:not(#ro){
			display: inline-block;
			width: 40%;
			margin: auto;
		}
		#ro {
			display: inline-block;
			width: 5%;
		}
		#rps{
			display: flex;
			flex-direction: row;
			align-content: space-between;
		}
		#qt {
			background-color: rgba(10,200,100);
		}
		#buyea ul {
			padding: 5px;
		}
		#profile p{
			font-size: 0.9em;
		}
	}