*
{
	box-sizing: border-box; /* Thank you, toygma from StackOverflowfor helping me with this problem. */
}

#everything
{
	margin-left: auto;
	margin-right: auto;
	width: 700px;
}

#flip-card
{
	background-color: transparent;
	height: 350px;
	width: 700px;
	padding-bottom: 10px;
	perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

.relative_element
{
	position: relative; /* anchor for absolute child */
	display: flex;
	justify-content: center; /* centers the card */
}

#shuffle_btn
{
	position: absolute;
	left: calc(50% - 700px/2 - 70px);
	border-radius: 50%;
	top: 10px;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: 2px solid rgb(51, 153, 255);
	font-size: 17px;
	cursor: pointer;
	user-select: none;
}

#shuffle_btn.enabled
{
	background-color: rgb(51, 153, 255);
}

#reverse_flipcard_btn
{
	position: absolute;
	left: calc(50% - 700px/2 - 70px);
	border-radius: 50%;
	top: 80px;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: 2px solid rgb(51, 153, 255);
	font-size: 17px;
	cursor: pointer;
	user-select: none;
}

#reverse_flipcard_btn.enabled
{
	background-color: rgb(51, 153, 255);
}

/* This container is needed to position the front and back side */
.flip-card-inner
{
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.3s;
	transform-style: preserve-3d;
}

.flip-card-inner.flipped {
	transform: rotateX(180deg);
}

.flip-card-inner.no-anim
{
	transition: none !important;
}



/* Position the front and back side */
#flip-card-front, #flip-card-back
{
	display: flex;
	align-items: center; /* Vertically centers */
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden; /* Safari */
	backface-visibility: hidden;
	
	border-radius: 25px;
	justify-content: center;
	background-color: white;
	color: black;
	font-size: 30px;
	font-family: arial;
	cursor: pointer;
}

/* Style the back side */
#flip-card-back
{
	transform: rotateX(180deg);
}

#flip-card-front.shadow  /* Required. In the script.js file it also says to toggle these so that the shadows of the flashcard do not seem to change.*/
{
	box-shadow:0 3px 12px 0 #acb8c8;
}

#flip-card-back.shadow
{
	box-shadow:0 3px 12px 0 #acb8c8;
}

/*Thank you, https://www.w3schools.com/howto/howto_css_flip_card.asp for the flip card animation. Saved me ton of time!*/

.under_card
{
	flex: 1;
	text-align: center;
	border-radius: 25px;
	height: 50px;
	border: 1px solid grey;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: arial;
	font-size: 30px;
	color: grey;
	cursor: pointer;
	user-select: none;
}

#container_area_under_card
{
	display: flex;
}