:root {
    --color-txt: #ffffff;
    --text-shdw: 0.5vw 0.5vw #6699CC;
}

* {
    font-family: "ArcadeClassic";
}

html {
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: #000000;
}

body {
        width: auto;
        color: white;
        background-image: url(./img/lorenzo-herrera-p0j-mE6mGo4-unsplash.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
}

.megaCont {
    margin: 0 10vw;
}

.text-banner {
    text-align: center;
    background-color: rgb(23, 205, 241);
    padding: 1vw;
    border-radius: 2vw;
    text-shadow: var(--text-shdw);
}

.text-banner h1 {
    margin: 2vw 5vw;
    font-size: 5vw;
    text-align: center;
    text-shadow: var(--text-shdw);
}

.text-banner h2 {
    font-size: 30px;
    text-shadow: var(--text-shdw);
}

.gamecontainer {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}


.topcontainer {
    color: var(--color-txt);
    font-size: xx-large;
}

.playercontainer {
    background-color: rgb(187, 46, 252);    
    border-radius: 2vw;
    text-transform: uppercase;
    font-weight: bold;
    margin: 5vw 0;
    width: 80vw;
    height: 50vw;
    text-align: center;
    padding-top: 5px;
}

.playerinfo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.playerimg {
    margin: 1vw;
    height: 15vw;
    width: 15vw;
}

#user-img {
	margin: 1vw;
	height: 15vw;
	width: 15vw;
}

#rock:hover, #paper:hover, #scissors:hover{
	background-color: white;
	cursor: pointer;
  }

#winner {
	text-shadow: 0.2vw 0.5vw 0px black;
}
    
.playerh1 {
    text-align: center;
    color: var(--color-txt);
}

.choices {
    display: flex;
    justify-content: center;
}

.weapon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	width: 20vw;
    height: 20vw;
    background-color: var(--color-txt);
    border-radius: 30px;
	border: 5px solid #000000;
    transition: all 0.6s ease;
    margin: 2vw;
    border-bottom: 1vw solid;
    border-right: 1px solid;
    transform: translate(-1%, -3%);
    transition: all 0.6s ease;
}

.weapon p {
    font-size: 1rem;
    font-weight: bold;
    color: var(--color-txt);
}

.weapon {
    border: 5px solid #000000;
    border-radius: 30px;
    transition: all 0.6s ease;
}

.weapon img {
    width: 7vw;
    margin: 1vw;
    padding: 1vw;
}

.weapon p {
    margin: 0;
}

.rock {
    margin: 1vw;
    background-color: #f6c7e8;
    box-shadow: 5px 7px 8px #ca6bbb;
}

.paper {
    margin: 1vw;
    background-color: #ace2e2;
    box-shadow: 5px 7px 8px #7ad0dc;
}

.scissors {
    margin: 1vw;
    background-color: #fdd463;
    box-shadow: 5px 7px 8px #f86006;
}

.resetCont {
    text-align: center;
}

#reset {
    background-color: rgb(254, 119, 36);
    border-radius: 10px;
    color: var(--color-txt);
    font-size: 30px;
    text-transform: uppercase;
    margin: 10px;
    padding: 10px;

}

.footer {
    padding: 10px;
}

footer {
    margin: 4vw 5vw;
    padding: 4vw auto;
    border-radius: 2vw;
    background-color: black;
    text-align: center;
}

@media screen and (min-width: 500px) {

	.text-banner {
		text-align: center;
		background-color: rgb(23, 205, 241);
		padding: 0x;
		border-radius: 2vw;
		text-shadow: var(--text-shdw);
	}

	.text-banner h1 {
		margin: 20px 50px;
		font-size: 60px;
		text-align: center;
		text-shadow: var(--text-shdw);
	}

	.gamecontainer {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		width: 100%;
	}

	.playercontainer {
		background-color: rgb(187, 46, 252);    
		border-radius: 2vw;
		text-transform: uppercase;
		font-weight: bold;
		margin: 20px 0;
		width: 500px;
		height: 400px;
		text-align: center;
		padding-top: 5px;
	}

	#user-img {
		margin: 1vw;
		height: 150px;
		width: 150px;
	}

	.playerimg {
		margin: 10px;
		height: 150px;
		width: 150px;
	}

	.weapon {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 150px;
		height: 150px;
		border-radius: 30px;
		border: 5px solid #000000;
		transition: all 0.6s ease;
		margin: 10px;
	}

	.weapon img {
		width: 70px;
		margin: 10px;
		padding: 10px;
	}

	.resetCont {
		text-align: center;
		padding: 0;
		margin: 0;
	}

	footer {
		margin: 30px 5vw;
		padding: 30px auto;
		border-radius: 2vw;
		background-color: black;
		text-align: center;
	}
}