/*
Author: Tram Le - A01269866
Date:   Nov 26, 2023
Project
*/
html {
  box-sizing: border-box;
  background-color: #DDC3A5;
  font-family: "Golos Text", Arial, Helvetica, sans-serif;
  font-size: 1em;
}

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

#wrapper {
  margin: auto;
  width: 100%;
  max-width: 1000px;
  background-color: #fffcf4;
  background-image: url("../images/background.jpg");
  background-size: cover;
  background-position: center center;
  border: 2px solid #a05e03;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

header,
footer {
  width: 100%;
  max-width: 1000px;
  margin: auto;
  padding: 0 50px;
  background-color: #E0A96D;
  text-align: center;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  font-family: "Leckerli One", "Courier New", Courier, sans-serif;
  color: rgb(83, 42, 6);
  font-size: 2rem;
  padding: 15px;
  margin: 0;
  text-align: center;
}

h2 {
  font-size: 30px;
  font-family: 'Kdam Thmor Pro', sans-serif;
  background-image: radial-gradient(circle, #553c9a, #ee4b2b);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  text-align: center;
}

/*Game name*/
#title {
  font-family: "Grenze Gotisch", serif, Arial, Helvetica, sans-serif;
  background-image: radial-gradient(circle, #e415ad, #2b96ee);
  font-size: 50px;
}

h3 {
  color: rgb(146, 12, 156);
  font-size: 1.3rem;
  font-family: "Golos", "Courier New", Courier, sans-serif;
  margin-bottom: 0;
}

p {
  margin: 0;
  padding: 6px 0;
  font-family: "Lobster", Arial, Helvetica, sans-serif;
  color: rgb(30, 40, 82);
}

/*---Footer---*/
footer {
  color: #fafaf4;
  padding: 20px 100px;
}

/*---Image---*/
.user-dice,
.comp-dice {
  max-width: 80px;
}
.dice-icon {
  color: white;
}

#display-text img {
  max-width: 150px;
}

/*---Section---*/
.section {
  width: 250px;
  height: 300px;
  padding: 20px;
  background-color: #5fc5a0;
  border: 4px solid #a05e03;
  margin: 10px;
  border-radius: 5px;
  text-align: center;
  justify-content: space-around;
}

#popup {
  position: fixed; /* Change to fixed for viewport positioning */
  top: 50%; /* Place at vertical center */
  left: 50%; /* Place at horizontal center */
  transform: translate(-50%, -50%); /* Center the box */
  z-index: 1; /* Ensure it's on top of other elements */
  background-color: #fff2d5;
  border: 2px solid #a05e03;
  padding: 20px;
  text-align: center;
  width: 300px;
  height: 360px;
  max-width: 90%;
  border: 4px solid #a05e03;
}

.hidden {
  display: none;
}

/*---Button---*/
#btn-group {
  display: flex;
  flex-direction: column;
  margin: 20px;
}

#closeButton {
  position: absolute;
  padding: 5px;
  cursor: pointer;
  border-radius: 4px;
  top: 10px;
  right: 10px;
  font-size: 20px;
  line-height: 1;
  border: 2px solid #a05e03;
  background-color: #f28f8a;
  color: #211818;
}

#closeButton:hover,
#btn1:hover,
#btn2:hover {
  background: #003078;
}

button {
  color: rgb(255, 255, 255);
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  padding: 15px 32px;
  text-align: center;
  font-size: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 2px solid #f6f7f6;
}

#btn1 {
  background-color: #04AA6D;
}

#btn2 {
  background-color: #34559b;
}

.roll-animation {
  transition: transform 0.5s ease-in-out;
}

/*----------------Media Query------------------------*/
@media (min-width: 700px) {
  .box {
    display: grid;
    grid-template-columns: repeat(2, 250px);
    gap: 20px;
    justify-content: center;
    justify-items: center;
  }
}