/* CSS Document */

* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
background-image: url("../images/bg_animals_all.png");
background-repeat: repeat;
background-color: lightblue;
max-width: max-content;
margin: auto;
}

#output {
	opacity: 0;
}

.animal-stat-name {
  max-width: 100%;
  width:  1080px;
  float: left;
  font-size: 60px;
	font-style: italic;
	background-color: black;
	padding: 10px 10px 10px 20px;
	color: white;
}

.animal-stat-pic {
  max-width: 100%;
	width: 1080px;
	height: auto;
	display: block;
}

.animal-stat-label {
  width: 160px;
  float: left;
	font-size: 18px;
	background-color: white;
	padding: 5px;
	color: black;
	border: 0.5px solid #E3E3E3;
}

.animal-stat-stat {
  width: 380px;
  float: left;
	font-size: 18px;
	background-color: white;
	padding: 5px;
	color: black;
	border: 0.5px solid #E3E3E3;
}

.animal-stat-special {
	max-width: 100%;
	width: 1080px;
	height: auto;
	display: block;
    float: left;
	font-size: 18px;
	background-color: white;
	padding: 5px;
	color: black;
	border: 0.5px solid #E3E3E3;
}
.animal-stat-box-left {
	max-width: 100%;
	width: 540px;
	float: left;
	vertical-align: top;
}

.animal-stat-box-right {
	max-width: 100%;
	width: 540px;
	float: right;
	vertical-align: top;
}

.animal-stat-box-clear {
	clear: both;
}

.btnreroll {
background-color: black;
background-image: url("../images/teradost_win_icon_fde6823e-71bd-4f9b-8ad6-cd61b12c42d3_400px.png");
background-size: contain; /*puts the background image on top of the button */
background-repeat: no-repeat;
border: none;
border-radius: 20px 20px 20px 20px;
color: white;
max-width: 10vw;
}

.btnpowercard {
background-color: black;
background-image: url("../images/imaginebynadia_round_game_icon_with_the_word_power_in_the_middl_79b9d5ed-da41-4e0c-aaa7-f47f19a42d6c_400px.png");
background-size: contain; /*puts the background image on top of the button */
border: none;
border-radius: 20px 20px 20px 20px;
color: white;
max-width:10vw;
}

.btnloss {
background-color: white;
background-image: url("../images/imaginebynadia_round_game_icon_with_the_word_loss_e3268d93-5916-4882-a012-b8b6d3e3b4cc_400px.png");
background-size: contain; /*puts the background image on top of the button */
border: none;
border-radius: 20px 20px 20px 20px;
color: white;
max-width: 10vw;
}

.btnwin {
background-color: white;
background-image: url("../images/imaginebynadia_round_game_icon_with_the_word_win_92ff33b7-ec1e-4539-9c52-977c13e0e26a_400px.png");
background-size: contain; /*puts the background image on top of the button */
background-repeat: no-repeat;
border: none;
border-radius: 20px 20px 20px 20px;
color: white;
max-width: 10vw;
}

.btnrolldie {
background-color: white;
background-image: url("../images/imaginebynadia_round_game_icon_with_the_word_roll_and_an_immage_d5ea752f-087c-4832-b044-108f70a029be_400px.png");
background-size: contain; /*puts the background image on top of the button */
background-repeat: no-repeat;
border: none;
border-radius: 20px 20px 20px 20px;
color: black;
max-width: 10vw;
}

.btnplaycontrolicons {
background-color: none;
border: none;
color: black;
max-width: 10vw;
opacity: 0; /*keeps the buttons sized to fit the images as background. Serves like an invisible spacer */
}

.btnmenuhack {
background-color: white;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 24px;
}

.buttons-row1 {
  display: flex;
  justify-content: space-between;
	max-width: 100vw;
}

.buttons-row1_description {
  display: flex;
  justify-content: space-between;
	max-width: 100vw;
}

.left-button {
  order: 1; /* Ensures the left button comes first */
}

.right-button {
  order: 2; /* Ensures the right button comes second */
}

@media screen and (max-width: 1080px) {

body {
background-image: none;
}

.animal-stat-name {
  max-width: 100vw;
  font-size: 60px;
}

.animal-stat-pic {
  max-width: 100vw;
}

.animal-stat-label {
  width: 30%;
	font-size: 17px;
}

.animal-stat-stat {
  width: 70%;
	font-size: 17px;
}

.animal-stat-box-left {
	width: 50vw;
}

.animal-stat-box-right {
	width: 50vw;
}
}

@media screen and (max-width: 920px) {

.animal-stat-name {
  font-size: 54px;
}

.animal-stat-label {
	font-size: 17px;
}

.animal-stat-stat {
	font-size: 17px;
}
	
.animal-stat-box-left {
	width: 100vw;
}

.animal-stat-box-right {
	width: 100vw;
}
}

@media screen and (max-width: 800px) {

.animal-stat-name {
  font-size: 50px;
}

.animal-stat-label {
	font-size: 16px;
}

.animal-stat-stat {
	font-size: 16px;
}
}

@media screen and (max-width: 720px) {

.animal-stat-name {
  font-size: 44px;
}

.animal-stat-label {
	font-size: 15px;
}

.animal-stat-stat {
	font-size: 15px;
}
}

@media screen and (max-width: 600px) {

.animal-stat-name {
  font-size: 40px;
}

.animal-stat-label {
	font-size: 14px;
}

.animal-stat-stat {
	font-size: 14px;
}
}

@media screen and (max-width: 540px) {

.animal-stat-name {
  font-size: 36px;
}

.animal-stat-label {
	font-size: 13px;
}

.animal-stat-stat {
	font-size: 13px;
}
}

@media screen and (max-width: 480px) {

.animal-stat-name {
  font-size: 32px;
}

.animal-stat-label {
	font-size: 12px;
}

.animal-stat-stat {
	font-size: 12px;
}
}

@media screen and (max-width: 450px) {

.animal-stat-name {
  font-size: 32px;
}

.animal-stat-label {
	font-size: 15px;
}

.animal-stat-stat {
	font-size: 15px;
}
}

@media screen and (max-width: 420px) {

.animal-stat-name {
  font-size: 32px;
}

.animal-stat-label {
	font-size: 11px;
}

.animal-stat-stat {
	font-size: 11px;
}
}

@media screen and (max-width: 380px) {

.animal-stat-name {
  font-size: 24px;
}

.animal-stat-label {
	font-size: 10px;
}

.animal-stat-stat {
	font-size: 10px;
}
}

@media screen and (max-width: 360px) {

.animal-stat-name {
  font-size: 24px;
}

.animal-stat-label {
	font-size: 9px;
}

.animal-stat-stat {
	font-size: 9px;
}
}