1647 lines
30 KiB
CSS
1647 lines
30 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
|
|
|
|
@font-face {
|
|
font-family: Hunters;
|
|
src: url(./font/Hunters.otf);
|
|
font-style: normal;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
box-sizing: content-box;
|
|
user-select: none;
|
|
}
|
|
|
|
body {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-size: cover;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.menuBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
/* display: flex; */
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.invitationMenu {
|
|
position: relative;
|
|
gap: 1.1979vw;
|
|
padding: 1.9271vw 2.3438vw 1.9271vw 2.3438vw;
|
|
align-items: center;
|
|
/* display: flex; */
|
|
display: none;
|
|
flex-direction: column;
|
|
background: radial-gradient(
|
|
78.52% 62.67% at -13.94% 43.18%,
|
|
rgba(0, 163, 255, 0.2) 0%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
)
|
|
/* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
|
|
radial-gradient(
|
|
50% 50% at 50% 50%,
|
|
rgba(3, 8, 16, 0) 0%,
|
|
rgba(3, 8, 16, 0.693) 100%
|
|
),
|
|
rgba(3, 8, 16, 0.9);
|
|
border: 0.1042vw solid #17273e;
|
|
border-radius: 2.5521vw;
|
|
}
|
|
|
|
.invitationMenu::before {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -1;
|
|
display: flex;
|
|
top: -0.4167vw;
|
|
left: -0.4167vw;
|
|
right: -0.4167vw;
|
|
bottom: -0.4167vw;
|
|
border: 0.1563vw solid #203247;
|
|
border-radius: 2.8646vw;
|
|
}
|
|
|
|
.invitationMenu::after {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -1;
|
|
top: -0.9375vw;
|
|
left: -0.9375vw;
|
|
right: -0.9375vw;
|
|
bottom: -0.9375vw;
|
|
opacity: 0.5;
|
|
border: 0.1563vw solid #203247;
|
|
border-radius: 3.2292vw;
|
|
}
|
|
|
|
.menuEffectImg {
|
|
width: 7.0313vw;
|
|
height: 7.0313vw;
|
|
position: absolute;
|
|
left: -2.8563vw;
|
|
top: -2.8521vw;
|
|
z-index: 1;
|
|
transition: 300ms;
|
|
}
|
|
|
|
.menuEffectImg:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.menuInEffectImg {
|
|
width: 15.3125vw;
|
|
height: 17.4479vw;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 0;
|
|
border-radius: 0px 0px 2.5521vw 0px;
|
|
opacity: 0.03;
|
|
}
|
|
|
|
.menuInEffectImg2 {
|
|
width: 19.8958vw;
|
|
height: 16.5625vw;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
opacity: 0.2;
|
|
border-radius: 0px 2.5521vw 0px 0px;
|
|
}
|
|
|
|
.profileImg {
|
|
position: relative;
|
|
width: 2.3958vw;
|
|
height: 2.3958vw;
|
|
border: 0.1042vw solid rgba(0, 0, 0, 0.21);
|
|
border-radius: 3.1488vw;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.profileImg::before {
|
|
content: "";
|
|
position: absolute;
|
|
display: flex;
|
|
top: -0.3083vw;
|
|
left: -0.3083vw;
|
|
right: -0.3083vw;
|
|
bottom: -0.3083vw;
|
|
border: 0.1042vw solid #00a3ff;
|
|
border-radius: 3.1488vw;
|
|
}
|
|
|
|
.profileImg::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: -0.6208vw;
|
|
left: -0.6208vw;
|
|
right: -0.6208vw;
|
|
bottom: -0.6208vw;
|
|
border: 0.0521vw solid rgba(0, 163, 255, 0.23);
|
|
border-radius: 3.1488vw;
|
|
}
|
|
|
|
.topSide {
|
|
z-index: 1;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.profileBox {
|
|
display: flex;
|
|
gap: 0.8333vw;
|
|
align-items: center;
|
|
}
|
|
|
|
.profileName {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 1.25vw;
|
|
line-height: 1.5104vw;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.profileName p {
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 1.0417vw;
|
|
line-height: 1.25vw;
|
|
color: rgba(255, 255, 255, 0.49);
|
|
}
|
|
|
|
.topSide i {
|
|
font-size: 1.6vw;
|
|
color: rgba(255, 255, 255, 0.25);
|
|
}
|
|
|
|
.dicegameTitle {
|
|
z-index: 1;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.9375vw;
|
|
}
|
|
|
|
.dicegameTitle i {
|
|
color: white;
|
|
font-size: 2.3vw;
|
|
}
|
|
|
|
.dicegameTitleText {
|
|
width: 12.2917vw;
|
|
display: flex;
|
|
gap: 0.1042vw;
|
|
flex-direction: column;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-size: 1.0417vw;
|
|
line-height: 1.25vw;
|
|
color: rgba(255, 255, 255, 0.74);
|
|
}
|
|
|
|
.dicegameTitleText p {
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 0.8333vw;
|
|
line-height: 1.0938vw;
|
|
color: rgba(255, 255, 255, 0.58);
|
|
}
|
|
|
|
.menuLine {
|
|
width: 14.3229vw;
|
|
height: 0.0521vw;
|
|
background: rgba(255, 255, 255, 0.09);
|
|
}
|
|
|
|
.roundInputBox,
|
|
.betInputBox {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4688vw;
|
|
z-index: 1;
|
|
}
|
|
|
|
.roundInputTitle,
|
|
.betInputTitle {
|
|
display: flex;
|
|
gap: 0.5167vw;
|
|
align-items: center;
|
|
}
|
|
|
|
.roundInputTitle i,
|
|
.betInputTitle i {
|
|
color: rgba(255, 255, 255, 0.62);
|
|
font-size: 1.2vw;
|
|
}
|
|
|
|
.roundInputTitleText,
|
|
.betInputTitleText {
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 0.9375vw;
|
|
color: rgba(255, 255, 255, 0.62);
|
|
}
|
|
|
|
.custom-select {
|
|
position: relative;
|
|
width: 15.0417vw;
|
|
height: 2.4479vw;
|
|
}
|
|
|
|
.custom-select select {
|
|
cursor: pointer;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding-left: 1vw;
|
|
background: radial-gradient(
|
|
93.09% 93.09% at 50% 57.98%,
|
|
rgba(255, 255, 255, 0.12) 0%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
);
|
|
border: 0.0521vw solid rgba(255, 255, 255, 0.06);
|
|
border-radius: 0.625vw;
|
|
outline: none;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 0.9375vw;
|
|
line-height: 1.1458vw;
|
|
color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.custom-select select option {
|
|
background: rgba(11, 20, 35, 0.95);
|
|
color: rgba(255, 255, 255, 0.53);
|
|
outline: none;
|
|
border: none;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 0.8333vw;
|
|
line-height: 180%;
|
|
}
|
|
|
|
.custom-select select option:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.custom-select select option:checked {
|
|
background: rgba(25, 40, 65, 0.95);
|
|
color: white;
|
|
}
|
|
|
|
.custom-select i {
|
|
color: rgba(255, 255, 255, 0.21);
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 0;
|
|
transform: translateY(-50%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.bet-input {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
|
|
.bet-input input {
|
|
overflow: hidden;
|
|
width: 15.0417vw;
|
|
height: 2.1354vw;
|
|
padding-left: 1vw;
|
|
background: radial-gradient(
|
|
93.09% 93.09% at 50% 57.98%,
|
|
rgba(255, 255, 255, 0.12) 0%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
);
|
|
border: 0.0521vw solid rgba(255, 255, 255, 0.06);
|
|
border-radius: 0.625vw;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 0.9375vw;
|
|
line-height: 1.1458vw;
|
|
color: rgba(32, 218, 106, 0.79);
|
|
}
|
|
|
|
.bet-input input:focus {
|
|
outline: none;
|
|
background: radial-gradient(
|
|
93.09% 93.09% at 50% 57.98%,
|
|
rgba(255, 255, 255, 0.21) 0%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
);
|
|
}
|
|
|
|
.invitationButtonBox {
|
|
display: flex;
|
|
gap: 0.3646vw;
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.sendButton {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 13.5854vw;
|
|
height: 2.2917vw;
|
|
background: radial-gradient(
|
|
129.55% 129.55% at 50% 50%,
|
|
#00a3ff 0%,
|
|
rgba(0, 163, 255, 0) 100%
|
|
);
|
|
border-radius: 0.5729vw 0px 0px 0.5729vw;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 0.9375vw;
|
|
line-height: 1.1458vw;
|
|
color: rgba(0, 0, 0, 0.42);
|
|
gap: 0.4688vw;
|
|
transition: 300ms;
|
|
}
|
|
|
|
.sendButton i {
|
|
font-size: 1vw;
|
|
color: rgba(0, 0, 0, 0.42);
|
|
transition: 300ms;
|
|
}
|
|
|
|
.sendButton:hover {
|
|
cursor: pointer;
|
|
color: black;
|
|
filter: drop-shadow(0px 0px 2.0833vw rgba(2, 129, 202, 0.8));
|
|
}
|
|
|
|
.sendButton:hover i {
|
|
color: black;
|
|
}
|
|
|
|
.cancelButton {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.2917vw;
|
|
height: 2.2917vw;
|
|
background: radial-gradient(
|
|
129.55% 129.55% at 50% 50%,
|
|
#db3030 0%,
|
|
rgba(230, 48, 48, 0) 100%
|
|
);
|
|
border-radius: 0px 0.5729vw 0.5729vw 0px;
|
|
transition: 300ms;
|
|
}
|
|
|
|
.cancelButton i {
|
|
color: rgba(0, 0, 0, 0.41);
|
|
font-size: 1.2vw;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.cancelButton:hover {
|
|
filter: drop-shadow(0px 0px 1.9271vw #cf3033);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cancelButton:hover i {
|
|
color: black;
|
|
animation: shake 0.5s infinite;
|
|
}
|
|
|
|
@keyframes shake {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
25% {
|
|
transform: translateX(-1px);
|
|
}
|
|
50% {
|
|
transform: translateX(1px);
|
|
}
|
|
75% {
|
|
transform: translateX(-1px);
|
|
}
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.inviteAcceptMenu {
|
|
position: relative;
|
|
gap: 1.1979vw;
|
|
padding: 1.9271vw 2.3438vw 1.9271vw 2.3438vw;
|
|
align-items: center;
|
|
/* display: flex; */
|
|
display: none;
|
|
flex-direction: column;
|
|
background: radial-gradient(
|
|
78.52% 62.67% at -13.94% 43.18%,
|
|
rgba(0, 163, 255, 0.2) 0%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
)
|
|
/* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
|
|
radial-gradient(
|
|
50% 50% at 50% 50%,
|
|
rgba(3, 8, 16, 0) 0%,
|
|
rgba(3, 8, 16, 0.693) 100%
|
|
),
|
|
rgba(3, 8, 16, 0.9);
|
|
border: 0.1042vw solid #17273e;
|
|
border-radius: 2.5521vw;
|
|
}
|
|
|
|
.diceGameInfoBox {
|
|
gap: 0.8854vw;
|
|
width: 100%;
|
|
display: flex;
|
|
}
|
|
|
|
.diceGameInfo {
|
|
width: 7.8125vw;
|
|
height: 2.1875vw;
|
|
background: radial-gradient(
|
|
133.33% 133.33% at 50% 50%,
|
|
rgba(255, 255, 255, 0.1) 0%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
);
|
|
border-radius: 0.4688vw;
|
|
display: flex;
|
|
padding-left: 0.6771vw;
|
|
align-items: center;
|
|
gap: 0.5208vw;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 0.8441vw;
|
|
color: rgba(255, 255, 255, 0.68);
|
|
}
|
|
|
|
.diceGameInfo i {
|
|
font-size: 1.25vw;
|
|
color: white;
|
|
}
|
|
|
|
.diceInvitedButton {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
z-index: 987;
|
|
}
|
|
|
|
.diceInvitedAcceptButton {
|
|
gap: 0.3125vw;
|
|
display: flex;
|
|
cursor: pointer;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 11.8333vw;
|
|
height: 1.9271vw;
|
|
background: rgba(45, 201, 126, 0.1);
|
|
border-radius: 0.4688vw;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 0.8328vw;
|
|
color: rgba(255, 255, 255, 0.3);
|
|
transition: all 1s;
|
|
}
|
|
|
|
.diceInvitedAcceptButton:hover {
|
|
background: rgba(45, 201, 126, 0.404);
|
|
}
|
|
|
|
.yKey {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 0.9375vw;
|
|
height: 0.9375vw;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 0.6814vw;
|
|
color: rgba(255, 255, 255, 0.3);
|
|
border: 0.0426vw solid rgba(255, 255, 255, 0.3);
|
|
border-radius: 0.1705vw;
|
|
}
|
|
|
|
.diceInvitedCancelButton {
|
|
display: flex;
|
|
gap: 0.3125vw;
|
|
cursor: pointer;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 5.3125vw;
|
|
height: 1.9271vw;
|
|
background: rgba(202, 72, 72, 0.16);
|
|
border-radius: 0.4688vw;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 0.8328vw;
|
|
color: rgba(255, 255, 255, 0.3);
|
|
transition: all 1s;
|
|
}
|
|
|
|
.diceInvitedCancelButton:hover {
|
|
background: rgba(202, 72, 72, 0.416);
|
|
}
|
|
|
|
.gamePage {
|
|
background-size: cover;
|
|
position: relative;
|
|
padding-top: 1vw;
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: radial-gradient(
|
|
50% 50% at 50% 50%,
|
|
rgba(3, 8, 16, 0) 0%,
|
|
rgba(3, 8, 16, 0.693) 100%
|
|
),
|
|
rgba(3, 8, 16, 0.9);
|
|
}
|
|
|
|
.gameTopSide {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.6583vw;
|
|
}
|
|
|
|
.gameTitleBox {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
animation: shake 0.8s infinite;
|
|
transition: 300ms;
|
|
}
|
|
|
|
.gameTitleBox:hover {
|
|
scale: 1.05;
|
|
}
|
|
|
|
.gameTitle {
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 2.6373vw;
|
|
line-height: 100%;
|
|
background: linear-gradient(90deg, #00a3ff 51.81%, #c03d3d 52.09%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-fill-color: transparent;
|
|
text-align: center;
|
|
}
|
|
|
|
.gameTitle p {
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 1.6748vw;
|
|
line-height: 100%;
|
|
background: #ffffff;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-fill-color: transparent;
|
|
text-align: center;
|
|
}
|
|
|
|
.gameTitleImg {
|
|
left: -1vw;
|
|
top: -5vw;
|
|
position: absolute;
|
|
width: 7.0313vw;
|
|
height: 7.0313vw;
|
|
transform: rotate(30deg);
|
|
}
|
|
|
|
.gameDescription {
|
|
width: 31.3542vw;
|
|
color: white;
|
|
display: flex;
|
|
gap: 0.3125vw;
|
|
flex-direction: column;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 1.0417vw;
|
|
line-height: 117%;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.gameDescription p {
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 1.0417vw;
|
|
line-height: 117%;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.62);
|
|
}
|
|
|
|
.gameCenterSide {
|
|
display: flex;
|
|
gap: 6.7708vw;
|
|
}
|
|
|
|
.gameInfoSide {
|
|
margin-top: 2.9688vw;
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3.125vw;
|
|
}
|
|
|
|
.gameInfoBox {
|
|
display: flex;
|
|
gap: 0.9896vw;
|
|
}
|
|
|
|
.gameInfoRound {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 0.6771vw;
|
|
padding-left: 1.25vw;
|
|
width: 10.4688vw;
|
|
height: 3.75vw;
|
|
background: radial-gradient(
|
|
117.22% 117.22% at 50% 50%,
|
|
rgba(255, 255, 255, 0.06) 0%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
);
|
|
border-radius: 1.3542vw 0px 0px 1.3542vw;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 1.0417vw;
|
|
line-height: 117%;
|
|
color: rgba(255, 255, 255, 0.68);
|
|
}
|
|
|
|
.gameInfoRound:hover {
|
|
background: radial-gradient(
|
|
117.22% 117.22% at 50% 50%,
|
|
rgba(255, 255, 255, 0.09) 0%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
);
|
|
}
|
|
|
|
.gameInfoRound i {
|
|
color: white;
|
|
font-size: 1.85vw;
|
|
}
|
|
|
|
.gameInfoBet {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.7292vw;
|
|
padding-left: 1.25vw;
|
|
width: 12.8125vw;
|
|
height: 3.75vw;
|
|
background: radial-gradient(
|
|
117.22% 117.22% at 50% 50%,
|
|
rgba(255, 255, 255, 0.05) 0%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
);
|
|
border-radius: 0px 1.3542vw 1.3542vw 0px;
|
|
font-size: 1.85vw;
|
|
color: #40dc75;
|
|
}
|
|
|
|
.gameInfoBet:hover {
|
|
background: radial-gradient(
|
|
117.22% 117.22% at 50% 50%,
|
|
rgba(255, 255, 255, 0.09) 0%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
);
|
|
}
|
|
|
|
.gameInfoBetText {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 0.9375vw;
|
|
line-height: 1.1458vw;
|
|
color: rgba(255, 255, 255, 0.83);
|
|
}
|
|
|
|
.gameInfoBetText p {
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 1.0417vw;
|
|
line-height: 117%;
|
|
color: #40dc75;
|
|
}
|
|
|
|
.gameDiceTimeBox {
|
|
gap: 3.5417vw;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.single-chart {
|
|
width: 12.5vw;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.circular-chart {
|
|
display: block;
|
|
margin: 0.5208vw auto;
|
|
max-width: 80%;
|
|
max-height: 13.0208vw;
|
|
}
|
|
|
|
.circle-bg {
|
|
fill: none;
|
|
stroke: rgba(255, 255, 255, 0.09);
|
|
stroke-width: 1.2;
|
|
}
|
|
|
|
.circle {
|
|
fill: none;
|
|
stroke-width: 1.2;
|
|
stroke-linecap: round;
|
|
transition: all 1s ease-in-out;
|
|
}
|
|
/*
|
|
#animpath{
|
|
transition: all 4s ease-in-out;
|
|
} */
|
|
|
|
@keyframes progress {
|
|
0% {
|
|
stroke-dasharray: 0 100;
|
|
}
|
|
}
|
|
|
|
.circular-chart.orange .circle {
|
|
stroke: white;
|
|
}
|
|
|
|
.percentage {
|
|
fill: white;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 0.32em;
|
|
text-anchor: middle;
|
|
}
|
|
|
|
.percentage2 {
|
|
text-anchor: middle;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 0.2em;
|
|
fill: rgba(255, 255, 255, 0.32);
|
|
}
|
|
|
|
.rollDice {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 3.5417vw;
|
|
height: 3.5417vw;
|
|
background: radial-gradient(
|
|
94.12% 94.12% at 50% 50%,
|
|
rgba(255, 255, 255, 0.1) 0%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
);
|
|
border-radius: 0.5208vw;
|
|
}
|
|
|
|
.rollDice {
|
|
color: white;
|
|
font-size: 2.3vw;
|
|
}
|
|
|
|
.gameInfoSideBottom {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.2vw;
|
|
}
|
|
|
|
.nextArrowBox {
|
|
display: flex;
|
|
gap: 1.1458vw;
|
|
align-items: center;
|
|
}
|
|
|
|
.fa-arrow-left-long {
|
|
font-size: 2.4vw;
|
|
color: #00a3ff;
|
|
opacity: 0.12;
|
|
}
|
|
|
|
.fa-arrow-right-long {
|
|
font-size: 2.4vw;
|
|
color: #d14242;
|
|
}
|
|
|
|
.roundSay {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 3.9583vw;
|
|
height: 1.4063vw;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 1.4583vw;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 0.7292vw;
|
|
color: rgba(255, 255, 255, 0.35);
|
|
}
|
|
|
|
.blueteam {
|
|
background: #00a3ff;
|
|
}
|
|
|
|
.redteam {
|
|
background: #ce4e4e;
|
|
}
|
|
|
|
.teamBox {
|
|
margin-top: 6.5vw;
|
|
position: relative;
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.teamProfile {
|
|
position: relative;
|
|
width: 5.9896vw;
|
|
height: 5.9896vw;
|
|
background-size: cover;
|
|
border-radius: 3.8021vw;
|
|
}
|
|
|
|
.teamProfile::before {
|
|
content: "";
|
|
position: absolute;
|
|
display: flex;
|
|
top: -0.5208vw;
|
|
left: -0.5208vw;
|
|
right: -0.5208vw;
|
|
bottom: -0.5208vw;
|
|
border: 0.0521vw solid #00a3ff;
|
|
border-radius: 3.8021vw;
|
|
}
|
|
|
|
.teamProfileName {
|
|
margin-top: 1.1458vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.1563vw;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
font-size: 1.3542vw;
|
|
line-height: 117%;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.teamProfileName p {
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 1.25vw;
|
|
line-height: 117%;
|
|
color: rgba(255, 255, 255, 0.47);
|
|
}
|
|
|
|
.teamProgressBar {
|
|
margin-top: 2.3958vw;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.progressBar {
|
|
padding: 0.2083vw;
|
|
display: flex;
|
|
width: 14.4271vw;
|
|
background: radial-gradient(
|
|
97.01% 97.01% at 50% 50%,
|
|
rgba(255, 255, 255, 0.06) 0%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
);
|
|
border: 0.0521vw solid rgba(255, 255, 255, 0.04);
|
|
border-radius: 0.1042vw;
|
|
}
|
|
|
|
.progress {
|
|
position: relative;
|
|
width: 50%;
|
|
height: 0.2604vw;
|
|
border-radius: 0.1042vw;
|
|
transition: 300ms;
|
|
}
|
|
|
|
.progress::after {
|
|
content: "\00a0";
|
|
display: block;
|
|
width: 0.625vw;
|
|
height: 0.625vw;
|
|
position: absolute;
|
|
top: -0.15vw;
|
|
right: 0;
|
|
background: #d9d9d9;
|
|
border-radius: 2.3438vw;
|
|
}
|
|
|
|
.progress-bar::after span {
|
|
content: "%40";
|
|
position: absolute;
|
|
top: -1.0417vw;
|
|
right: 0;
|
|
font-size: 0.7292vw;
|
|
font-weight: bold;
|
|
color: white;
|
|
}
|
|
|
|
.progress-text {
|
|
position: absolute;
|
|
top: 1.2vw;
|
|
right: -0.5vw;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-size: 1.2vw;
|
|
line-height: 90%;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.teamRoundDiceBoxs {
|
|
margin-top: 3.3333vw;
|
|
display: flex;
|
|
gap: 0.7292vw;
|
|
}
|
|
|
|
.teamRoundDiceBox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.2083vw;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 0.7292vw;
|
|
line-height: 117%;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.teamRoundDice {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.3958vw;
|
|
height: 2.3958vw;
|
|
background: radial-gradient(
|
|
117.86% 117.86% at 50% 50%,
|
|
rgba(255, 255, 255, 0.06) 0%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
);
|
|
border: 0.0521vw solid rgba(255, 255, 255, 0.02);
|
|
border-radius: 0.4688vw;
|
|
}
|
|
|
|
.teamRoundDice i {
|
|
font-size: 1.8vw;
|
|
color: white;
|
|
}
|
|
|
|
.redteamProfile {
|
|
position: relative;
|
|
width: 5.9896vw;
|
|
height: 5.9896vw;
|
|
background-size: cover;
|
|
border-radius: 3.8021vw;
|
|
}
|
|
|
|
.redteamProfile::before {
|
|
content: "";
|
|
position: absolute;
|
|
display: flex;
|
|
top: -0.5208vw;
|
|
left: -0.5208vw;
|
|
right: -0.5208vw;
|
|
bottom: -0.5208vw;
|
|
border: 0.0521vw solid #ce4e4e;
|
|
border-radius: 3.8021vw;
|
|
}
|
|
|
|
.teamBgEffect {
|
|
position: absolute;
|
|
width: 8.4375vw;
|
|
height: 8.4375vw;
|
|
opacity: 0.7;
|
|
filter: blur(158.824px);
|
|
}
|
|
|
|
.gameBottomSide {
|
|
gap: 2.4479vw;
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.gameButtonDescription {
|
|
width: 24.8438vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.3646vw;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-size: 1.1458vw;
|
|
line-height: 117%;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.74);
|
|
}
|
|
|
|
.gameButtonDescription p {
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 0.9375vw;
|
|
line-height: 117%;
|
|
text-align: center;
|
|
|
|
color: rgba(255, 255, 255, 0.63);
|
|
}
|
|
|
|
.gameButtonBox {
|
|
display: flex;
|
|
gap: 0.3646vw;
|
|
}
|
|
|
|
.gameRollDiceButton {
|
|
gap: 0.4604vw;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 17.8125vw;
|
|
height: 2.8646vw;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-radius: 0.7292vw;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 1.1458vw;
|
|
line-height: 117%;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.47);
|
|
transition: 300ms;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.gameRollDiceButtonPassive {
|
|
gap: 0.4604vw;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 17.8125vw;
|
|
height: 2.8646vw;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border-radius: 0.7292vw;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 1.1458vw;
|
|
line-height: 117%;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.47);
|
|
transition: 300ms;
|
|
}
|
|
|
|
.gameRollDiceButton i {
|
|
transition: 300ms;
|
|
font-size: 1.35vw;
|
|
color: rgba(255, 255, 255, 0.22);
|
|
}
|
|
|
|
.gameRollDiceButton:hover {
|
|
background: #00a3ff;
|
|
font-weight: 500;
|
|
color: black;
|
|
box-shadow: 0px 0px 5vw rgba(0, 163, 255, 0.3);
|
|
}
|
|
|
|
.gameRollDiceButton:hover i {
|
|
color: black;
|
|
}
|
|
|
|
.gameLeaveButton {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.8646vw;
|
|
height: 2.8646vw;
|
|
background: rgba(202, 69, 69, 0.29);
|
|
border-radius: 0.7292vw;
|
|
transition: 300ms;
|
|
}
|
|
|
|
.gameLeaveButton i {
|
|
font-size: 1.2vw;
|
|
color: rgba(255, 255, 255, 0.2);
|
|
transition: 300ms;
|
|
}
|
|
|
|
.gameLeaveButton:hover {
|
|
cursor: pointer;
|
|
background: #ca4545;
|
|
box-shadow: 0px 0px 5.125vw rgba(221, 48, 62, 0.5);
|
|
}
|
|
|
|
.gameLeaveButton:hover i {
|
|
color: black;
|
|
}
|
|
|
|
.gamepagebgeffect {
|
|
width: 56.4063vw;
|
|
height: 25.625vw;
|
|
position: absolute;
|
|
top: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.gamepageeffect1 {
|
|
width: 52.7604vw;
|
|
height: 45.8854vw;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.gamepageeffect2 {
|
|
width: 52.7604vw;
|
|
height: 45.8854vw;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.queueNotify {
|
|
gap: 0.4688vw;
|
|
padding-left: 0.8854vw;
|
|
align-items: center;
|
|
top: 1.9792vw;
|
|
left: 0;
|
|
width: 16.9271vw;
|
|
height: 2.3438vw;
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(0, 163, 255, 0.06) 0%,
|
|
rgba(0, 163, 255, 0) 100%
|
|
);
|
|
position: absolute;
|
|
display: none;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 17px;
|
|
|
|
line-height: 117%;
|
|
color: rgba(255, 255, 255, 0.37);
|
|
}
|
|
|
|
.queueNotify i {
|
|
font-size: 1vw;
|
|
color: rgba(255, 255, 255, 0.42);
|
|
}
|
|
|
|
.gameWonSide,
|
|
.gameDrawSide,
|
|
.gameLoseSide {
|
|
margin-top: 4.7917vw;
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.gameWonText {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 1.1448vw;
|
|
line-height: 90%;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.59);
|
|
}
|
|
|
|
.gameWonText p {
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 2.9586vw;
|
|
line-height: 110%;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
color: #40dc75;
|
|
}
|
|
|
|
.gameWonDescription {
|
|
width: 23.6703vw;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 1.0417vw;
|
|
line-height: 117%;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.62);
|
|
}
|
|
|
|
.gameWonSide,
|
|
.gameDrawSide,
|
|
.gameLoseSide i {
|
|
margin-top: 1.3021vw;
|
|
font-size: 6.5vw;
|
|
color: #40dc75;
|
|
}
|
|
|
|
.gameWonPrice {
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-size: 2.2896vw;
|
|
line-height: 117%;
|
|
text-align: center;
|
|
color: #40dc75;
|
|
}
|
|
|
|
.gameWonButton {
|
|
margin-top: 2.0833vw;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 17.8016vw;
|
|
height: 3.0911vw;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border-radius: 2.633vw;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 1.3738vw;
|
|
line-height: 117%;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.37);
|
|
transition: 300ms;
|
|
}
|
|
|
|
.gameWonButton:hover {
|
|
cursor: pointer;
|
|
color: black;
|
|
background: #40dc75;
|
|
}
|
|
|
|
.gameDrawButton {
|
|
margin-top: 2.0833vw;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 17.8016vw;
|
|
height: 3.0911vw;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border-radius: 2.633vw;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 1.3738vw;
|
|
line-height: 117%;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.37);
|
|
|
|
transition: 300ms;
|
|
}
|
|
|
|
.gameDrawButton:hover {
|
|
background: #fff;
|
|
color: black;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.gameLoseButton {
|
|
margin-top: 2.0833vw;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 17.8016vw;
|
|
height: 3.0911vw;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border-radius: 2.633vw;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 1.3738vw;
|
|
line-height: 117%;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.37);
|
|
transition: 300ms;
|
|
}
|
|
|
|
.gameLoseButton:hover {
|
|
background: #cc4d4d;
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* FLEX */
|
|
.gameLeaveConfirm {
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.gameLeaveBox {
|
|
align-items: center;
|
|
padding: 2.0833vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5104vw;
|
|
background: radial-gradient(
|
|
68.26% 100% at 50% 0%,
|
|
rgba(0, 163, 255, 0.102) 0%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
),
|
|
rgba(2, 7, 15, 0.95);
|
|
border: 0.1042vw solid #17273e;
|
|
border-radius: 1.3542vw;
|
|
}
|
|
|
|
.gameLeaveText {
|
|
width: 32.1354vw;
|
|
display: flex;
|
|
gap: 0.9896vw;
|
|
flex-direction: column;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-size: 1.875vw;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.gameLeaveBox p {
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 1.25vw;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.67);
|
|
}
|
|
|
|
.gameLeaveButtonBox {
|
|
gap: 1.0938vw;
|
|
display: flex;
|
|
}
|
|
|
|
.gameLeaveContinueButton {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 13.8021vw;
|
|
height: 2.6563vw;
|
|
background: radial-gradient(
|
|
129.55% 129.55% at 50% 50%,
|
|
rgba(255, 255, 255, 0.13) 0%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
);
|
|
border-radius: 0.625vw;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 1.25vw;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.31);
|
|
transition: 300ms;
|
|
}
|
|
|
|
.gameLeaveContinueButton:hover {
|
|
cursor: pointer;
|
|
color: white;
|
|
background: radial-gradient(
|
|
129.55% 129.55% at 50% 50%,
|
|
rgba(255, 255, 255, 0.2) 0%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
);
|
|
}
|
|
|
|
.gameLeaveAcceptButton {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 265px;
|
|
|
|
height: 2.6563vw;
|
|
background: radial-gradient(
|
|
129.55% 129.55% at 50% 50%,
|
|
#ca3d3d 0%,
|
|
rgba(204, 64, 64, 0) 100%
|
|
);
|
|
border-radius: 0.625vw;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 1.25vw;
|
|
text-align: center;
|
|
color: rgba(0, 0, 0, 0.53);
|
|
transition: 300ms;
|
|
}
|
|
|
|
.gameLeaveAcceptButton:hover {
|
|
cursor: pointer;
|
|
color: black;
|
|
filter: drop-shadow(0px 0px 3.4375vw rgba(205, 49, 50, 1));
|
|
}
|
|
|
|
.notifyPage {
|
|
display: none;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
/* display: flex; */
|
|
justify-content: center;
|
|
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.notifyBoxDenied {
|
|
position: relative;
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 0.9896vw;
|
|
}
|
|
|
|
.notifyBoxDenied svg {
|
|
bottom: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
.notifyBoxSuccess {
|
|
position: relative;
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 0.9896vw;
|
|
}
|
|
|
|
.notifyBoxSuccess svg {
|
|
bottom: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
.notifyTitle {
|
|
width: 12.2917vw;
|
|
gap: 0.2604vw;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 0.8333vw;
|
|
line-height: 117%;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.notifyTitle p {
|
|
font-family: "Barlow";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 0.625vw;
|
|
line-height: 117%;
|
|
color: rgba(255, 255, 255, 0.46);
|
|
}
|
|
|
|
.notifyLine {
|
|
z-index: 1;
|
|
width: 7.2396vw;
|
|
height: 0.1563vw;
|
|
background: #00a3ff;
|
|
}
|
|
|
|
.denied {
|
|
color: #c14646;
|
|
}
|
|
|
|
.inputAmount {
|
|
-webkit-appearance: none;
|
|
}
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
input[type="number"] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
.startGameSide {
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
left: 0;
|
|
top: 0;
|
|
position: absolute;
|
|
background: linear-gradient(
|
|
108deg,
|
|
rgba(0, 163, 255, 0.5) 0%,
|
|
rgba(0, 163, 255, 0.25) 50%,
|
|
rgba(206, 78, 78, 0.25) 50.01%,
|
|
rgba(206, 78, 78, 0.5) 100%
|
|
);
|
|
z-index: 9999;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: 250ms ease-in-out;
|
|
animation: startgame 1s ease-in-out;
|
|
}
|
|
|
|
@keyframes startgame {
|
|
0% {
|
|
opacity: 0;
|
|
background: linear-gradient(
|
|
108deg,
|
|
rgba(0, 163, 255, 0.5) 0%,
|
|
rgba(0, 163, 255, 0.25) 19.79%,
|
|
rgba(84, 128, 182, 0) 48.44%,
|
|
rgba(206, 78, 78, 0.25) 78.13%,
|
|
rgba(206, 78, 78, 0.5) 100%
|
|
);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
background: linear-gradient(
|
|
108deg,
|
|
rgba(0, 163, 255, 0.5) 0%,
|
|
rgba(0, 163, 255, 0.25) 50%,
|
|
rgba(206, 78, 78, 0.25) 50.01%,
|
|
rgba(206, 78, 78, 0.5) 100%
|
|
);
|
|
}
|
|
}
|
|
|
|
.startText {
|
|
font-family: Hunters;
|
|
font-size: 24.1937vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 90%; /* 241.55px */
|
|
background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.53) 100%);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|