@charset "UTF-8";
/* CSS Document */

body{
	background-color: #ABCB51
}

#header{
	background-image: url("img/header.png");
	background-repeat: no-repeat;
	background-size: 800px;
	width: 800px;
	height: 300px;
	margin-left: auto;
	margin-right: auto;
}

#container{
	width: 100%;
	text-align: center;
}

#choise{
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	height: 200px;
}

#left{
	flex-direction: row;
	width: 50%;
	height: 150px;
}

#right{
	flex-direction: row;
	width: 50%;
	height: 150px;
}

#resultContainer{
	flex-direction: column;
	width: 40%;
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
}

#options{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	flex-direction: row;
	text-align: center;
}

h2{
	font-family: "Comic Sans MS";
	color: white;
	font-size: 2em;
}

#resultHeader{
	text-align: center;
	height: 100px;
	line-height: 1em;
	margin: 0px;
}

#top{
	background-image: url("img/top.png");
	background-size: cover;
	width: 400px;
	height: 400px;
	position:absolute;
	top: 0px;
	left: 0px;
	z-index: -10;
}
#bottom{
	background-image: url("img/bottom.png");
	background-size:contain;
	width: 400px;
	height: 400px;
	position: fixed;
	bottom: 0px;
	right: 0px;
	z-index: -10;
}

#paper{
	border: none;
	background-color: rgba(255,255,255,0.00);
	width: 100px;
	height: 100px;
	background-image: url("img/paper.png");
	background-repeat: no-repeat;
	background-size: 100px;
}

#rock{
	border: none;
	background-color: rgba(255,255,255,0.00);
	width: 100px;
	height: 100px;
	background-image: url("img/rock.png");
	background-repeat: no-repeat;
	background-size: 100px;
}

#scissors{
	border: none;
	background-color: rgba(255,255,255,0.00);
	width: 100px;
	height: 100px;
	background-image: url("img/scissors.png");
	background-repeat: no-repeat;
	background-size: 100px;
}

#computer-choice{
	margin-left: auto;
	margin-right: auto;
	width: 100px;
	height: 100px;
	background-image: url("img/none.png");
	background-repeat: no-repeat;
	background-size: 100px;
}

#player-choice{
	margin-left: auto;
	margin-right: auto;
	width: 100px;
	height: 100px;
	background-image: url("img/none.png");
	background-repeat: no-repeat;
	background-size: 100px;
}

.animate{
	animation: comp 1s;
	animation-iteration-count: 3;
}

@keyframes comp {
	0%{
		rotate: 0deg;
	}
	50%{
		rotate: 20deg;
	}
	100%{
		rotate: 0deg;
	}
	
}