407 lines
34 KiB
CSS
407 lines
34 KiB
CSS
body {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
overflow: hidden;
|
|
}
|
|
body:before {
|
|
content: 'click to regenerate';
|
|
position: absolute;
|
|
font-family: Futura;
|
|
font-size: 10px;
|
|
bottom: 5px;
|
|
left: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #151223;
|
|
}
|
|
body.color1 #wrap:before {
|
|
background: radial-gradient(ellipse at top, #ffffff 25%, #deb84d 125%);
|
|
}
|
|
body.color2 #wrap:before {
|
|
background: radial-gradient(ellipse at top, #ffffff 25%, #7d2cac 125%);
|
|
}
|
|
body.color3 #wrap:before {
|
|
background: radial-gradient(ellipse at top, #deb84d 25%, #ffffff 125%);
|
|
}
|
|
body.color4 #wrap:before {
|
|
background: radial-gradient(ellipse at top, #deb84d 25%, #151223 125%);
|
|
}
|
|
body.loading #wrap:before {
|
|
opacity: 0;
|
|
}
|
|
body.loading #wrap .row:before {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
body.loading #wrap .row:nth-of-type(even):before {
|
|
transform: translateX(0);
|
|
}
|
|
body #wrap {
|
|
zoom: 0.75;
|
|
cursor: pointer;
|
|
width: 800px;
|
|
min-width: 800px;
|
|
min-height: 800px;
|
|
height: 800px;
|
|
background: #151223;
|
|
overflow: hidden;
|
|
display: grid;
|
|
grid-template-columns: repeat(1, 1fr);
|
|
grid-template-rows: repeat(5, 1fr);
|
|
grid-column-gap: 0px;
|
|
grid-row-gap: 0px;
|
|
position: relative;
|
|
box-shadow: 0 0 0 20px #fff, 0 0 1px 20.5px #f1eff7, 0 40px 100px -50px #151223;
|
|
}
|
|
body #wrap:before, body #wrap:after {
|
|
content: '';
|
|
pointer-events: none;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
background: radial-gradient(ellipse at top, #ffffff 25%, #deb84d 125%);
|
|
z-index: 15;
|
|
transform: rotate(calc(var(--rotation) * 90));
|
|
mix-blend-mode: overlay;
|
|
opacity: 1;
|
|
transition: opacity 1s ease-in-out;
|
|
}
|
|
body #wrap:after {
|
|
-webkit-mask: url("data:image/png;base64,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");
|
|
}
|
|
body #wrap .row {
|
|
transform-style: preserve-3d;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
z-index: 1;
|
|
background: #151223;
|
|
}
|
|
body #wrap .row:before {
|
|
content: '';
|
|
position: absolute;
|
|
z-index: 10;
|
|
width: 300%;
|
|
left: -75%;
|
|
background: linear-gradient(to right, rgba(255, 255, 255, 0), #151223 25%, #151223 75%, rgba(255, 255, 255, 0));
|
|
height: 105%;
|
|
top: -2.5%;
|
|
transition: 0.5s ease-in-out;
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
body #wrap .row:nth-of-type(1):before {
|
|
transition-delay: 0.05s;
|
|
}
|
|
body #wrap .row:nth-of-type(2):before {
|
|
transition-delay: 0.1s;
|
|
}
|
|
body #wrap .row:nth-of-type(3):before {
|
|
transition-delay: 0.15s;
|
|
}
|
|
body #wrap .row:nth-of-type(4):before {
|
|
transition-delay: 0.2s;
|
|
}
|
|
body #wrap .row:nth-of-type(5):before {
|
|
transition-delay: 0.25s;
|
|
}
|
|
body #wrap .row .rowwrap {
|
|
-webkit-box-reflect: left -1px;
|
|
}
|
|
body #wrap .row:nth-of-type(even) {
|
|
z-index: 9;
|
|
}
|
|
body #wrap .row:nth-of-type(even):before {
|
|
transform: translateX(100%);
|
|
}
|
|
body #wrap .row .rowwrap {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: calc((var(--shift) * 5px) + 50px);
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
grid-template-rows: repeat(1, 1fr);
|
|
grid-column-gap: 0px;
|
|
grid-row-gap: 0px;
|
|
filter: blur(0.5px);
|
|
}
|
|
body #wrap .row * {
|
|
transform-style: preserve-3d;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
}
|
|
body #wrap .row *:before, body #wrap .row *:after {
|
|
transform-style: preserve-3d;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
}
|
|
body #wrap .row:nth-of-type(1) {
|
|
z-index: 1;
|
|
}
|
|
body #wrap .row:nth-of-type(2) {
|
|
z-index: 2;
|
|
}
|
|
body #wrap .row:nth-of-type(3) {
|
|
z-index: 3;
|
|
}
|
|
body #wrap .row:nth-of-type(4) {
|
|
z-index: 4;
|
|
}
|
|
body #wrap .row:nth-of-type(5) {
|
|
z-index: 5;
|
|
}
|
|
body #wrap .row .cell {
|
|
position: relative;
|
|
background: #151223;
|
|
z-index: 0;
|
|
}
|
|
body #wrap .row .cell:nth-of-type(even) {
|
|
transform: scaleX(-1);
|
|
}
|
|
body #wrap .row .cell.class0.eye1 .mask {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 9;
|
|
}
|
|
body #wrap .row .cell.class0.eye1 .mask:before, body #wrap .row .cell.class0.eye1 .mask:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 60px;
|
|
height: 60px;
|
|
background: radial-gradient(circle at center, #151223 5px, #5cbbdd 5px, #207999 15px, #ffffff 10px, #ffffff 20px, #aaaaaa) calc(var(--shift) * 2px) calc(var(--shift) * 2px);
|
|
border-radius: 100%;
|
|
left: calc(50% - 30px);
|
|
bottom: 55px;
|
|
transform: rotate(var(--rotation));
|
|
}
|
|
body #wrap .row .cell.class0.eye1 .mask:before {
|
|
background: linear-gradient(to top, #151223 -50%, rgba(255, 255, 255, 0));
|
|
transform-origin: 25% 100%;
|
|
transform: skewX(-35deg) scaleY(0.75) scaleX(1.5);
|
|
}
|
|
body #wrap .row .cell.class0:nth-of-type(even) .mask {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
box-shadow: inset 0 20px 0 #151223;
|
|
z-index: 9;
|
|
display: block;
|
|
}
|
|
body #wrap .row .cell.class0:nth-of-type(even) + .cell.class2 .mask {
|
|
box-shadow: inset 0 20px 0 #151223;
|
|
left: -20px;
|
|
}
|
|
body #wrap .row .cell.class0:nth-of-type(even) + .cell.class2 .mask:before, body #wrap .row .cell.class0:nth-of-type(even) + .cell.class2 .mask:after {
|
|
margin-left: 20px;
|
|
}
|
|
body #wrap .row .cell.class0:nth-of-type(even) + .class1 .mask:before, body #wrap .row .cell.class0:nth-of-type(even) + .class1 .mask:after, body #wrap .row .cell.class0:nth-of-type(even) + .class3 .mask:before, body #wrap .row .cell.class0:nth-of-type(even) + .class3 .mask:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 40px;
|
|
height: 25px;
|
|
background: #151223;
|
|
left: 70px;
|
|
top: 10px;
|
|
}
|
|
body #wrap .row .cell.class0:nth-of-type(even) + .class1 .mask:after, body #wrap .row .cell.class0:nth-of-type(even) + .class3 .mask:after {
|
|
width: 20px;
|
|
left: 95px;
|
|
top: 25px;
|
|
height: 20px;
|
|
transform: skewY(-45deg);
|
|
}
|
|
body #wrap .row .cell.class0:nth-of-type(even) + .cell .mask {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
box-shadow: inset 0 20px 0 #151223;
|
|
z-index: 9;
|
|
display: block;
|
|
}
|
|
body #wrap .row .cell.class0 .inner:before, body #wrap .row .cell.class2 .inner:before {
|
|
background: linear-gradient(-135deg, #151223 30px, rgba(255, 255, 255, 0) 30px) -40px -2px/80px 80px no-repeat, linear-gradient(-135deg, rgba(255, 255, 255, 0) 30px, #151223 30px) -40px calc(100% + 40px)/80px 80px no-repeat, linear-gradient(to bottom, rgba(255, 255, 255, 0) 80px, #7d2cac 80px) 100% 50%/75% 100% no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 0% 100%/25% 75% no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 0% 0%/25% 75% no-repeat;
|
|
}
|
|
body #wrap .row .cell.class0 .inner:after, body #wrap .row .cell.class2 .inner:after {
|
|
background: linear-gradient(-135deg, #151223 30px, rgba(255, 255, 255, 0) 30px) -40px -2px/80px 80px no-repeat, linear-gradient(-135deg, rgba(255, 255, 255, 0) 30px, #151223 30px) -40px calc(100% + 40px)/80px 80px no-repeat, linear-gradient(to bottom, rgba(255, 255, 255, 0) 80px, #deb84d 80px, #deb84d 120px, #7d2cac 120px) 100% 50%/75% 100% no-repeat, linear-gradient(to bottom, #7d2cac 40px, #151223) 0% 100%/25% 75% no-repeat, linear-gradient(to bottom, #deb84d, #deb84d) 0% 0%/25% 75% no-repeat;
|
|
}
|
|
body #wrap .row .cell.class1 {
|
|
z-index: 1;
|
|
}
|
|
body #wrap .row .cell.class1:before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 20%;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
height: 20px;
|
|
bottom: 0;
|
|
background: #151223;
|
|
z-index: 9;
|
|
}
|
|
body #wrap .row .cell.class2 {
|
|
z-index: 3;
|
|
}
|
|
body #wrap .row .cell.class2:nth-of-type(3n):before, body #wrap .row .cell.class2:nth-of-type(3n):after, body #wrap .row .cell.class2:nth-of-type(3n) .mask {
|
|
transform: translateX(20px);
|
|
}
|
|
body #wrap .row .cell.class2:nth-of-type(3n) + .cell.class2 .mask {
|
|
background: linear-gradient(to top, #151223 -25%, rgba(255, 255, 255, 0) 50%), linear-gradient(to bottom, #151223 40px, rgba(255, 255, 255, 0) 40px), linear-gradient(to left, #7d2cac, #7d2cac);
|
|
}
|
|
body #wrap .row .cell.class2 + .cell.class0, body #wrap .row .cell.class2 + .cell.class2 {
|
|
z-index: 0;
|
|
}
|
|
body #wrap .row .cell.class2 + .cell.class0:before, body #wrap .row .cell.class2 + .cell.class0:after, body #wrap .row .cell.class2 + .cell.class2:before, body #wrap .row .cell.class2 + .cell.class2:after {
|
|
display: none;
|
|
}
|
|
body #wrap .row .cell.class2 + .cell.class0:nth-of-type(odd), body #wrap .row .cell.class2 + .cell.class2:nth-of-type(odd) {
|
|
transform: translateX(40px);
|
|
}
|
|
body #wrap .row .cell.class2 + .cell.class0:nth-of-type(odd) .mask, body #wrap .row .cell.class2 + .cell.class2:nth-of-type(odd) .mask {
|
|
display: none;
|
|
}
|
|
body #wrap .row .cell.class2 + .cell.class0:nth-of-type(odd):nth-of-type(5n), body #wrap .row .cell.class2 + .cell.class2:nth-of-type(odd):nth-of-type(5n) {
|
|
transform: translateX(40px);
|
|
}
|
|
body #wrap .row .cell.class2 + .cell.class0:nth-of-type(odd):nth-of-type(5n):before, body #wrap .row .cell.class2 + .cell.class2:nth-of-type(odd):nth-of-type(5n):before {
|
|
left: -40px;
|
|
width: 40px;
|
|
}
|
|
body #wrap .row .cell.class2 + .cell.class0:nth-of-type(odd):nth-of-type(3n):before, body #wrap .row .cell.class2 + .cell.class2:nth-of-type(odd):nth-of-type(3n):before {
|
|
transform: translateX(0px);
|
|
}
|
|
body #wrap .row .cell.class2 + .cell.class0:nth-of-type(odd):before, body #wrap .row .cell.class2 + .cell.class2:nth-of-type(odd):before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 40px;
|
|
height: 40px;
|
|
background: linear-gradient(to right, #deb84d, #e6c978, #deb84d);
|
|
left: -40px;
|
|
border-radius: 0px;
|
|
top: 0;
|
|
box-shadow: 0px 0px;
|
|
border: none;
|
|
display: block;
|
|
}
|
|
body #wrap .row .cell.class2 .mask {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 9;
|
|
}
|
|
body #wrap .row .cell.class2 .mask:before {
|
|
content: '';
|
|
width: 70px;
|
|
height: 60px;
|
|
background: linear-gradient(-45deg, #151223 50%, rgba(255, 255, 255, 0) 50%);
|
|
position: absolute;
|
|
z-index: 20;
|
|
bottom: 0px;
|
|
left: 70px;
|
|
}
|
|
body #wrap .row .cell.class2 .mask:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 60%;
|
|
height: 75%;
|
|
bottom: 0;
|
|
box-shadow: inset calc(16px * var(--shift)) 0 0px #151223;
|
|
border: 10px solid;
|
|
border-right: 20px solid;
|
|
border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
|
|
border-bottom: none;
|
|
box-sizing: border-box;
|
|
z-index: 9;
|
|
left: 40%;
|
|
-webkit-mask: linear-gradient(to right, rgba(0, 0, 0, 0) -25%, #000000 70%);
|
|
border-radius: 500px 500px 0 0 / 525px 525px 0 0;
|
|
}
|
|
body #wrap .row .cell.class2 + .cell.class2 .mask {
|
|
z-index: 9;
|
|
width: 75%;
|
|
right: 0;
|
|
left: auto;
|
|
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 80px, #e6c978 80px, #deb84d 120px, #7d2cac 100px);
|
|
}
|
|
body #wrap .row .cell.class2 + .cell.class2 .mask:before, body #wrap .row .cell.class2 + .cell.class2 .mask:after {
|
|
display: none;
|
|
}
|
|
body #wrap .row .cell.class2:before, body #wrap .row .cell.class2:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 60%;
|
|
height: 75%;
|
|
bottom: 0;
|
|
background: #151223;
|
|
box-shadow: inset calc(15px * var(--shift)) 0 0px #5cbbdd, 10px 0 0 #7d2cac, 20px 0 0 #7d2cac;
|
|
box-sizing: border-box;
|
|
border: 10px solid;
|
|
border-right: 20px solid;
|
|
border-color: #7d2cac #7d2cac rgba(255, 255, 255, 0) #7d2cac;
|
|
border-bottom: none;
|
|
z-index: 9;
|
|
left: 40%;
|
|
border-radius: 500px 500px 0 0 / 525px 525px 0 0;
|
|
}
|
|
body #wrap .row .cell.class2:after {
|
|
z-index: 19;
|
|
box-shadow: inset 40px 0 0 #151223, 10px 0 0 #151223;
|
|
border-color: #151223 #151223 rgba(255, 255, 255, 0) #151223;
|
|
-webkit-mask: linear-gradient(to bottom, #000000 -20%, rgba(255, 255, 255, 0) 60%);
|
|
}
|
|
body #wrap .row .cell.class3 {
|
|
overflow: visible;
|
|
z-index: 2;
|
|
}
|
|
body #wrap .row .cell.class3:before {
|
|
content: '';
|
|
width: 100%;
|
|
height: 75%;
|
|
background: linear-gradient(45deg, rgba(255, 255, 255, 0) 30%, #7d2cac 30%, #7d2cac 50%, rgba(255, 255, 255, 0) 50%);
|
|
position: absolute;
|
|
z-index: 9;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
body #wrap .row .cell .inner {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 2;
|
|
}
|
|
body #wrap .row .cell .inner:before, body #wrap .row .cell .inner:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 2;
|
|
background: linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 130px -100px/20px 100% no-repeat, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 110px -120px/20px 100% no-repeat, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 90px -140px/20px 100% no-repeat, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 70px -160px/20px 100% no-repeat, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 50px -180px/20px 100% no-repeat, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 30px 40px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 50px 60px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 70px 80px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 90px 100px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 110px 120px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjN2QyY2FjIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiMxNTEyMjMiLz48c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjEuMCIgeDI9IjAuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjN2QyY2FjIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='), repeating-linear-gradient(135deg, #7d2cac, #7d2cac 14px, #42175b 14px, #42175b 28px, #42175b 28px) 31px 0px / 120px 120px no-repeat;
|
|
background: linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 130px -100px/20px 100% no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 110px -120px/20px 100% no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 90px -140px/20px 100% no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 70px -160px/20px 100% no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 50px -180px/20px 100% no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 30px 40px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 50px 60px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 70px 80px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 90px 100px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 110px 120px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(135deg, #7d2cac 50px, rgba(255, 255, 255, 0) 50px), linear-gradient(45deg, #151223 40%, rgba(255, 255, 255, 0) 40%), linear-gradient(-45deg, #7d2cac 65px, rgba(255, 255, 255, 0) 65px), repeating-linear-gradient(135deg, #7d2cac, #7d2cac 14px, #42175b 14px, #42175b 28px, #42175b 28px) 31px 0px / 120px 120px no-repeat;
|
|
-webkit-mask: linear-gradient(to left, #000000 calc(var(--shift) * 10%), rgba(255, 255, 255, 0));
|
|
}
|
|
body #wrap .row .cell .inner:after {
|
|
z-index: 1;
|
|
background: linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 130px -100px/20px 100% no-repeat, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 110px -120px/20px 100% no-repeat, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 90px -140px/20px 100% no-repeat, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 70px -160px/20px 100% no-repeat, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 50px -180px/20px 100% no-repeat, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkMmNhYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 30px 40px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 50px 60px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 70px 80px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 90px 100px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 110px 120px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZGViODRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiMxNTEyMjMiLz48c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjEuMCIgeDI9IjAuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZGViODRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='), repeating-linear-gradient(135deg, #deb84d, #deb84d 14px, #a6831f 14px, #a6831f 28px, #a6831f 28px) 31px 0px / 120px 120px no-repeat;
|
|
background: linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 130px -100px/20px 100% no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 110px -120px/20px 100% no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 90px -140px/20px 100% no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 70px -160px/20px 100% no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #151223 calc(100% - 80px), rgba(255, 255, 255, 0) calc(100% - 80px)) 100% 0%/10px 100% no-repeat, linear-gradient(to bottom, #151223 0%, #151223) 50px -180px/20px 100% no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 0px 40px/40px calc(100% - 120px) no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 30px 40px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 50px 60px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 70px 80px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 90px 100px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(to bottom, #7d2cac 0%, #7d2cac 100%) 110px 120px/20px calc(100% - 100px) no-repeat, linear-gradient(to bottom, #7d2cac, #7d2cac) 120px 120px/40px 100% no-repeat, linear-gradient(135deg, #deb84d 50px, rgba(255, 255, 255, 0) 50px), linear-gradient(45deg, #151223 40%, rgba(255, 255, 255, 0) 40%), linear-gradient(-45deg, #deb84d 65px, rgba(255, 255, 255, 0) 65px), repeating-linear-gradient(135deg, #deb84d, #deb84d 14px, #a6831f 14px, #a6831f 28px, #a6831f 28px) 31px 0px / 120px 120px no-repeat;
|
|
-webkit-mask: none;
|
|
} |