html {
    font-size:16px;
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
:root{   
    --main-color:rgb(176, 195, 66);
    --main-color-transparent:rgba(96,2,2, 0.25)   ;
    --second-color:rgb(202,162,61);    
    --second-color-transparent:rgba(202,162,61, 0.25);
    
    --dark-color:#242424;            
    --light-color:rgb(245, 245, 245);     
    --code-color:rgb(233, 233, 233); 
    --bad-color:rgb(85, 0, 0);      
    --good-color:rgb(22, 75, 22);        

    --heading-font-face:"leaguespartan-bold-webfont";
    --block-text-font-face:"fira_sansregular";
}
body {
    margin: 0;
    font-family: var(--block-text-font-face), 'times-roman', sans-serif;        
    background: var(--dark-color);
    background: linear-gradient(to right, var(--dark-color) 0%,
                                        rgb(73, 174, 97) 15%,
                                        rgb(0, 0, 0) 65%,
                                        var(--dark-color) 92%); 
    color:var(--dark-color);
    background-image: url('/projectdice/images/pandemic-the-cure.png')
}
h1, h2, h3, h4, h5, h6{
    font-family: var(--heading-font-face), 'Helvetica', sans-serif;
    letter-spacing:px;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;
}
header {
    background-color: var(--main-color);
    color: var(--light-color);
    padding: 20px;
    border-bottom: solid 3px var(--second-color);
    box-shadow: 0px 3px 8px 0px var(--main-color);
    background-image: url('/projectdice/images/Ship-Captain-Crew-Dice-Game.jpg')
}
header h1 {
    margin: 0;
    line-height: 1;
    text-shadow: 1px 1px 0px var(--light-color), 3px 3px 0px var(--dark-color);
    color: rgb(58, 163, 88);
}
#wrapper {
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--light-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 0px 5px 5px black;
}
p, li {
    line-height: 3rem;
    font-size: 1.05rem;
}
a:hover, a:focus{
    border-bottom:solid 3px var(--main-color);
	text-decoration:none;   
}
a:active{
    color:var(--dark-color);
}
table, thead, tbody, td, th{
    border:solid 1px var(--dark-color);
}
table{    
    border-collapse: collapse;
    border: solid 1px;
    margin:10px;
}
.box {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color:rgb(233, 87, 121);
    font-size: 12px;
    text-align: left;
    text-shadow:4px 4px 0 rgba(0,0,0,0.1);
    padding: 5px;
  }
  .box1 { background:#1abc9c;}
  .box2 { background:#3498db;}
  .box3 { background:#9b59b6;}
  .box4 { background:#34495e;}
  .box5 { background:#f1c40f;}
  .box6 { background:#e67e22;}

.box {
    flex: 1;	
}

.box2 {
    flex: 1;
}

.box4{
    flex: 2.5;
}
.target-found {
    background-color: yellow;
    font-weight: bold;
  }
  footer{
    display: flex;
    background-color: #46da90;
    justify-content: space-around;   
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .section {
    margin-bottom: 20px;
  }

  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
  
  .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  #wrapper {
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--light-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 0px 5px 5px black;
}
.container {
    text-align: center;
  }
  
  #productViewer {
    margin-bottom: 20px;
    perspective: 800px;
  }
  
  #productImage {
    max-width: 100%;
    max-height: 400px;
    transition: transform 0.5s;
  }
  
  .rotate {
    animation: rotation 10s linear infinite;
  }
  
  @keyframes rotation {
    from {
      transform: rotateY(0);
    }
    to {
      transform: rotateY(360deg);
    }
  }
  
  .buttons {
    margin-top: 20px;
  }
  
  #popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 1s;
    pointer-events: none;
  }
  
  .popup-content {
    background-color: rgb(89, 184, 235);
    padding: 20px;
    border-radius: 5px;
  }
  
  .popup-content h2 {
    margin-top: 0;
  }
  
  #closeButton {
    margin-top: 10px;
  }

/* Define SASS variables for colors and fonts */
/* Mixin for button styles */
/* General styling */
body {
  margin: 0;
  padding: 0;
  font-family: "Arial", sans-serif;
  background-color: #222222;
  color: #642424;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  color: #b51c1c;
  text-align: center;
}

h2 {
  color: #b51c1c;
}

/* Game board styling */
.game-board {
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

/* Styling for player and computer sections */
.player,
.computer {
  margin-bottom: 20px;
}

.player {
  border-bottom: 1px solid #ccc;
}

/* Styling for dice display */
.dice-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Styling for dice elements */
.dice {
  width: 80px;
  height: 80px;
  background-color: #fff;
  border: 2px solid #ccc;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  color: #000;
  animation: dice-roll 1s ease infinite; /* Apply the dice-roll animation to the dice */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Game info styling */
.game-info {
  margin-bottom: 20px;
}

/* Styling for winner display */
.winner-display {
  font-size: 24px;
  font-weight: bold;
  color: #b51c1c;
  text-align: center;
}

/* Dice animation */
@keyframes dice-roll {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  50% {
    transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
  }
  100% {
    transform: rotateX(720deg) rotateY(1440deg) rotateZ(720deg);
  }
}
/* Styling for buttons */
.roll-button,
.reset-button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  font-family: "Arial", sans-serif;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  color: #fff;
  background-color: #b51c1c;
  transition: background-color 0.3s ease;
  margin-right: 10px;
}
.roll-button:hover,
.reset-button:hover {
  background-color: #f5da42;
}

/* Add specific background images for each dice face */
#player-dice-1 {
  background-image: url("/projectdice/images/asdadas.png");
}

#player-dice-2 {
  background-image: url("/projectdice/images/1194703-200.png");
}

/* Add background images for the computer's dice as well */
#computer-dice-1 {
  background-image: url("/projectdice/images/557px-Dice-3-b.png");
}

#computer-dice-2 {
  background-image: url("/projectdice/images/dice-312623_640.png");
}/*# sourceMappingURL=styles.css.map */

#dice-container {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

.dice {
  width: 100px;
  height: 100px;
  background-size: cover;
  background-repeat: no-repeat;
  transition: opacity 0.5s ease-in-out;
  opacity: 0; /* Start with opacity set to 0 for the fade-in effect */
}

.show {
  opacity: 1; /* Adding the "show" class will trigger the fade-in effect */
}