html, body {
  margin: 0;
  padding: 0;
  font-size:0;
  height:100%;
  overflow:hidden;
  user-select: none;
  background-size: cover;
  /* background:url(https://i.ibb.co/Q3sdtq4S/Screenshot-230.png); */
}

* {
  user-select: none;
  font-family: 'Roboto';
}

.disabled {
  pointer-events:none;
  opacity:0.4;
}

.wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.container {
  position: relative;
  flex-direction: row;
  background:linear-gradient(rgb(15, 0, 0), rgb(24, 1, 1));
  width:74vh;
  padding:2.8vh;
  border-radius:4.8vh;
  border:0.12vh solid rgb(78, 0, 0);
  overflow:hidden;
  box-shadow:0 0 5.8vh black;
  transition:400ms;
}

.container-title {
  position: relative;
  display:flex;
  color:white;
  font-size:2vh;
  font-family:Gilroy-Heavy;
  text-transform:uppercase;
  align-items: center;
  text-shadow:0 0 2vh rgba(255, 255, 255, 0.4);
}

.container-title > img {
  position: relative;
  height:3.8vh;
  margin-right:0.8vh;
  filter:drop-shadow(-1.2vh 0vh 1.2vh rgba(182, 21, 39, 0.32)) drop-shadow(1.2vh 0vh 1.2vh rgba(255, 255, 255, 0.32));
}

.ticket-image {
  position: absolute;
  z-index:44;
}

.ticket-image.top {
  width:16.0vh;
  top:-5.12vh;
  right:10vh;
  transform:rotate(12deg);
  filter:drop-shadow(0 2vh 4vh rgba(255, 255, 255, 0.288));
}

.ticket-image.bottom {
  width:20vh;
  bottom:-3.8vh;
  left:-4vh;
  transform:rotate(29.8deg);
  filter:drop-shadow(0 0vh 4vh rgba(255, 255, 255, 0.288));
}

.close-button {
  position: relative;
  display:flex;
  float:right;
  width:1.2vh;
  height:1.2vh;
  align-items: center;
  justify-content: center;
  background:#921e2c;
  border:0.2vh solid rgba(255, 255, 255, 0.658);
  filter:drop-shadow(0 0 0.8vh #FA2E458C);
  border-radius:50%;
  padding:0.8vh;
  color:rgb(255, 255, 255);
  font-size:1.2vh;
  text-align: center;
  cursor:pointer;
  transition:200ms;
}

.close-button:hover {
  background:#7a1823;
}

.close-button:active {
  top:0.2vh;
}

.container-item {
  position: relative;
  width:100%;
}

.container-item:last-child {
  margin-left:auto;
}

.container-flex {
  position: relative;
  display:flex;
  gap:4.4vh;
  margin-top:5.8vh;
}

.container-item > p {
  position: relative;
  display:flex;
  justify-content: space-between;
  text-align: left;
  color:white;
  font-size:1.28vh;
  font-weight:bold;
  text-transform: uppercase;
}

.last-winners-list {
  position: relative;
  display:flex;
  flex-direction: column;
  gap:0.8vh;
  /* margin-bottom:12vh; */
}

.last-winners-list > p {
  position: relative;
  font-size:1.2vh;
  color:white;
}

.last-winners-item {
  position: relative;
  display:flex;
}


.last-winners-item > div {
  position: relative;
  display:flex;
  align-items: center;
  justify-content: center;
  width:18vh;
  font-size:1.2vh;
  color:white;
  text-transform: uppercase;
  white-space:nowrap;
  font-weight:bold;
  padding: 1.58vh 1.2vh 1.58vh 1.2vh;
  box-sizing: border-box;
}

.last-winners-item > div > span {
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align: center;
}


.last-winners-item > div:first-child {
  clip-path: polygon(100% 0%, 94% 49.88%, 100% 99.75%, 0% 99.75%, 0% 50%, 0% 0%);
  background-color: rgb(134, 134, 134);
  border-top-left-radius: 0.4vh;
  border-bottom-left-radius: 0.4vh;
  background: rgb(65, 65, 65);
}

.last-winners-item > div:first-child::before {
  content: "";
  top:0;
  left:0;
  position: absolute;
  width:98%;
  inset:0.1vw;

  clip-path: inherit;
  background: #110a0c;
  z-index: -1;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

.last-winners-item > div:last-child {
  clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 5.8% 100%, 0% 50%, 5.8% 0%);
  background-color: hsl(353, 95%, 58%);
  margin-left:-0.2vh;
  border-top-right-radius: 0.4vh;
  border-bottom-right-radius: 0.4vh;
  background: #4d060f;
  box-shadow:0 0 4vh #fa2e4649 inset;
}

.last-winners-item > div:last-child::before {
  content: "";
  top:0;
  left:0;
  position: absolute;
  width:98%;
  inset:0.1vw;
  clip-path: inherit;
  background: #110a0c;
  box-shadow:0 0 4.8vh #fa2e4649 inset;
  z-index: -1;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
}

.right-info-container > p {
  position: relative;
  display:flex;
  justify-content: space-between;
  text-align: left;
  color:white;
  font-size:1.28vh;
  font-weight:bold;
}

.reward-vehicle {
  position: relative;
  display:flex;
  width:100%;
}

.reward-vehicle > div {
  position: relative;
  width:100%;
  height:28vh;
  right:0;
  background:url(images/shine.png);
  background-repeat: no-repeat;
  background-size:cover;
  background-position-y: -5.4vh;
  opacity:0.08;
}

.reward-vehicle > img {
  position: absolute;
  width:100%;
  top:50%;
  transform:translateY(-50%);
  filter:drop-shadow(0 0 1.2vh black);
}

.ticket-amount-box {
  position: relative;
  width:22vh;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  font-size:1.2vh;
  color:white;
  padding:1.2vh;
  border-radius:0.8vh;
  background:#921e2c;
  align-items: center;
  font-weight:bold;
  transition:200ms;
  text-transform: uppercase;
}

.ticket-amount-box > div {
  position: relative;
  width:12vh;
  display:flex;
  gap:0.8vh;
  margin-left:auto;
  background:rgb(0, 0, 0);
  padding:0.28vh;
  justify-content: center;
  align-items: center;
  border-radius:0.4vh;
  text-align: center;
  margin-left:2vh;
}

.ticket-amount-box > div > span {
  width:100%;
}

.ticket-amount-box > div > div {
  position: relative;
  padding:0.28vh;
  border-radius:0.4vh;
  text-align: center;
  cursor:pointer;
  transition:200ms;
}

.ticket-amount-box > div > div:active {
  top:0.12vh;
}

.ticket-amount-box > div > div:first-child {
  background:red;
}

.ticket-amount-box > div > div:first-child:hover {
  background:rgb(136, 0, 0);
}

.ticket-amount-box > div > div:last-child {
  background:rgb(43, 255, 0);
}

.ticket-amount-box > div > div:last-child:hover {
  background:rgb(27, 165, 0);
}

.buy-ticket-button {
  margin-top:2.8vh;
  position: relative;
  display:flex;
  width:22vh;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  font-size:1.2vh;
  color:white;
  padding:1.2vh;
  border-radius:0.8vh;
  background:#921e2c;
  align-items: center;
  font-weight:bold;
  box-shadow:0 0 2vh transparent inset;
  cursor:pointer;
  transition:200ms;
  text-transform: uppercase;
}

.buy-ticket-button:hover {
  background:#7a1823;
}

.buy-ticket-button:active {
  top:0.2vh;
}

.buy-ticket-button > div {
  background:white;
  margin-left:auto;
  color:black;
  padding:0.4vh;
  font-size:1.2vh;
  border-radius:0.4vh;
  font-weight:normal;
  font-family:Gilroy-Heavy;
}

.buy-ticket-button > img:first-of-type {
  position: absolute;
  top:-0.8vh;
  left:-0.8vh;
  transform:rotate(-40deg);
  width:2.8vh;
}

.buy-ticket-button > img:last-of-type {
  position: absolute;
  bottom:-1.28vh;
  right:-1.28vh;
  transform:rotate(40deg);
  width:2.8vh;
}