/*Creates the box the game will be in*/
    #page{
        border: 2px solid #ffd996;
        margin-bottom:2rem;
        margin-left:2rem;
        margin-right:2rem;
        display:grid;
        grid-template-rows: 80% 20%;
        box-sizing: border-box;
        width:auto;
        height: 650px;
    }
/**/

/*Makes it so the bottom half of the grid has a purple background*/
    #bottom-half{
        background-color: #ffd996;
        padding:0.5rem;
    }
/**/


h1{
    text-align: center;
    margin-top:2rem;
    margin-bottom:2rem;
    text-decoration: underline #b496ff;
}

/*Styling for the username input*/
    #submit-data{
        font-weight: bold;
        background-color: #b496ff;
        border:2px solid #533e87;
        border-radius: 3px;
    }

    #username{
        border:2px solid #b496ff;
        border-radius: 3px;
    }

    #submit-data:hover{
        cursor: pointer;
    }
/**/

.starter-animals{
    width:250px;
    height:250px;
}

.starter-animals-grid{
    display:grid;
    grid-template-columns: 30% 30% 30%;
    justify-content: center;
    justify-items: center;
    width:1130px;
}

.start-game-text-desc{
    text-align: center;
}

/*Styling for the stuff that displays the animals' special ability when the their respective buttons are clicked*/
    .tammie-click{
        display: none;
        width:250px;
        height:250px;
        z-index: 1;
        position: fixed;
        background-color: rgba(255, 217, 150, 0.9);
        margin-right:42rem;
        padding:1rem;
    }

    .percy-click{
        display: none;
        width:250px;
        height:250px;
        z-index: 1;
        position: fixed;
        background-color: rgba(255, 217, 150, 0.9);
        padding:1rem;
    }

    .rupert-click{
        display: none;
        width:250px;
        height:250px;
        z-index: 1;
        position: fixed;
        background-color: rgba(255, 217, 150, 0.9);
        margin-left:42rem;
        padding:1rem;
    }
/**/

/*Styling of the buttons to fit the colour scheme*/
    .button-space{
        margin-left:0.5rem;
    }
    #rupert-exit, #percy-exit, #tammie-exit, #opponent-exit-first-match, #tammie-exit-first-match, #percy-exit-first-match, #rupert-exit-first-match, #sure-tammie-yes, #sure-tammie-no, #sure-percy-yes, #sure-percy-no, #sure-rupert-yes, #sure-rupert-no, #items-first-match, #attack-first-match, #exit-attack-order, #rupert-use-ability, #exit-attack-order-second-match, #tammie-exit-second-match, #percy-exit-second-match, #rupert-exit-second-match, #opponent-exit-second-match, #items-second-match, #attack-second-match, #exit-second-match-items-player, #exit-second-match-items-opponent{
        background-color: #b496ff;
        border:2px solid #533e87;
        border-radius: 3px;
        font-weight: bold;
    }

    #tammie-ability, #percy-ability, #rupert-ability, #tammie-select, #percy-select, #rupert-select, #player-special-ability, #opponent-special-ability, #open-attack-order, #lost-first-match-play-next, #lost-first-match-start-over, #first-prize-blue-bow, #first-prize-bucket-hat, #first-prize-crown, #first-prize-heart-sunglasses, #open-attack-order-second-match, #player-special-ability-second-match, #opponent-special-ability-second-match, #opponent-items-second-match, #player-items-second-match, #reset-second-lost, #reset-second-won{
        font-weight: bold;
        background-color: #ffd996;
        border:2px solid #ab7e2e;
        border-radius: 3px;
    }

    /*So that the cursors changes to the pointer when hovering over the buttons*/
        #rupert-exit:hover, #percy-exit:hover, #tammie-exit:hover, #tammie-ability:hover, #percy-ability:hover, #rupert-ability:hover, #tammie-select:hover, #percy-select:hover, #rupert-select:hover, #sure-tammie-yes:hover, #sure-tammie-no:hover, #sure-percy-yes:hover, #sure-percy-no:hover, #sure-rupert-yes:hover, #sure-rupert-no:hover, #opponent-special-ability:hover, #player-special-ability:hover, #tammie-exit-first-match:hover, #percy-exit-first-match:hover, #rupert-exit-first-match:hover, #opponent-exit-first-match:hover, #items-first-match:hover, #exit-attack-order:hover, #open-attack-order:hover, #rupert-use-ability:hover, #lost-first-match-play-next:hover, #lost-first-match-start-over:hover, #first-prize-blue-bow:hover, #first-prize-bucket-hat:hover, #first-prize-crown:hover, #first-prize-heart-sunglasses:hover, #exit-attack-order-second-match:hover, #tammie-exit-second-match:hover, #percy-exit-second-match:hover, #rupert-exit-second-match:hover, #opponent-exit-second-match:hover, #open-attack-order-second-match:hover, #opponent-items-second-match:hover, #player-items-second-match:hover, #player-special-ability-second-match:hover, #opponent-special-ability-second-match:hover, #exit-second-match-items-player:hover, #exit-second-match-items-player, #exit-second-match-items-opponent:hover, #reset-second-lost:hover, #reset-second-won:hover{
            cursor: pointer;
        }
/**/

.sure-tammie, .sure-rupert, .sure-percy{
    font-size: small;
    display:none;
}
.sort{
    text-align: center;
}


/*All of this is the styling for the matches*/
    .first-match-top, .second-match-top{
        display:block;
    }

    .chosen-tammie, .chosen-percy, .chosen-rupert, .first-opponent, .chosen-tammie-order, .chosen-percy-order, .chosen-rupert-order, .first-opponent-order, .chosen-tammie-second-match, .chosen-percy-second-match, .chosen-rupert-second-match, .second-opponent, .chosen-tammie-order-second-match, .chosen-percy-order-second-match, .chosen-rupert-order-second-match, .second-opponent-order{
        width:150px;
        height:150px;
    }

    .first-match-top, .won-screen-first-match-top-flex, .lost-screen-first-match-top-flex, .second-match-top, .won-second-match-top-flex, .lost-second-match-top-flex{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin-bottom: 0.75rem;
    }

    .first-match-text, .second-match-text{
        display:inline-block;
    }

    .first-opponent, .second-opponent{
        transform: scaleX(-1);
    }

    /*This is the health bar and is from week 6 lecture 2's sample code*/
        .health-bar, .health-bar-second-match{
            width: 20rem;
            height: 20px;
            box-sizing: border-box;
            border: 1px solid #CCC;
            border-radius: 20px;
            overflow: hidden;
        }

        .health-bar-background-player, .health-bar-background-opponent, .health-bar-background-player-second-match, .health-bar-background-opponent-second-match{
            height:100%;
            background-color:#d74c07;
            box-shadow:inset 0 0 16px rgb(87, 22, 4);
            width: "100%";
        }
    /**/

    .stats-text, .stats-text-second-match{
        margin-top: 0rem;
        margin-bottom: 0rem;
        text-align: center;
    }

    /*This is the attack bar and is from week 6 lecture 2's sample code*/
        .attack-bar, .attack-bar-second-match{
            width: 20rem;
            height: 20px;
            box-sizing: border-box;
            border: 1px solid #CCC;
            border-radius: 20px;
            overflow: hidden;
        }

        .attack-bar-background-player, .attack-bar-background-opponent, .attack-bar-background-opponent-second-match, .attack-bar-background-player-second-match{
            height:100%;
            background-color:#075ad7;
            box-shadow:inset 0 0 16px rgb(4, 23, 87);
            width: 100%;
        }
    /**/

    #player-animal-name, #opponent-name, #player-animal-name-second-match, #opponent-name-second-match{
        margin-bottom: 0rem;
        margin-top: 0rem;
    }

    /*Styling for the special abilties sections*/
        .tammie-click-first-match, .percy-click-first-match, .rupert-click-first-match, .tammie-click-second-match, .percy-click-second-match, .rupert-click-second-match{
            display:none;
            width:250px;
            height:250px;
            z-index: 1;
            position: fixed;
            background-color: rgba(255, 217, 150, 0.9);
            padding:1rem;
            margin-right:35rem;
        }

        .opponent-click-first-match, .opponent-click-second-match,.second-match-items-opponent{
            display:none;
            width:250px;
            height:250px;
            z-index: 1;
            position: fixed;
            background-color: rgba(255, 217, 150, 0.9);
            padding:1rem;
            margin-left:35rem;
        }

        .second-match-items-player{
            display:none;
            width:250px;
            height:250px;
            z-index: 1;
            position: fixed;
            background-color: rgba(255, 217, 150, 0.9);
            padding:1rem;
            margin-right:35rem;
        }
    /**/

    .attack-order, .attack-order-second-match{
        width:500px;
        height:300px;
        z-index: 1;
        position: fixed;
        background-color: rgba(255, 217, 150, 0.9);
        padding:1rem;
        text-align: center;
        display: none;
    }

    .percy-first, .rupert-first, .tammie-first, .opponent-first, .chosen-tammie-order, .chosen-percy-order, .chosen-rupert-order, .first-opponent-order, .percy-first-second-match, .rupert-first-second-match, .tammie-first-second-match, .opponent-first-second-match, .chosen-tammie-order-second-match, .chosen-percy-order-second-match, .chosen-rupert-order-second-match, .second-opponent-order{
        display: none;
    }

    .first-match-top-exit, .second-match-top-exit{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-bottom: 0.75rem;
    }

    #open-attack-order, #open-attack-order-second-match{
        font-size:large;
        z-index: 1;
    }

    #attack-first-match, #attack-second-match, #items-second-match, #items-first-match{
        margin-left:7rem;
        font-size:4rem;
        margin-right:7rem;
        margin-top:1rem;
    }
/**/

/*All the styling for the win and lose screens after the first match*/
    .won-screen-first-match-top-flex, .lost-screen-first-match-top-flex{
        justify-content:space-evenly;
    }

    #lost-first-match-play-again, #lost-first-match-start-over{
        font-size: large;
        margin-bottom:2rem;
    }

    .won-screen-first-match-top-grid{
        display:grid;
        grid-template-columns: 20% 20% 20% 20%;
        justify-items: center;
        align-items: center;
        column-gap: 1rem;
        justify-content: center;
        text-align: center;
    }

    .first-match-prizes{
        width:100px;
        height:100px;
    }

    .lost-screen-grid{
        display: grid;
        grid-template-columns: 20% 20% 20%;
        justify-items: center;
        align-items: center;
        text-align: center;
        justify-content: center;
        column-gap: 8rem;
    }

    #lost-first-match-start-over, #lost-first-match-play-next{
        margin-top:4rem;
    }
/**/

#next-match-warning{
    font-size:small;
}

.first-match-won-text{
    margin-top:0rem;
    margin-bottom: 0rem;
}

.item-worn-second-match{
    width:100px;
    height:100px;
}