:root
{
	box-sizing:border-box;
	margin:0;
	padding:0
}

*,::after,::before
{
	box-sizing:inherit
}

body
{
	background-color:#1B1A23;
	color:#fff;
	margin:0;
	padding:0;
	justify-content:center
}

header
{
	background-image:url(https://www.teamelderblood.com/wp-content/uploads/2022/01/News-header.jpg);
	background-size:cover;
	width:100%;
	height:12rem;
	padding:32px 0
}

.header-title
{
	text-align:left;
	color:#fff;
	width:1350px;
	margin:0 auto
}

.header-title h1
{
	font-size:3.5rem;
	padding:.5rem 0;
	margin:0 1rem;
	width:1350px
}

.header-title h2
{
	font-size:2rem;
	padding:0;
	margin:0 1rem;
	width:85rem
}

.app-container
{
	margin:10px auto;
	display:flex;
	flex-direction:column;
	padding:0 3rem;
	width:80rem;
	margin:0 auto
}

.higher-container
{
	display:flex;
	flex-direction:row
}

.left-higher-container
{
	width:33%;
	padding:1rem 3rem;
	margin-left:4rem;
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	text-align:left;
	justify-content:center
}

#card-img
{
	object-fit:cover;
	z-index:-1;
	position:relative;
	text-align:center;
	max-width:80%;
	margin:0 auto;
	border-radius:1rem
}

.right-higher-container
{
	display:flex;
	flex-direction:column;
	justify-content:space-evenly;
	width:50%;
	padding:1rem 1rem 0 3rem;
	margin-right:4rem
}

.info-cotainer
{
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	width:100%
}

#re-roll
{
	margin:0;
	display:none;
	width:12rem;
	text-align:left
}

#start-button
{
	margin:0;
	width:12rem;
	text-align:left
}

.break
{
	margin-left:1rem
}

.one-info
{
	display:flex;
	flex-direction:row;
	justify-content:left;
	align-items:center;
	width:100%;
	margin:.5rem 0;
	padding:.4rem;
	padding-right:0
}

.check
{
	font-size:.8rem;
	height:1.5rem;
	width:1.5rem;
	margin:0
}

.check:checked
{
	color:#df204d
}

.card-info
{
	width:90%;
	margin-left:1rem;
	font-size:1.5rem;
	font-weight:700
}

.card-info span
{
	color:#df204d;
	visibility:hidden;
	font-weight:700;
	padding-right:1rem
}

.one-info:last-child
{
	margin:0
}

.lower-container
{
	display:flex;
	flex-direction:row
}

.left-lower-container
{
	display:flex;
	flex-direction:column;
	width:33%;
	padding:0 1rem;
	margin-left:4rem;
	text-align:center
}

.left-lower-container .card-info
{
	padding:1rem 0
}

.btn
{
	width:auto;
	padding:.4rem;
	margin:1rem .2rem;
	background-color:#fff;
	color:#1B1A23;
	border:3px solid #fff;
	border-radius:10px;
	font-size:1.2rem;
	font-weight:700
}

.btn:hover
{
	color:#df204d;
	border-color:#df204d;
	transition:all .3s
}

.right-lower-container
{
	display:flex;
	flex-direction:column;
	width:50%;
	padding:0 0 0 3rem;
	margin-right:4rem
}

.right-lower-container .card-info
{
	padding:1rem 0
}

.sending-container
{
	display:flex;
	flex-direction:row;
	text-align:left
}

.sending-container input
{
	width:25rem;
	padding:.5rem;
	margin:1rem 1rem 1rem .5rem;
	background-color:#fff;
	color:#1B1A23;
	border:3px solid #fff;
	border-radius:10px;
	font-size:1.3rem;
	font-weight:700
}

::placeholder
{
	color:#df204d;
	opacity:.5
}

#guess-info
{
	visibility:visible;
	font-weight:bolder;
	font-size:larger
}