112 lines
1.9 KiB
CSS
112 lines
1.9 KiB
CSS
@import url('https://fonts.googleapis.com/css?family=Lalezar&display=swap');
|
|
|
|
@font-face {
|
|
font-family: "8-bit-pusab";
|
|
|
|
src: url("./assets/fonts/8-bit-pusab.woff") format("woff");
|
|
/* Modern Browsers */
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
* {
|
|
transition: .3s;
|
|
}
|
|
|
|
.card {
|
|
cursor: pointer;
|
|
padding-bottom: 85%;
|
|
width: 100%;
|
|
/* background: rgba(50, 114, 210, 0.5); */
|
|
background: url(assets/textures/crate.png);
|
|
background-repeat: round;
|
|
background-size: cover;
|
|
border-radius: 10px;
|
|
margin: 3px;
|
|
}
|
|
|
|
.card-row {
|
|
width: 100%;
|
|
margin: 3px;
|
|
}
|
|
|
|
#test-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#wrapper {
|
|
height: 100vh;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: 0 auto;
|
|
max-width: 800px;
|
|
}
|
|
|
|
.animations {
|
|
/* background-color: rgb(80, 0, 146); */
|
|
filter: invert(1);
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: 0 0 10px purple;
|
|
}
|
|
|
|
.flexwrap::after {
|
|
position: absolute;
|
|
top: 0px;
|
|
}
|
|
|
|
body {
|
|
background-color: #1d1e22;
|
|
}
|
|
|
|
#start-the-game {
|
|
position: absolute;
|
|
background-color: #44205c65;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 99999;
|
|
top: 0px;
|
|
right: 0px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
/* font-weight: 900; */
|
|
font-size: 9vw;
|
|
font-family: "8-bit-pusab";
|
|
-webkit-text-stroke: 2px rgb(10, 10, 10);
|
|
text-shadow: -5px 14px 20px rgb(0, 0, 0);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.printid:after {
|
|
content: attr(id);
|
|
position: absolute;
|
|
|
|
}
|
|
|
|
.stats {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
font-size: 18px;
|
|
color: #fff;
|
|
font-family: "8-bit-pusab";
|
|
}
|
|
|
|
#container_r {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: row;
|
|
}
|
|
|
|
#health {
|
|
min-width: 170px;
|
|
} |