@import url('https://fonts.googleapis.com/css?family=Acme&display=swap');

@keyframes changeOrder {
  from { z-index: 9;}
  to { z-index: 1; }
}

@keyframes handShake {
  0%,100% { transform: rotate(10deg); }
  50% { transform: rotate(-10deg); }
}

@keyframes handShake2 {
  0%,100% { transform: rotateY(180deg) rotate(10deg); }
  50% { transform: rotateY(180deg) rotate(-10deg); }
}

html, body {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  font-family: Acme, Arial, sans-serif;
   min-height:100%;
  background: 
   linear-gradient(rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%) 
   0 0/100% 200%;
   animation: a 4s linear infinite;
}
@keyframes a {
  to {background-position:0 -200%}
}

form {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

h1 {
  text-align: center;
}

#hands {
  text-align: center;
}

input:checked ~ div .hand {
  animation: none !important;
}

.hand {
  margin: 20px;
  width: 200px;
  height: 200px;
  position: relative;
  transform: rotate(10deg);
  display: inline-block;
  animation: handShake 2s infinite;
}

.hand > div {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid black;
  background: rgb(228, 198, 102);
  transition: all 0.1s;
}

.fist {
  height: 110px;
  left: 40px;
  top: 50px;
  width: 90px;
  border-radius: 20px 0 0 20px;
}

.finger {
  width: 70px;
  height: 30px;
  border-radius: 20px;
  left: 80px;
  transform-origin: 0 50%;
}

.finger-1 { top: 50px; --dif: 0px; }
.finger-2 { top: 78px; left: 84px; --dif: 4px; }
.finger-3 { top: 106px; --dif: 0px; }
.finger-4 { top: 134px; height: 26px; left: 76px; --dif: -8px; }

div.thumb {
  width: 35px;
  height: 70px;
  
  border-radius: 0 20px 20px 20px;
  top: 50px;
  left: 80px;
  border-left: 0 solid;
  box-shadow: -17px 6px 0 -15px black;
}

div.arm {
  width: 22px;
  height: 70px;
  left: 20px;
  top: 70px;
  border: 0;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}

#user-hand {
  transform: rotateY(180deg);
  animation: handShake2 2s infinite;
  position: relative;
}

input[type="radio"] {
  position: absolute;
  top: -1000in;
  left: -1000in;
}

input[id$="scissors"]:checked ~ div #user-hand .finger-1,
input[id^="scissors"]:checked ~ div #computer-hand .finger-1 {
  width: 130px;
  transform:rotate(-5deg);
}

input[id$="scissors"]:checked ~ div #user-hand .finger-2,
input[id^="scissors"]:checked ~ div #computer-hand .finger-2 {
  width: 130px;
  transform:rotate(5deg);
}

input[id$="paper"]:checked ~ div #user-hand .finger-1,
input[id$="paper"]:checked ~ div #user-hand .finger-2,
input[id$="paper"]:checked ~ div #user-hand .finger-3,
input[id$="paper"]:checked ~ div #user-hand .finger-4,
input[id^="paper"]:checked ~ div #computer-hand .finger-1,
input[id^="paper"]:checked ~ div #computer-hand .finger-2,
input[id^="paper"]:checked ~ div #computer-hand .finger-3,
input[id^="paper"]:checked ~ div #computer-hand .finger-4 {
  left: 124px;
  left: calc(124px + var(--dif));
  width: 80px;
  border-left: 0;
  border-radius: 0 20px 20px 0;
}

#rock-rock:checked ~ div h2::before,
#paper-paper:checked ~ div h2::before,
#scissors-scissors:checked ~ div h2::before {
  content: "You Tied!"
}
#rock-paper:checked ~ div h2::before,
#paper-scissors:checked ~ div h2::before,
#scissors-rock:checked ~ div h2::before {
  content: "You Win!"
}
#rock-scissors:checked ~ div h2::before,
#paper-rock:checked ~ div h2::before,
#scissors-paper:checked ~ div h2::before {
  content: "Computer Wins!"
}

#message {
  text-align: center;
  display: none;

}

input:checked ~ #message {
  display: block;
}

#hands {
  display: flex;
  align-items: center;
  justify-content: center;
}

#icons {
  width: 30px;
  height: 200px;
  display: inline-flex;
  flex-direction: column;
  
}

#icons > div {
  flex: 1;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  overflow: hidden;
  position: relative;
}


label:active {
  position:static; 
  margin-left: 60px;
}

label:active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  z-index: 10;
  height: 60px;
}


label {
  animation: changeOrder 0.45s infinite linear;
  background: #f5f5f5;
  border: 1px solid #ccc;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 60px;
  width: 60px;
  line-height: 60px;
  font-size: 2rem;
  position: absolute;
  top: 0;
  left: 0;
  user-select: none;
}

label:nth-of-type(1) { animation-delay: -0.00s; }
label:nth-of-type(2) { animation-delay: -0.15s; }
label:nth-of-type(3) { animation-delay: -0.30s; }





























.glass {
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 15px;
	margin-left: 8px;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 5px;
	border: 2px solid rgba(255, 255, 255, 0.5);
	box-shadow: 5px rgba(27, 68, 201, 0.5);
  }








header {
	position: fixed;
	width: 100%;
	top: 0;
	right: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30px 8%;
	transition: all .55s ease;
	background: transparent;
}

ul{
  margin:0;
  padding:0;
  display:flex;
}


ul li{
  list-style:none;
  margin:0 20px;
  transition:0.5s;
}


ul li a{
  display: block;
  position:relative;
  text-decoration:none;
  padding:5px;
  font-size:18px;
  font-family: sans-serif;
  color:#fff;
  text-transform:uppercase;
  transition:0.8s;
}


ul:hover li a{
  transform:scale(1.5);
  opacity:0.2;
  filter:blur(5px);
}


ul li a:hover{
  transform:scale(2);
  opacity:1;
  filter:blur(0);
  text-decoration:none;
  color:#fff;
}


ul li a:before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:(--main-color);
  transition:0.5s;
  transform-origin:right;
  transform:scaleX(0);
  z-index:-1;
}


ul li a:hover:before{
  transition:transform 0.5s;
  transform-origin:left;
  transform:scaleX(1);
}



 /* ---------------------classes-------------------------*/

.spin{
	transform: rotateX(150deg);
}


.imaje {
	 box-shadow: 0px 0px 6px  #34e7f8;
}


.float {
float: right;
}


.hover456 {
	color: #34e7f8;	
}
.hover456:hover {
	color: #fff;
}


.hover457 {
	color: #34e7f8;	
}
.hover457:hover {
	color: #fff;
}


.white {
	color: #fff;
	text-decoration: none;
}


.7654 {
	color: #34e7f8;
		text-decoration: none;
}


.logo {
	display: flex;
	align-items: center;
	color: var(--text-color);
	font-size: 28px
	font-weight: bold;
}
.logo i {
	color: var(--main-color);
	font-size: 32px;
	margin-right: 5px;
}


.navbar {
	display: flex;
}


.navbar a {
	color: var(--main-color);
	font-size: var(--p-font);
	font-weight: 500;
	margin: 0 30px;
	transition: all .55s ease;
}


.navbar a:hover {
	color: var(-other-color);
}


.navbar a.active {
	color: var(--text-color);
}

	
.header-icons {
	display: flex;
	align-items: center;
	color: #fff;
}


#menu-icon {
	font-size: 35px;
	color: var(--text-color);
	z-index: 10001;
	cursor: pointer;
}


.header-icons i {
	margin-right: 25px;
	font-size: 28px;
	cursor: pointer;
	transition: all .55s ease;
}


.header-icons i:hover {
	transform: translateY(-5px);
	color: var(--main-color);
}


section {
	padding: 0 15%;
}


.home88 {
	position: relative;
	height: 100vh;
	width: 100%;
	align-items: center;
	gap: 2rem;
}

	
.home {
	position: relative;
	height: 100vh;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: center;
	gap: 2rem;
}


.home-text  h1 {
	font-size: var(--h1-font);
	line-height: 1.2;
	margin-bottom: 2px;
}


.home-text  h5 {
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 60px;
}


.home-text  h3 {
	font-size: 40px;
	font-weight: 700;
	letter-spacing: 2px;
	margin-bottom: 70px;
	text-align: letf;
}


.btn {
	display: inline-block;
	padding: 15px 70px;
	font-size: 16px;
	font-weight: 500;
	background: transparent;
	border: 2px solid var(--main-color);
	color: var(--other-color);
	transition: all .55s ease;
}


.btn:hover {
	background: var(--main-color);
	border: 2px solid var(--main-color);
	color: #fff;
	transition: all .22s ease;
	
	   transition: 2s all ease-in-out;
            animation: wave 5s infinite linear;
}


.btn2 {
	display: inline-block;
	padding: 15px 100px;
	font-size: 14px;
	font-weight: 400;
	text-align: top;
	background: transparent;
	border: 2px solid var(--text-color);
	color: var(--other-color);
	transition: all .55s ease;
	height: 40px;
	width: 10px;
}


.btn2:hover {
	background: var(--main-color);
	border: 2px solid var(--main-color);
	color: #fff;
	transition: all .22s ease;
	
	   transition: 2s all ease-in-out;
            animation: wave 5s infinite linear;
}


.home-img img{
	max-width: 100%;
}


.main {
	position: absolute;
	top: 50%;
	left: 8%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2.5rem;
}


.main li img {
	width: 80px;
	height: auto;
	max-width: 100%;
}


.row {
	height: 62px;
	width: 62px;
	border-radius: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--main-color);
	transition: all 1s ease;
	cursor: pointer; 
  width: 300px;
  height: 200px;
  background: #000;
  animation: glowing 45s infinite;
}
@keyframes glowing {
  from {background-color: black;}
  to {background-color: yellow, green;}
}


.row:hover {
	transform: translateX(-8px);
}


.row2 {
}


.row3 {
}


.bottom {
	position: absolute;
	bottom: 35px;
	right: 8%;
	display: flex;
	align-items: center;
	color: var(--text-color);
	font-size: 15px;
	font-weight; 500;
}


.bottom i {
	color: var(--main-color);
	font-size: 25px;
	margin-left: 15px;
	transition: all .55s ease;
}


.bottom i:hover {
	transform: translatey(-8px);
}



 /* ---------------------media------------------------*/

@media (max-width: 1740px) {
	header{
		padding: 14px 2%;
	}
	.main{
		left: 2%;
		transition: .2s;
	}
	.bottom {
		right: 2%;
		transition: .2s;
	}
}


@media (max-width: 1625px) {
	:root{
	--h1-font: 5rem;
	}
}


@media (max-width: 1400px) {
	:root{
		--h1-font: 4rem;
}
	.row{
		height: 60px;
		width: 60px;
	}
	.main li img {
	width: 40px;	
	}
}


@media (max-width: 1150px) {
	section{
		padding: 0 6%;
	}	
}


@media (max-width: 1000px) {
	section{
		padding: 40px 18%;
	}	
		.home {
		height: auto;
		grid-template-columns: 1fr;	
		}
		. home-img {
			text-align: center;
		}
		. home-img img {
			width: 400px;
			height: auto;
			max-width: 100;
		}
		:root{
	--h1-font: 3.5rem;
	}
	.home-text {
		text-align: center;
	}
	.home-text h5{
		margin-bottom: 15px;
	}
	.home-text h3 {
		margin-bottom: 45px;
		font-size: 28px;
	}
	.btn {
		padding: 10px 3px;
		font-size: 14px;
	}
	.bottom {
		display: none;
	}
}


	@media (max-width: 890px) {
	.navbar {
		position: absolute;
		top: 100%;
		right: -200%;
		width: 200px;
		height: 20vh;
		background: var(--main-color);
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: flex-start;
		padding: 20px;
		border-radius: 4px;
		transition: all .55s;		
	}
		.navbar a {	
		display: block;
		margin: 4px 0;
		transition: all .45s ease;
	}
	. navbar a:hover {
		transform: translateY(5px);
		color: var(--text-color);
	}
	.navbar a.active{
	color: var(--text-color);	
	}
	.navbar.open {
		right: 2%; 
	}
}


@media (max-width: 890px) {
	section{
	padding: 100px 18%;
	}	
	.home {
		height: auto;
	}
	.home-img img {
		width: 300px;
		height: auto;
		max-width: 100%;
	}
	:root{
	--h1-font: 3.5rem;
	}
}



 /* ---------------------cursor stuff------------------------*/

.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.col-resize {cursor: col-resize;}
.context-menu {cursor: context-menu;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: grab;}
.grabbing {cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}




 /* ---------------------unused------------------------*/

 /* -----------------------------------

    font-family: 'Poppins', sans-serif;

    font-family: 'Roboto', sans-serif;
	
-----------	
		
	<div id="menu-icon" class="bx bx-menu bx-x">::before
::after</div>	
	
-------	
	
	radial-gradient(50.53% 50.53% at 50.23% 49.47% #414d59 0%, #1d2631 100%);
	
---------
	
		scrollbar-color: black !important;
	
------------------------*/