abc {
  color: hsl(39, 89%, 49%);
  color: hsl(40, 84%, 53%);
  color: hsl(230, 89%, 62%);
  color: hsl(230, 89%, 65%);
  color: hsl(349, 71%, 52%);
  color: hsl(349, 70%, 56%);
  color: hsl(261, 73%, 60%);
  color: hsl(261, 72%, 63%);
  color: hsl(189, 59%, 53%);
  color: hsl(189, 58%, 57%);
  color: hsl(229, 25%, 31%);
  color: hsl(229, 64%, 46%);
  color: hsl(217, 16%, 45%);
  color: hsl(214, 47%, 23%);
  color: hsl(237, 49%, 15%);
}

html,
body {
  background-color: hsl(237, 49%, 15%);
  height: 100%;
  margin: 0px;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.rock-paper-scissors-mainpage {
  width: 60%;
  height: 138px;
  margin: 40px auto;
  border-radius: 5px;
  border: 2px solid hsl(217, 16%, 45%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.header-title {
  background: url(./images/logo.svg) center no-repeat;
  background-size: cover;
  text-indent: -9999px;
  overflow: hidden;
  width: 160px;
  height: 100px;
  position: sticky;
    top: 0px;
    left: 0px;
    /* color: red; */
    /* background-color: #000000; */
    /* width: 60px; */
    /* height: 60px; */
  
}
.header-score {
  background-color: cornsilk;
  width: 20%; 
  height: 100px;
  border-radius: 6px;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;
}

.score-title {
  font-family: 'Barlow Semi Condensed', sans-serif;
  color: hsl(230, 89%, 65%);
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 4px;
}

.score-value {
  font-family: 'Barlow Semi Condensed', sans-serif;
  color: hsl(237, 49%, 15%);
  font-size: 32px;
}


.triangle {
  width: 37%;
  height: 320px;
  margin: 0px auto;
  box-sizing: border-box;
  align-items: center;
  display: flex;
  justify-content: center;
  padding-top: 75px;
}
.icon-container {
  position: relative;
  width: 100%;
  max-width: 350px;
  aspect-ratio: 1 / 1; 
  background-image: url('./images/bg-triangle.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin: 0 auto;
}


.icon1 {
  top: 0%;
  box-shadow: inset -1px 4px 0px 0px lightsteelblue;
  left: -8px;
 
}

.paper-border-color{
  border: 19px solid hsl(230, 89%, 65%);
}
.icon2 {
  top: 0%;
    right: -3%;

  
  box-shadow: inset -1px 4px 0px 0px lightsteelblue;
}
.scissor-border-color{
  border: 19px solid hsl(40, 84%, 53%);
}

.icon3 {
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%);
  
  box-shadow: inset -1px 4px 0px 0px lightsteelblue;
}
.rock-border-color{
  border: 19px solid hsl(349, 70%, 56%);
}

.spacer {
  flex-grow: 10;
}

.button-container {
  display: flex;
  flex-direction: row-reverse;
  margin: 0px auto;
  width: 100%;
  position: relative;
}

button {
  background-color: hsl(237, 49%, 15%);
  width: 86px;
  height: 27px;
  border-radius: 4px;
  border: 2px solid gray;
  color: aliceblue;
  font-family: 'Barlow Semi Condensed', sans-serif !important;
  cursor: pointer;
  margin: 30px 40px;
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.popup-content {
  background: white;
  padding: 20px 30px;
  border-radius: 10px;
  text-align: center;
  max-width: 400px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.close-btn {
  margin-top: 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 50px !important;
  color: hsl(217, 16%, 45%);
  font-weight: 600;
  position: relative;
  top: -16px;
}

.rules-image {
  max-width: 100%;
  height: auto;
  margin-top: 20px;
}

.content {
  display: flex;
  justify-content: space-between;
}

h2 {
  font-family: 'Barlow Semi Condensed', sans-serif;
  color: hsl(237, 49%, 15%);
}


.paper-title{
  font-family: 'Barlow Semi Condensed', sans-serif;
  color: aliceblue;
  position: relative;
  top: 115px;
  font-size: 22px;
  left: 130px;
  word-break: break-word;
}
.rock-title{
  font-family: 'Barlow Semi Condensed', sans-serif;
  color: aliceblue;
  position: absolute;
  top: 331px;
  font-size: 22px;
}
.score-board-title{
  font-family: 'Barlow Semi Condensed', sans-serif !important;
  color: aliceblue;
  position: absolute;
  top: 415px;
  font-size: 30px;
}
.score-button{
  background-color: azure;
  width: 147px;
  height: 31px;
  border-radius: 4px;
  border: 2px solid gray;
  color: hsl(214, 47%, 23%);
  font-family: 'Barlow Semi Condensed', sans-serif !important;
  cursor: pointer;
  margin: 30px 40px;
  font-size: 13px;
  position: absolute;
  top: 458px;
  font-weight: 700;
  
}
/* ========= */
.game-board-container {
    display: flex;
    justify-content: space-between;
    width: 60%;
    height: 300px;
    margin: 0px auto;
}
.you-picked-container {
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.house-picked-container {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
}
.you-picked-container-title
 {
    width: 80%;
    height: 100px;
    margin: 0px auto;
}
.house-picked-container-title{
  width: 100%;
  height: 100px;
  margin: 0px auto; 
}
.you-paper-title {
  font-family: 'Barlow Semi Condensed', sans-serif;
  color: aliceblue;
  position: relative;
  top: -65px;
  font-size: 20px;
  left: 20px;
  word-break: break-word;
}
.houese-rock-title{
  font-family: 'Barlow Semi Condensed', sans-serif;
  color: aliceblue;
  position: relative;
  top: 50px;
  font-size: 19px;
  left: 16px;
}
.score-board-container {
  width: 33.33%;
  display: flex;
  justify-content: center;
  align-content: center;
  position: relative;
  top: -310px !important;
}
 /* ======= */




.my-selected-icon{
  width: 50px;
  height: 50px;
  background-color: antiquewhite
}
.house-selected-icon{
  width: 50px;
  height: 50px;
  background-color: antiquewhite
}
.paper{
  box-shadow: inset -1px 4px 0px 0px lightsteelblue;
  position: relative;
}
.backgroundset {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: white;
  box-shadow: inset -1px 4px 0px lightsteelblue;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}
.commonstyle{
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background-color: white;
  box-shadow: inset -1px 4px 0px lightsteelblue;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px 19px;
}
.rock{
  box-shadow: inset -1px 4px 0px 0px lightsteelblue;
  position: relative;
}
#house{
  position: relative;
  top: -18px;
  font-family: 'Barlow Semi Condensed', sans-serif;
  color: hsl(237, 49%, 15%);
  margin-left: 23px;
  font-weight: 600;
  font-size: 18px;
}
#own{
  position: relative;
  top: -18px;
  font-family: 'Barlow Semi Condensed', sans-serif;
  color: hsl(237, 49%, 15%);
  margin-right: 40px;
  font-weight: 600;
  font-size: 18px;
}
/* .winner {
  box-shadow: inset -1px 4px 0px lightsteelblue, 0 0 0 30px rgb(84 93 87 / 17%), 0 0 0 60px rgb(94 104 88 / 10%), 0 0 0 90px rgb(133 145 135 / 14%);
} */

/* 1. Define keyframes to interpolate your shadows */
@keyframes pulse-winner {
  0% {
    box-shadow:
      inset -1px 4px 0px lightsteelblue,
      0 0 0 1px rgba(84, 93, 87, 0.17),
      0 0 0 2px rgba(94, 104, 88, 0.10),
      0 0 0 3px rgba(133, 145, 135, 0.14);
  }
  20% {
    box-shadow:
      inset -1px 4px 0px lightsteelblue,
      0 0 0 10px rgba(84, 93, 87, 0.17),
      0 0 0 20px rgba(94, 104, 88, 0.10),
      0 0 0 30px rgba(133, 145, 135, 0.14);
  }
  50% {
    box-shadow:
      inset -1px 4px 0px lightsteelblue,
      0 0 0 20px rgba(84, 93, 87, 0.17),
      0 0 0 40px rgba(94, 104, 88, 0.10),
      0 0 0 60px rgba(133, 145, 135, 0.14);
  }
  70% {
    box-shadow:
      inset -1px 4px 0px lightsteelblue,
      0 0 0 30px rgba(84, 93, 87, 0.17),
      0 0 0 60px rgba(94, 104, 88, 0.10),
      0 0 0 90px rgba(133, 145, 135, 0.14);
  }

  100% {
    box-shadow:
      inset -1px 4px 0px lightsteelblue,
      0 0 0 10px rgba(84, 93, 87, 0.17),
      0 0 0 20px rgba(94, 104, 88, 0.10),
      0 0 0 30px rgba(133, 145, 135, 0.14);
  }
}

/* 2. Apply the animation to .winner */
.winner {
  animation: pulse-winner 1.5s step-end infinite;
}


.score-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  order: 2;
}
.declare-score-button{
  color: hsl(237, 49%, 15%);
  width: 60%;
  height: 27px;
  border-radius: 4px;
  background-color: aliceblue;
  font-family: 'Barlow Semi Condensed', sans-serif !important;
  cursor: pointer;
  font-weight: 600;
}
#user{
  font-family: 'Barlow Semi Condensed', sans-serif !important;
  cursor: pointer;
  margin: 26px;
  font-family: 'Barlow Semi Condensed', sans-serif;
  color: hsl(237, 49%, 15%);
  position: relative;
  top: 38px;
}
.item {
  width: 32%;
  min-width: 100px;
  text-align: center;
  padding: 20px;
  background: lightgray;
  margin: 5px;
}
.you-picked-container-challenge img,
.house-picked-container-challenge img {
  width: 50%;
  height: 50%;
}

@media (max-width: 758px){
  .house-picked-container-title{
    width: 100%;
  }
  .you-picked-container,.house-picked-container{
    width: 20%;
    /* margin: 0px auto; */
    padding: 0px 34px;
  }
}
@media (max-width: 987px) {
  .rock-paper-scissors-mainpage {
      width: 80%;
  }
  .header-title{
    
     height: 69px;
  }
  
  .score-board-container{
    display: contents;
    width: 0px;
  }
  .score-button{
    width: 100px;
    margin-top: 6px;
  }
  .houese-rock-title{
    top: 203px;
    font-size: 15px;
    width: 266%;
    left: -14px;
  }
  .you-paper-title{
    top: 114px;
    font-size: 15px;
    width: 200%;
    left: -14px;
  }

.score-board-title {
  top: 387px;
  font-size: 35px;
}

.score-board-container {
  order: 3;
  flex-direction: column;
  margin-top: 398px;
  width: 100%;
  justify-content: center;
  align-items: center;
  position: absolute;
}
button {
  background-color: hsl(237, 49%, 15%);
  width: 86px;
  height: 27px;
  border-radius: 4px;
  border: 2px solid gray;
  color: aliceblue;
  font-family: 'Barlow Semi Condensed', sans-serif !important;
  cursor: pointer;
  margin: 8px 40px;
}


  
  .paper-title{
      font-family: 'Barlow Semi Condensed', sans-serif;
      color: aliceblue;
      position: relative;
      top: 115px;
      font-size: 22px;
      left: 130px;
  }
  .game-board-container {
    display: flex;
    justify-content: space-evenly;
  }

}

@media (max-width: 768px) {
  .you-picked-container,
  .house-picked-container {
    margin: 10px 0;
  }
}
  .score-button,
  .button-container button {
    padding: 8px 16px;
    font-size: 14px;
  }
  button,.score-button{
    display: flex;
    justify-content: center;
    align-items: center;
  } 


/* Desktop view */
@media screen and (min-width: 1154px) {

 
  .houese-rock-title
 {
    
    font-size: 18px;
}


}
@media (max-width: 400px) {
  .rock-paper-scissors-mainpage {
      width:80%;
  }

}
@media (max-width: 500px) {
  .backgroundset{
width: 50px;
height: 50px;
  }
 
  }
  @media (max-width: 985px) {
    .rock{
 top: -17px;
    }
    }
    @media (max-width: 500px) {
      .rock{
   top: 0px;
      }
      }
@media (max-width: 320px) {
  .rock-paper-scissors-mainpage {
      width:100%;
  }
}
@media (max-width: 900px) {
  .icon-container {
    max-width: 90%;
  }
  .button-container {
      justify-content: center;
    }
  
    .rules-button {
      font-size: 14px;
      padding: 8px 16px;
    }
    .content {
      flex-direction: column;
      align-items: center;
    }
  
    .header-title {
      width: 110px;
      height: 70px;
  }
  
  .popup-content{
      top: 0;
      left: 0;
      transform: none;
      width: 100vw;
      height: 100vh;
      max-width: 100%;
      max-height: 100%;
      border-radius: 0;
      padding: 40px 20px;
      box-sizing: border-box;
  }
  .popup {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #fff;
      padding: 20px;
      border-radius: 10px;
      width: 300px;
      position: relative;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    
     h2 {
      margin-bottom: 20px;
      font-size: 24px;
      font-weight: bold;
    }
    .close-btn {
      font-size: 24px;
      background: transparent;
      border: none;
      cursor: pointer;
      order: 3;
      top: -65px;
      bottom: 20px;
      left: 1%;
      transform: translatey(828%);
      font-size: 24px;
      background: transparent;
      border: none;
      cursor: pointer;
    }
    
}



/*  */

.bcontainer{
  width: 60%;
  margin: 0px auto;
}