#container {
    width: 1200px;
    height: 750px;
    background-color: #FFF7ED;
    font-family: "Capriola";
    position: relative;
    margin: auto;
    overflow: hidden;
}

.bg-splash-bunny {
    position: absolute;
    width: 1167px;
    height: 1167px;
    z-index: 0;
    background-color: #ffe2e2c6;
    border-radius: 999px;
    filter: blur(10px);
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%);
}

.bg-splash-bear {
    position: absolute;
    width: 1167px;
    height: 1167px;
    z-index: 0;
    background-color: #d4b9a88a;
    border-radius: 999px;
    filter: blur(10px);
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
}

h1{
    text-align: center;
    color: #723A15;
    position: relative;
    z-index: 1;
}

button {
    border-radius: 16px;
    padding: 8px 16px;
    font-family: "Capriola";
}

.top-buttons {
    position: absolute;
    top: 0;
    right: 0;
    padding: 24px;
    display: flex;
    flex-direction: row;
    gap: 8px;
}

#quit {
    border: #a9142a81 solid 2px;
    color: #a9142a;
    font-size: 12px;
    background-color: #FFF7ED;
    z-index: 7;
}

#quit:hover {
    border: #a9142a81 solid 2px;
    color: #a9142a;
    font-size: 12px;
    background-color: #e3c9b6;
    z-index: 7;
    cursor: pointer;
}

#rules {
    border: #0000007a solid 2px;
    color: #000000;
    font-size: 12px;
    background-color: #FFF7ED;
    z-index: 7;
}

#rules:hover {
    border: #0000007a solid 2px;
    color: #000000;
    font-size: 12px;
    background-color: #e3c9b6;
    z-index: 7;
    cursor: pointer;
}

.rolling {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:20px;
}

.rolling button {
    font-size: 24px;
    padding: 16px 32px 16px 32px;
}

.actions {
    display: flex;
    gap: 16px;
}

.dice img {
    filter: drop-shadow(0 8px 12px rgb(192, 143, 134));
}

.passbear {
    border: 4px #723A15 solid;
    color: #723A15;
    background-color: #F9E7DB;
}

.passbear:hover{
    border: 4px #42200a solid;
    color: #42200a;
    background-color: #ae8b8b;
    cursor: pointer;
}

.passbunny {
    border: 4px #E77082 solid;
    color: #E77082;
    background-color: #FFFAF4;
}

.passbunny:hover {
    border: 4px #a34351 solid;
    color: #a34351;
    background-color: #d9b9b9;
    cursor: pointer;
}

.rollbear {
    border: 4px #723A15 solid;
    color: #F9E7DB;
    background-color: #723A15;
}
.rollbear:hover{
    background-color: #42200a;
    border: 4px #42200a solid;
    color: #ae8b8b;
    cursor: pointer;
}

.rollbunny {
    border: 4px #E77082 solid;
    color: #FFFAF4;
    background-color: #E77082;
}
.rollbunny:hover{
    background-color: #a34351;
    border: 4px #a34351 solid;
    color: #d9b9b9;
    cursor: pointer;
}

.bunny {
    position: absolute;
    right:-100px;
    bottom:0;
    z-index: 0;
}

.bear {
    position: absolute;
    left:-100px;
    bottom:0;
    z-index: 0;
}

.bear-points, .bunny-points {
    position: absolute;
    border-radius: 16px;
    padding: 16px 48px 16px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
}

.bear-points {
    border: 4px #723A15 solid;
    background-color: #F9E7DB;
    z-index: 2;
    bottom: 36px;
    left: 360px;
    color: #723A15
}

.bunny-points {
    border: 4px #E77082 solid;
    background-color: #FFFAF4;
    z-index: 2;
    bottom: 36px;
    right: 360px;
    color: #E77082
}

.points {
    font-size: 64px;
    margin:0;
    padding:0;
}

.points-tag {
    font-size: 16px;
    margin:0;
    padding:0;
}


.overlay{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(35, 19, 19, 0.711);
    z-index: 8;
}

.modal {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 36px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 700px;
    background-color: #FFF7ED;
    border-radius: 40px;
    z-index: 9;
    padding: 40px;
}

.modal h1, .modal p{
    margin:0;
    padding: 0;
    color: black;
}

.modal img {
    width: 60px;
    height: auto;
}

#start {
    font-size: 24px;
    padding: 16px 32px 16px 32px;
    border: 4px #E77082 solid;
    color: #FFFAF4;
    background-color: #E77082;
    display: inline-block;
    align-self: center;
}
#start:hover{
    background-color: #a34351;
    border: 4px #a34351 solid;
    cursor: pointer;
}

.rules {
    background-color: #F9E7DB;
    border-radius: 16px;
    margin: auto;
    padding: 24px 80px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rules section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.rules div {
    width: 130px;
}


.winningmodal{
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 36px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 500px;
    background-color: #FFF7ED;
    border-radius: 40px;
    z-index: 9;
    padding: 40px;
    display:none;
}

#restart {
    font-size: 24px;
    padding: 16px 32px 16px 32px;
    border: 4px #E77082 solid;
    color: #FFFAF4;
    background-color: #E77082;
    display: inline-block;
    align-self: center;
}

#restart:hover{
    background-color: #a34351;
    border: 4px #a34351 solid;
    cursor: pointer;
}


.winningmodal h1{
    margin:0;
    padding: 0;
    color: black;
}