html {
overflow-x: clip;
word-break: break-word;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
body {
padding: 0px;
margin: 0px;
background-color: #ffffff;
max-width: 100%;
overflow-x: clip;
-webkit-tap-highlight-color: transparent;
font-family: Roboto, "sans-serif";
}
body.no-scroll::-webkit-scrollbar {
display: none;
}
body.no-scroll {
overflow: hidden !important;
}
* {
-webkit-tap-highlight-color: transparent;
}
.main-area {
display: flex;
flex-direction: column;
position: relative;
align-items: center;
}
#body-div {
min-height: 100vh;
max-width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
flex-wrap: nowrap;
color: #000000;
}
.header-holder {
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
header {
width: 100%;
max-width: 100%;
color: #0A0A0A;
background-color: #ffffff;
margin: 0px;
padding: 0px;
font-size: 2rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
z-index: 5;
display: flex;
}
footer {
width: 100%;
min-height: 3rem;
color: #0A0A0A;
background-color: #0d0d0d;
margin: 0px;
padding: 0px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 0.9rem;
font-family: Roboto, "sans-serif";
position: relative;
}
nav{
max-width: 100%;
max-height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
width: 100%;
}
#left-nav-logo {
height: 2.7rem;
filter: invert(1);
padding: 0.75rem 1rem 0.75rem min(1rem, 3vw);
cursor: pointer;
max-width: 45vw;
object-fit: contain;
}
#left-nav-logo-holder {
font-size: min(2rem, 10vw);
display: flex;
justify-content: center;
align-items: center;
padding-top: 0.2rem;
padding-left: 1rem;
padding-right: 1rem;
}
#left-nav-logo-holder:hover {
background-color: rgb(204, 204, 204);
}
#left-nav-logo-holder:active {
background-color: rgb(149, 149, 149);
}
#left-nav {
display: flex;
user-select: none;
}
#right-nav {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin-right: 0.5rem;
user-select: none;
}
#right-nav-profile-img {
height: 2.7rem;
padding: 1rem min(0.5rem, 1.5vw);
max-width: 14vw;
object-fit: contain;
}
#right-nav-menu-img {
height: 2.7rem;
padding: 1rem min(0.5rem, 1.5vw);
max-width: 14vw;
object-fit: contain;
}
#right-nav-profile-button {
display: flex;
position: relative;
}
#right-nav-menu-button {
display: flex;
position: relative;
}
#right-nav-profile-menu, #right-nav-menu-menu {
opacity: 0;
pointer-events: none;
position: absolute;
background-color: rgb(49, 51, 54);
display: flex;
flex-direction: column;
max-width: calc(100vw - 8.7rem);
width: max-content;
color: rgb(255,255,255);
text-decoration: none;
right: 0;
bottom: 0;
transform: translateY(100%);
border-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
padding-left: 2rem;
padding-right: 3rem;
/*border: rgb(171, 185, 217) 0.15rem solid;*/
}
#right-nav-profile-menu a, #right-nav-menu-menu a {
color: rgb(255,255,255);
text-decoration: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0.9rem 2rem;
padding-right: 3rem;
font-size: 1.4rem;
width: calc(100%);
text-align: center;
/*border-bottom: rgb(171, 185, 217) 0.15rem solid;*/
position: relative;
left: -2rem;
animation: menu-buttons-dance-animation alternate infinite 3s ease-in-out;
}
#right-nav-profile-menu a .emoji-to-right, #right-nav-menu-menu a .emoji-to-right {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(calc(-50% - 0.1rem));
}
#right-nav-profile-menu a:first-child, #right-nav-menu-menu a:first-child {
border-top-left-radius: 0.5rem;
}
#right-nav-profile-menu a:last-child, #right-nav-menu-menu a:last-child {
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
/*border: none;*/
}
#right-nav-profile-menu a:hover, #right-nav-menu-menu a:hover {
background-color: rgb(62, 62, 62);
animation: none;
}
#right-nav-profile-menu a:active, #right-nav-menu-menu a:active {
background-color: rgb(88, 88, 88);
animation: none;
}
#right-nav-profile-button:hover, #right-nav-profile-button:active, #right-nav-profile-button:focus, #right-nav-menu-button:hover, #right-nav-menu-button:active, #right-nav-menu-button:focus {
cursor: pointer;
background-color: rgb(204, 204, 204);
#right-nav-profile-menu, #right-nav-menu-menu {
opacity: 1;
pointer-events: all;
}
}
@keyframes menu-buttons-dance-animation {
from {
background-color: rgb(20, 20, 20);
}
to {
background-color: rgb(40, 40, 40);
}
}
.wide-bar-div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
column-gap: 1rem;
padding: 0.5rem 1rem;
width: calc(100% - 2rem);
user-select: none;
row-gap: 0.4rem;
}
#shop-now-bar {
/*background-color: rgb(53, 205, 99);*/
/*background-color: rgb(93,107,196);
background-color: rgb(148,190,70);*/
background-color: #6700ff;
color: rgb(255,255,255);
font-weight: 900;
font-size: 1.1rem;
}
.normal-button {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0.75rem 1rem;
cursor: pointer;
background-color: rgb(0, 0, 0);
color: #ffffff;
border-radius: 2rem;
user-select: none;
}
.normal-button:hover {
box-shadow: 0px 0px 0.3rem 0.3rem rgba(0,0,0,0.2);
background-color: rgb(33, 33, 33);
}
.normal-button:active {
box-shadow: 0px 0px 0.4rem 0.4rem rgba(0,0,0,0.3);
opacity: 0.9;
background-color: rgb(104, 104, 104);
}
.normal-button p {
margin: 0;
}
.normal-button.gray-button {
background-color: rgb(40,40,40);
color: rgb(230,230,230);
}
.normal-button.gray-button:hover {
box-shadow: 0px 0px 0.3rem 0.3rem rgba(0,0,0,0.2);
background-color: rgb(30,30,30);
}
.normal-button.gray-button:active {
box-shadow: 0px 0px 0.4rem 0.4rem rgba(0,0,0,0.3);
opacity: 0.8;
background-color: rgb(30,30,30);
}
.normal-button.light-gray-button {
background-color: rgb(130, 130, 130);
color: rgb(230,230,230);
}
.normal-button.light-gray-button:hover {
box-shadow: 0px 0px 0.3rem 0.3rem rgba(0,0,0,0.2);
background-color: rgb(110, 110, 110);
}
.normal-button.light-gray-button:active {
box-shadow: 0px 0px 0.4rem 0.4rem rgba(0,0,0,0.3);
opacity: 0.8;
background-color: rgb(110, 110, 110);
}
.normal-button.green-button {
background-color: rgb(33, 185, 69);
color: rgb(255, 255, 255);
}
.normal-button.green-button:hover {
box-shadow: 0px 0px 0.3rem 0.3rem rgba(0,0,0,0.2);
background-color: rgb(94, 199, 118);
}
.normal-button.green-button:active {
box-shadow: 0px 0px 0.4rem 0.4rem rgba(0,0,0,0.3);
opacity: 0.8;
background-color: rgb(16, 108, 37);
}
.normal-button.red-button {
background-color: rgb(185, 33, 48);
color: rgb(255, 255, 255);
}
.normal-button.red-button:hover {
box-shadow: 0px 0px 0.3rem 0.3rem rgba(0,0,0,0.2);
background-color: rgb(199, 94, 106);
}
.normal-button.red-button:active {
box-shadow: 0px 0px 0.4rem 0.4rem rgba(0,0,0,0.3);
opacity: 0.8;
background-color: rgb(108, 16, 16);
}
.button-hover-animation:hover {
box-shadow: 0px 0px 0.3rem 0.3rem rgba(255,255,255,0.3);
}
.button-hover-animation:active {
box-shadow: 0px 0px 0.3rem 0.3rem rgba(255,255,255,0.15);
opacity: 0.8;
}
.hidethis {
display: none !important;
user-select: none !important;
pointer-events: none !important;
}
#go-to-store-div {
position: fixed;
width: min(calc(30rem - 2rem), calc(100% - 2rem));
height: min(calc(40rem - 2rem), calc(100vh - 2rem));
left: 50%;
top: 50vh;
transform: translateY(-50%) translateX(-50%);
z-index: 15;
box-shadow: 0px 0px 1rem 1rem rgba(255,255,255,0.3);
background-color: #111111;
padding: 1rem;
display: flex;
flex-direction: column;
row-gap: 0.5rem;
justify-content: center;
align-items: center;
}
.close-button {
display: flex;
filter: invert(1);
position: absolute;
right: 1rem;
top: 1rem;
cursor: pointer;
user-select: none;
}
.close-button:hover {
background-color: rgb(17,235,198);
}
.close-button:active {
background-color: rgb(17,235,198);
opacity: 0.8;
box-shadow: 0px 0px 0.3rem 0.3rem rgba(0,0,0,0.2);
}
.close-button.close-button-black {
filter: none;
}
.close-button.close-button-black:hover {
/*background-color: rgb(238,20,57);*/
background-color: rgb(17,235,198);
filter: invert(1);
}
.close-button.close-button-black:active {
/*background-color: rgb(238,20,57);*/
background-color: rgb(17,235,198);
filter: invert(1);
opacity: 0.8;
box-shadow: 0px 0px 0.3rem 0.3rem rgba(0,0,0,0.2);
}
.close-button.settings-button {
padding: 0.3rem;
filter: none;
border-radius: 4rem;
}
.close-button.settings-button:hover {
/*background-color: rgb(238,20,57);*/
background-color: rgb(17, 17, 235);
filter: invert(1);
}
.close-button.settings-button:active {
/*background-color: rgb(238,20,57);*/
background-color: rgb(17, 17, 235);
filter: invert(1);
opacity: 0.8;
box-shadow: 0px 0px 0.3rem 0.3rem rgba(0,0,0,0.2);
}
.camera-switch-button {
cursor: pointer;
}
.camera-switch-button:hover {
cursor: pointer;
background-color: rgb(140, 131, 62);
}
.camera-switch-button:active {
cursor: pointer;
background-color: rgb(136, 124, 24);
box-shadow: 0 0 0.3rem 0.3rem rgba(255,255,255,0.2);
}
select {
padding: 0.75rem;
font-size: 1rem;
font-family: Roboto, "sans-serif";
max-width: 100%;
width: 100%;
}
.wide-button {
display: flex;
padding: 0.75rem 1rem;
cursor: pointer;
justify-content: center;
align-items: center;
width: calc(100% - 2rem);
}
.wide-button:hover {
box-shadow: 0px 0px 0.3rem 0.3rem rgba(0,0,0,0.2);
}
.wide-button:active {
box-shadow: 0px 0px 0.4rem 0.4rem rgba(0,0,0,0.3);
opacity: 0.9;
}
.wide-button p {
margin: 0;
color: white;
font-weight: 900;
}
#go-to-shopier-store {
/*background-color: rgb(53, 205, 99);*/
background-color: #6700ff;
margin-top: 3rem;
padding-top: 1rem;
padding-bottom: 1rem;
font-size: 1.2rem;
}
/*DECORATIVE CANDLE CSS START*/
.decorative-candle-holder {
--flame-height: 150px;
--wick-height: 50px;
--orange: #ff6a00;
--orange-yellow: #ff9224;
--dark: #2c2b39;
--blue-dark: #30537d;
--blue-light: #76daff;
--yellow: #fbf348;
--yellow-grey: #58523a;
.candle{
width: 34px;
margin: 30px auto 0 auto;
position: relative;
height: 80%;
align-self: flex-end;
animation: blink .1s infinite;
}
.wick{
position: absolute;
width: 6px;
height: var(--wick-height);
background: #23161a;
top: var(--flame-height) - 0.8*var(--wick-height);
left: 50%;
transform: translateX(-50%) skewX(2deg);
border-radius: 10%;
box-shadow: 0 0 2px 0px black;
&:before{
content: '';
position: absolute;
width: 0;
left: 50%;
height: 10px;
box-shadow:
0 -14px 10px 8px white,
0 -10px 10px 8px rgba(255,215,0,0.7), /*gold*/
0 -3px 10px 8px rgba(255,106,0,0.7), /*orange*/
0 6px 3px 4px black;
}
&:after{
content: '';
position: absolute;
left: 50%;
bottom:0;
width: 0px;
height: 0px;
box-shadow:
0 5px 2px 3px gold,
0 20px 2px 14px gold,
0 -6px 4px 5px rgba(98, 33, 27, 0.8), /*dark orange*/
0 0px 1px 4px rgba(255, 106, 0, 0.7), /*orange*/
0 0px 3px 4px var(--orange),
0 5px 3px 4px gold;
}
}
.flame{
width: 20px;
height: var(--flame-height);
margin: 0px auto;
position: relative;
animation: move 3s infinite, move-left 3s infinite;
transform-origin: 50% 90%;
.top{
width: 20px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: white;
border-top-left-radius: 500%;
border-bottom-left-radius: 50px;
border-top-right-radius: 500%;
border-bottom-right-radius: 50px;
transform: skewY(-10deg);
box-shadow:
0 0px 0px 3px white,
0 -20px 1px 4px white,
0 -25px 2px 3px gold,
0 -30px 5px 4px var(--orange), /*top*/
0 0px 150px 10px var(--orange), /*global*/
0 -10px 2px 4px white,
0 -5px 3px 3px white;
animation: flame-up 4s infinite;
}
.shadows{
position: absolute;
left: 50%;
top: 0;
width: 1px;
height: 60px;
border-radius: 50%;
box-shadow:
0 5px 20px 15px gold,
0 0px 100px 20px var(--orange),
0 15px 50px 15px var(--orange),
5px 30px 5px 13px var(--orange),
5px 50px 5px 13px var(--orange),
0 75px 50px 30px black;
}
.bottom{
transform: scale(0.9);
position: absolute;
bottom: 6px;
left: 9px;
width: 1px;
height: 8px;
border-radius: 1%;
background: var(--dark);
box-shadow:
0 6px 10px 12px rgba(60, 76, 125, 0.3), /*dark blue*/
0 0px 4px 8px var(--dark),
0 -12px 10px 8px rgba(255,106,0, 0.5), /*orange*/
0 5px 7px 12px var(--dark),
0 -3px 10px 12px var(--dark),
5px -10px 10px 5px red,
0 -15px 10px 10px gold,
5px -25px 10px 5px gold,
0 2px 5px 10px var(--blue-dark),
0 -2px 2px 14px var(--blue-light),
0 2px 10px 12px var(--blue-light);
}
}
.wax{
position: relative;
top: 15px;
width: 100%;
height: 100%;
background: var(--orange-yellow);
background: -moz-linear-gradient(top, var(--orange-yellow) 0px, var(--orange-yellow) 20px, var(--yellow-grey) 50px); /* FF3.6-15 */
background: -webkit-linear-gradient(top, var(--orange-yellow) 0px, var(--orange-yellow) 20px, var(--yellow-grey) 50px); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, var(--orange-yellow) 0px, var(--orange-yellow) 20px, var(--yellow-grey) 50px); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9224', endColorstr='#58523a',GradientType=0 ); /* IE6-9 */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-shadow:
inset 0 7px 12px -2px var(--yellow),
inset 0 9px 57px -3px rgba(255,0,0,0.4),
inset 0 -5px 8px 2px black,
0 0 3px 0px var(--orange);
}
}
@keyframes move{
0%{ transform: skewX(2deg) skewY(5deg)}
50%{ transform: skewX(-2deg) skewY(-0deg)}
100%{ transform: skewX(2deg) skewY(5deg)}
}
@keyframes move-left{
50%{transform: skewX(3deg);}
}
@keyframes flame-up{
50% { box-shadow:
0 0px 0px 3px white,
0 -38px 1px 2px white,
0 -41px 2px 3px gold,
0 -50px 5px 4px var(--orange), /*orange top*/
0 0px 150px 10px var(--orange), /*orange global*/
0 -10px 2px 4px white,
0 -5px 3px 3px white;
}
}
@keyframes blink{
50% {opacity: 0.95;}
}
/*DECORATIVE CANDLE CSS END*/
/*DECORATIVE CANDLE 2 CSS START*/
.decorative-candle-holder2 {
transform: scale(0.15);
height: 0rem;
width: 2rem;
position: relative;
top: -1rem;
left: -1rem;
.holder {
margin: 12rem auto 0;
width: 150px;
height: 400px;
position: relative;
}
.holder *, .holder *:before, .holder *:after {
position: absolute;
content: "";
}
.candle {
bottom: 0;
width: 150px;
height: 300px;
border-radius: 150px / 40px;
box-shadow: inset 20px -30px 50px 0 rgba(0, 0, 0, 0.4), inset -20px 0 50px 0 rgba(0, 0, 0, 0.4);
background: #190f02;
background: -moz-linear-gradient(#e48825, #e78e0e, #833c03, #4c1a03 50%, #1c0900);
background: -webkit-linear-gradient(#e48825, #e78e0e, #833c03, #4c1a03 50%, #1c0900);
background: -o-linear-gradient(#e48825, #e78e0e, #833c03, #4c1a03 50%, #1c0900);
background: -ms-linear-gradient(#e48825, #e78e0e, #833c03, #4c1a03 50%, #1c0900);
background: linear-gradient(#e48825, #e78e0e, #833c03, #4c1a03 50%, #1c0900);
}
.candle:before {
width: 100%;
height: 40px;
border-radius: 50%;
/*border: 2px solid #d47401;*/
background: #b86409;
background: -moz-radial-gradient(#eaa121, #8e4901 45%, #b86409 80%);
background: -webkit-radial-gradient(#eaa121, #8e4901 45%, #b86409 80%);
background: -o-radial-gradient(#eaa121, #8e4901 45%, #b86409 80%);
background: -ms-radial-gradient(#eaa121, #8e4901 45%, #b86409 80%);
background: radial-gradient(#ffef80, #b86409 60%);
background: radial-gradient(#eaa121, #8e4901 45%, #b86409 80%);
}
.candle:after {
width: 34px;
height: 10px;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
top: 14px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
background: -moz-radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%);
background: -webkit-radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%);
background: -o-radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%);
background: -ms-radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%);
background: radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%);
}
.thread {
width: 6px;
height: 36px;
top: -17px;
left: 50%;
z-index: 1;
border-radius: 40% 40% 0 0;
transform: translateX(-50%);
background: #121212;
background: -moz-linear-gradient(#d6994a, #4b232c, #121212, black, #e8bb31 90%);
background: -webkit-linear-gradient(#d6994a, #4b232c, #121212, black, #e8bb31 90%);
background: -o-linear-gradient(#d6994a, #4b232c, #121212, black, #e8bb31 90%);
background: -ms-linear-gradient(#d6994a, #4b232c, #121212, black, #e8bb31 90%);
background: linear-gradient(#d6994a, #4b232c, #121212, black, #e8bb31 90%);
}
.flame {
width: 24px;
height: 120px;
left: 50%;
transform-origin: 50% 100%;
transform: translateX(-50%);
bottom: 100%;
border-radius: 50% 50% 20% 20%;
background: rgba(255, 255, 255, 1);
background: -moz-linear-gradient(white 80%, transparent);
background: -webkit-linear-gradient(white 80%, transparent);
background: -o-linear-gradient(white 80%, transparent);
background: -ms-linear-gradient(white 80%, transparent);
background: linear-gradient(white 80%, transparent);
animation: moveFlame 6s linear infinite, enlargeFlame 5s linear infinite;
}
.flame:before {
width: 100%;
height: 100%;
border-radius: 50% 50% 20% 20%;
box-shadow: 0 0 15px 0 rgba(247, 93, 0, .4), 0 -6px 4px 0 rgba(247, 128, 0, .7);
}
.glow {
width: 26px;
height: 60px;
border-radius: 50% 50% 35% 35%;
left: 50%;
top: -48px;
transform: translateX(-50%);
background: rgba(0, 133, 255, .7);
box-shadow: 0 -40px 30px 0 #dc8a0c, 0 40px 50px 0 #dc8a0c, inset 3px 0 2px 0 rgba(0, 133, 255, .6), inset -3px 0 2px 0 rgba(0, 133, 255, .6);
}
.glow:before {
width: 70%;
height: 60%;
left: 50%;
transform: translateX(-50%);
bottom: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.35);
}
.blinking-glow {
width: 100px;
height: 180px;
left: 50%;
top: -55%;
transform: translateX(-50%);
border-radius: 50%;
background: #ff6000;
-webkit-filter: blur(50px);
-moz-filter: blur(60px);
-o-filter: blur(60px);
-ms-filter: blur(60px);
filter: blur(60px);
animation: blinkIt .1s infinite;
}
}
@media screen and (max-width: 400px) {
.decorative-candle-holder2 {
transform: scale(0.1);
width: min(1rem, 3vw);
top: 0rem;
}
}
@keyframes blinkIt {
50% { opacity: .8;}
}
@keyframes moveFlame {
0%, 100% {
transform: translateX(-50%) rotate(-2deg);
}
50% {
transform: translateX(-50%) rotate(2deg);
}
}
@keyframes enlargeFlame {
0%, 100% {
height: 120px;
}
50% {
height: 140px;
}
}
/*DECORATIVE CANDLE 2 CSS END*/
.main-page-part {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 0rem 1rem;
column-gap: 1rem;
row-gap: 1rem;
}
.main-page-part-second {
display: flex;
flex-direction: column;
width: min(calc(100% - 2rem), 50rem);
flex-shrink: 1;
padding: 0rem 1rem;
justify-content: center;
align-items: center;
}
#find-out-this-header-changable {
display: flex;
flex-direction: column;
overflow: hidden;
height: min(4.5rem, 14vw);
position: relative;
}
#find-out-this-header-changable h2 {
margin: 0;
display: flex;
position: absolute;
font-family: Raleway;
font-weight: 900;
font-size: min(3.75rem, 11vw);
animation: find-out-this-header-changable-h2-anim infinite 8s forwards ease;
}
#find-out-this-header-static {
display: flex;
margin: 0;
}
@keyframes find-out-this-header-changable-h2-anim {
from {
/*top: -4.5rem;*/
transform: translateY(-4.5rem);
opacity: 0;
}
25% {
/*top: 0rem;*/
transform: translateY(0rem);
opacity: 1;
}
50% {
/*top: 4.5rem;*/
transform: translateY(4.5rem);
opacity: 0;
}
to {
/*top: 4.5rem;*/
transform: translateY(4.5rem);
opacity: 0;
}
}
#find-out-this-header-static {
font-family: Raleway;
font-weight: 900;
font-size: min(3.75rem, 11vw);
}
.white-text-box {
display: flex;
padding: 1rem;
border-radius: 1rem;
background-color: #e8e8e8;
color: #000000;
position: relative;
margin-top: 1rem;
margin-bottom: 1rem;
row-gap: 1rem;
column-gap: 1rem;
justify-content: center;
align-items: center;
/*margin-right: 1rem;*/
}
.white-text-box p {
margin: 0;
font-family: Raleway;
font-weight: 500;
}
.white-text-box-borderer-1 {
display: flex;
position: absolute;
height: 100%;
width: 100%;
background-color: #30537d;
top: 0.5rem;
left: 0.5rem;
z-index: -1;
border-radius: 1rem;
}
.white-text-box-borderer-2 {
display: flex;
position: absolute;
height: 100%;
width: 100%;
background-color: #5d1b8a;
top: 1rem;
left: 1rem;
z-index: -2;
border-radius: 1rem;
}
.main-img-box {
display: flex;
position: relative;
border-radius: 1rem;
flex-shrink: 1;
max-width: 100%;
margin-top: 1rem;
margin-bottom: 1rem;
/*margin-right: 1rem;*/
}
.main-img-box img {
object-fit: contain;
height: 100%;
border-radius: 1rem;
width: 100%;
}
.main-img-box-borderer-1 {
display: flex;
position: absolute;
height: 100%;
width: 100%;
/*background-color: #30537d;*/
background-color: #2c2c2c;
top: 0.5rem;
left: 0.5rem;
z-index: -1;
border-radius: 1rem;
}
.main-img-box-borderer-2 {
display: flex;
position: absolute;
height: 100%;
width: 100%;
/*background-color: #5d1b8a;*/
background-color: #f0f0f0;
top: 1rem;
left: 1rem;
z-index: -2;
border-radius: 1rem;
}
#soyle-bana-mum-text {
font-family: Raleway;
font-weight: 900;
font-size: min(3.75rem, 11vw);
}
/*MAGIC TEXT START*/
:root {
--purple: rgb(123, 31, 162);
--violet: rgb(103, 58, 183);
--pink: rgb(244, 143, 177);
}
@keyframes magic-background-pan {
from {
background-position: 0% center;
}
to {
background-position: -200% center;
}
}
@keyframes magic-scale {
from, to {
transform: scale(0);
}
50% {
transform: scale(1);
}
}
@keyframes magic-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
h2 > .magic {
display: inline-block;
position: relative;
}
h2 > .magic > .magic-star {
--size: clamp(20px, 1.5vw, 30px);
animation: magic-scale 700ms ease forwards;
display: block;
height: var(--size);
left: var(--star-left);
position: absolute;
top: var(--star-top);
width: var(--size);
}
h2 > .magic > .magic-star > svg {
animation: magic-rotate 1000ms linear infinite;
display: block;
opacity: 0.7;
}
h2 > .magic > .magic-star > svg > path {
fill: var(--violet);
}
h2 > .magic > .magic-text {
animation: magic-background-pan 3s linear infinite;
background: linear-gradient(
to right,
var(--purple),
var(--violet),
var(--pink),
var(--purple)
);
background-size: 200%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
/*white-space: nowrap;*/
}
/*MAGIC TEXT END*/
.basic-text-box-with-anim {
display: flex;
border-radius: 1rem;
padding: 1rem;
background-color: rgb(232, 232, 232);
color: #000000;
margin: 1rem 0rem;
}
.basic-text-box-with-anim p {
margin: 0;
font-family: Raleway;
font-weight: 500;
}
.white-text-box-big-number {
margin: 0;
font-family: Raleway;
font-weight: 700;
display: flex;
position: absolute;
font-size: 35rem;
color: rgb(83, 83, 83);
top: 0rem;
left: 50%;
transform: translateY(-50%) translateX(-50%);
z-index: -3;
}
/*SMOKE TEXT EFFECT START*/
@import "compass/css3";
.smoke-body {
/*font: 5vw/100vh "Finger Paint";*/
font-family: Raleway;
text-align: center;
color: transparent;
backface-visibility: hidden;
flex-direction: row;
flex-wrap: wrap;
font-size: min(3.75rem, 11vw);
column-gap: 0;
pointer-events: none;
user-select: none;
}
.smoke-body p {
display: flex;
margin: 0;
}
.smoke-body span {
display: inline-block;
text-shadow: 0 0 0 whitesmoke;
animation: smoky 8s both infinite;
}
.smoke-body span:nth-child(even) {
animation-name: smoky-mirror;
}
@keyframes smoky {
from {
opacity: 0;
text-shadow: 0 0 0 whitesmoke;
transform: none;
}
7% {
opacity: 0;
}
25% {
opacity: 1;
text-shadow: 0 0 0 whitesmoke;
transform: none;
}
70% {
opacity: 1;
text-shadow: 0 0 0 whitesmoke;
transform: none;
}
88% {
text-shadow: 0 0 40px whitesmoke;
}
to {
transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
text-shadow: 0 0 20px whitesmoke;
opacity: 0;
}
}
@keyframes smoky-mirror {
from {
opacity: 0;
text-shadow: 0 0 0 whitesmoke;
transform: none;
}
7% {
opacity: 0;
}
25% {
opacity: 1;
text-shadow: 0 0 0 whitesmoke;
transform: none;
}
70% {
opacity: 1;
text-shadow: 0 0 0 whitesmoke;
transform: none;
}
88% {
text-shadow: 0 0 40px whitesmoke;
}
to {
transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
text-shadow: 0 0 20px whitesmoke;
opacity: 0;
}
}
/*SMOKE TEXT EFFECT END*/
.main-page-h3 {
font-family: Raleway;
font-weight: 900;
font-size: 3rem;
margin: 0;
}
.background-svg-div {
display: flex;
flex-direction: column;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: -100;
overflow: hidden;
user-select: none;
pointer-events: none;
}
.background-svg-div-imgs-holder {
display: flex;
flex-direction: column;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.background-svg-div img {
width: min(70%, 50rem);
opacity: 0.2;
position: absolute;
}
.background-svg-div-imgs-holder-left img {
left: 0;
transform: translateX(-30%);
}
.background-svg-div-imgs-holder-right img {
right: 0;
transform: translateX(30%);
}
.doing-something {
border: 2px solid #262626;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/*height: 10rem;*/
padding: 2rem 0rem;
width: min(28rem, 90vw);
margin: min(2rem, 4vw);
border-radius: 1rem;
}
.doing-something h1{
font-size: 1.6rem;
height: 3rem;
width: 25rem;
margin: 0.2rem;
margin-top: 0.6rem;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.doing-something-bottom-div {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
height: 3rem;
width: 25rem;
margin: 0.2rem;
padding: 0;
}
.left-loading-area{
display: flex;
background: linear-gradient(
to left,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) 45%,
rgba(255, 154, 0, 1) 50%,
rgba(0, 0, 0, 0) 55%,
rgba(0, 0, 0, 0) 100%
);
height: 1rem;
width: 8rem;
background-size: 300%;
background-position: 50%;
animation: loading-left-right 1s infinite alternate-reverse ease-in-out;
}
.right-loading-area{
display: flex;
background: linear-gradient(
to right,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) 45%,
rgba(255, 154, 0, 1) 50%,
rgba(0, 0, 0, 0) 55%,
rgba(0, 0, 0, 0) 100%
);
height: 1rem;
width: 8rem;
background-size: 300%;
background-position: 50%;
animation: loading-left-right 1s infinite alternate ease-in-out;
}
@keyframes loading-left-right {
from {
background-position: 10%;
}
20% {
opacity: 0%;
}
50% {
opacity: 100%;
}
80% {
opacity: 0%;
}
to {
background-position: 90%;
}
}
.content-flow {
width: min(53rem, calc(100vw - 2px - 1rem));
border: 1px solid #303030;
/*background-color: rgb(33, 32, 31);*/
border-radius: 1rem;
padding: 0rem;
margin: 0rem;
padding-bottom: 1rem;
margin-bottom: 1rem;
}
.normal-text {
width: auto;
min-width: calc(100% - 5rem);
padding-left: min(2.5rem, 5.5vw);
padding-right: min(2.5rem, 5.5vw);
padding-top: min(1rem, 3vw);
padding-bottom: min(1rem, 3vw);
}
.inline-button-medium {
color:#262626;
font-size: 1.3rem;
background-color: #E8E8E8;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 1rem 1rem 1rem 0rem;
border-radius: 1rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
.inline-button-medium p {
margin: 0.75rem 1.5rem;
padding: 0;
font-family: Raleway, "sans-serif";
font-weight: 700;
}
.inline-button-medium:hover {
background-color: #BFBFBF;
}
.inline-button-medium:active{
background-color: #909090;
}
.inline-button-medium-red {
background-color: rgb(201, 0, 0); color:white;
}
.inline-button-medium-red:hover {
background-color: rgb(156, 0, 0);
}
.inline-button-medium-red:active{
background-color: rgb(126, 0, 0);
}
.inline-button-medium-grey {
background-color: rgb(97, 97, 97); color:white;
}
.inline-button-medium-grey:hover {
background-color: rgb(63, 63, 63);
}
.inline-button-medium-grey:active{
background-color: rgb(46, 46, 46);
}
.signin-screen{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: max-content;
padding: min(2rem, 6vw) 0rem;
margin: 2rem 0rem;
width: min(26rem, 86vw);
border: 1px solid #262626;
border-radius: min(1rem, 3vw);
}
#provider-buttons {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
align-content: center;
text-align: center;
width: min(23rem, 75vw);
}
.provider-signin-button{
position: relative;
height: min(3rem, 10.5vw);
width: min(22rem, 72vw);
background-color: rgb(0, 0, 0);
font-family: Roboto, "sans-serif";
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
color: #ffffff;
font-weight: 400;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
border-radius: min(0.3rem, 0.9vw);
border-top-left-radius: min(0.5rem, 1.5vw);
border-bottom-left-radius: min(0.5rem, 1.5vw);
margin: min(0.5rem, 1.5vw);
border: 0.3rem solid #000;
}
.provider-signin-button:hover{
background-color: #ffffff;
box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.3);
color: #000;
}
.provider-signin-button:active{
background-color: #b1b1b1;
box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 1);
color: #000;
}
.provider-signin-button p{
padding: 0rem;
margin: 0rem;
font-size: min(1rem, 4.5vw);
}
.provider-signin-button-img-holder {
position: absolute;
left: 0rem;
height: min(3rem, 10.5vw);
width: min(3rem, 9vw);
display: flex;
align-items: center;
justify-content: center;
background-color: white;
border-top-left-radius: min(0.3rem, 0.9vw);
border-bottom-left-radius: min(0.3rem, 0.9vw);
border-right: 0.3rem #151413 dashed;
}
.provider-signin-button-img-holder img{
padding: 0rem;
margin: 0rem;
max-height: min(1.7rem, 5.1vw);
max-width: min(1.7rem, 5.1vw);
}
#if-you-already-have-account{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
width: min(23rem, 75vw);
}
#if-you-already-have-account hr{
border: 1px solid #262626;
width: min(23rem, 75vw);
margin: min(1rem, 4.5vw) 0rem;
}
#center-404 {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#center-404 h1 {
display: flex;
justify-content: center;
align-items: center;
font-family: Bungee, "sans-serif";
font-size: 5rem;
padding: 0rem;
margin: 0rem;
height: 10rem;
}
#center-404 p {
display: flex;
justify-content: center;
align-items: center;
font-size: 1.3rem;
padding: 0rem;
margin: 0rem 2rem 2rem 2rem;
}
.speech-bubble, .speech-bubble-left, .speech-bubble-right {
position: relative;
background: #a48d30;
border-radius: 0.5rem;
text-align: center;
display: block;
align-items: center;
justify-content: center;
}
.speech-bubble:not(.speech-bubble-notafter):after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 20px solid transparent;
border-top-color: #a48d30;
border-bottom: 0;
margin-left: -20px;
margin-bottom: -20px;
}
.speech-bubble.speech-bubble-notafter:before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border: 20px solid transparent;
border-bottom-color: #a48d30;
border-top: 0;
margin-left: -20px;
margin-top: -20px;
}
.speech-bubble-left:after {
left: 20%;
}
.speech-bubble-right:after {
left: 80%;
}
.speech-bubble.speech-bubble-warning {
top: 3rem;
position: absolute;
transition: opacity 0.5s ease;
pointer-events: none;
}
.speech-bubble-warning.speech-bubble-warning-pineapple-vote.speech-bubble:after, .speech-bubble-warning.speech-bubble-warning-pineapple-vote.speech-bubble::before, .speech-bubble-warning.speech-bubble-warning-pineapple-vote-remove.speech-bubble::before, .speech-bubble-warning.speech-bubble-warning-pineapple-vote-remove.speech-bubble::after {
left: 2.8rem;
}
/*glitch anim 1*/
.glitch{
animation: glitch 1s linear infinite;
}
@keyframes glitch{
2%,64%{
transform: translate(2px,0) skew(0deg);
}
4%,60%{
transform: translate(-2px,0) skew(0deg);
}
62%{
transform: translate(0,0) skew(5deg);
}
}
.glitch:before,
.glitch:after{
content: attr(title);
position: absolute;
left: 0;
}
.glitch:before{
animation: glitchTop 1s linear infinite;
clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}
@keyframes glitchTop{
2%,64%{
transform: translate(2px,-2px);
}
4%,60%{
transform: translate(-2px,2px);
}
62%{
transform: translate(13px,-1px) skew(-13deg);
}
}
.glitch:after{
animation: glitchBotom 1.5s linear infinite;
clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
-webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}
@keyframes glitchBotom{
2%,64%{
transform: translate(-2px,0);
}
4%,60%{
transform: translate(-2px,0);
}
62%{
transform: translate(-22px,5px) skew(21deg);
}
}
/*glitch anim 1 end*/
/*glitch 2*/
.stretch-glitch, .glitch-button:after, .glitch-button:before {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.glitch-button {
background: linear-gradient(to top, rgba(0, 0, 0, 0.361), rgba(109, 109, 109, 0.304));
background-size: 10% 20%;
border-radius: 1.5em;
transition: opacity 300ms;
border: none;
padding: 20px;
font-weight: bold;
letter-spacing: 0.05em;
outline: none;
overflow: hidden;
z-index: 99;
animation: glitch 750ms infinite, glitch-bg 5s infinite linear;
}
@keyframes glitch-bg {
from {
background-position: 0% 0%;
}
to {
background-position: 100% 100%;
}
}
.glitch-button:after {
box-shadow: rgba(212, 207, 201, 0.75) 0 0 15px 2px;
background: #FAF15D;
content: "";
height: 2px;
animation: scan 4s infinite;
opacity: 1;
}
.glitch-button:before {
content: "";
opacity: 1;
}
@keyframes glitch {
0% {
transform: skewX(0deg);
}
5% {
transform: skewX(2deg);
opacity: 0.75;
}
10% {
transform: skewX(0deg);
opacity: 1;
}
15% {
transform: skewX(-5deg);
opacity: 0.75;
}
20% {
transform: skewX(0deg);
opacity: 1;
}
45% {
transform: skewX(3deg);
opacity: 0.75;
}
50% {
transform: skewX(0deg);
opacity: 1;
}
55% {
transform: skewX(0deg);
opacity: 0.75;
}
60% {
transform: skewX(0deg);
opacity: 1;
}
75% {
transform: skewX(2deg);
}
80% {
transform: skewX(0deg);
}
85% {
transform: skewX(-8deg);
opacity: 0.75;
}
90% {
transform: skewX(0deg);
opacity: 1;
}
100% {
transform: skewX(0deg);
}
}
@keyframes scan {
0% {
top: 0%;
}
50% {
top: 97%;
}
100% {
top: 0%;
}
}
/*glitch 2 end*/
.wide-header {
color: white;
width: 100%;
max-width: 100vw;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: max-content;
padding: min(3.2rem, 10vw) 0rem;
background-size: cover;
background-color: rgba(0, 0, 0, 0.2);
background-blend-mode: darken;
overflow: hidden;
animation: wide-header-welcome-animation 2s ease forwards;
position: relative;
}
@keyframes wide-header-welcome-animation {
from {
background-color: rgba(0, 0, 0, 0.7);
}
75% {
background-color: rgba(0, 0, 0, 0.7);
}
to {
}
}
.wide-header h1 {
font-size: 3.5rem;
padding: 0rem min(1rem, 3vw);
position: relative;
animation: wide-header-h1-welcome-animation 0.5s ease forwards;
}
@keyframes wide-header-h1-welcome-animation {
from {
bottom: -10rem;
}
to {
bottom: 0rem;
}
}
.wide-header-inside-img {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-color: rgba(0, 0, 0, 0.2);
background-blend-mode: darken;
overflow: hidden;
pointer-events: none;
opacity: 0;
transition: opacity 1s ease;
}
.policy-text a{
color: white;
}
.policy-text h2 {
font-size: 2.3rem;
}
.policy-text h3 {
font-size: 1.65rem;
margin-top: 4rem;
}
.policy-text h4 {
font-size: 1.25rem;
margin-top: 3rem;
margin-bottom: 1rem;
}
.policy-text h5 {
font-size: 1rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.policy-text h2 + h3 {
margin-top: 1rem!important;
}
.policy-text h3 + h4 {
margin-top: 1rem!important;
}
.wide-text-button-left {
width: calc(100% - min(8rem, 20vw));
margin: min(0.5rem, 1.5vw) min(2.5rem, 5.5vw);
padding: min(0.8rem, 2.4vw) min(1.5rem, 4.5vw);
background-color: #E8E8E8;
color:#262626;
border-radius: min(1rem, 3vw);
-webkit-tap-highlight-color: transparent;
cursor: pointer;
font-family: Raleway, "sans-serif";
font-weight: 700;
}
.wide-text-button-left:hover {
background-color: #BFBFBF;
}
.wide-text-button-left:active{
background-color: #909090;
}
.wide-text-button-left.black-button-color {
background-color: #505050;
color: #E8E8E8;
}
.wide-text-button-left.black-button-color:hover {
background-color: #353535;
}
.wide-text-button-left.black-button-color:active {
background-color: #202020;
}
.wide-text-button-left.black-button-color {
background-color: #505050;
color: #E8E8E8;
}
.wide-text-button-left.black-button-color:hover {
background-color: #353535;
}
.wide-text-button-left.black-button-color:active {
background-color: #202020;
}
#footer-div-list {
display: grid;
flex-direction: column;
color: #e8e8e8;
padding: 0 0;
row-gap: 0;
column-gap: 0;
justify-content: center;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
width: calc(100%);
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
#footer-div-list p {
margin: 0;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
padding: 0.4rem 0.75rem;
min-height: 2.2rem;
color: #e8e8e8;
text-decoration: none;
}
.footer-div-list-item {
cursor: pointer;
text-decoration: none;
}
.footer-div-list-item:hover :first-child {
z-index: 1;
box-shadow: 0px 0px 0.4rem 0.4rem rgba(255,255,255,0),
0rem 0.8rem 0rem 0rem rgb(99, 99, 99);
filter: invert(1);
position: relative;
bottom: 0.8rem;
}
.footer-div-list-item:active :first-child {
z-index: 1;
box-shadow: 0px 0px 0.4rem 0.4rem rgba(255,255,255,0),
0rem 0.4rem 0rem 0rem rgb(127, 127, 127);
background-color: rgb(78, 75, 75) !important;
filter: invert(1);
position: relative;
bottom: 0.4rem;
}
.warnings-holder {
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
position: sticky;
top: 0rem;
z-index: 15;
color: #ffffff;
}
.warning-top-box {
display: flex;
flex-direction: column;
background-color: rgb(211, 54, 54);
justify-content: center;
align-items: center;
width: 100%;
position: relative;
min-height: 3rem;
}
.warning-top-box p {
margin: 0.75rem 1rem;
margin-right: 3rem;
}
.warning-top-box .close-button {
right: min(1vw, 1rem);
top: 0rem;
}
.warning-top-box .close-button:hover {
background-color: rgba(240,240,240,0.5);
}
.warning-top-box.warning-top-box-small {
min-height: 2rem;
}
.warning-top-box.warning-top-box-small p {
font-size: 0.83rem;
}
.warning-top-box.warning-top-box-small .close-button {
height: 2.5rem;
}
.main-page-part h2 {
font-family: Raleway, 'sans-serif';
font-weight: 900;
font-size: 3rem;
margin: 0;
display: flex;
}
svg text {
font-size: min(3.5rem, 8vw);
font-weight: 900;
letter-spacing: min(0.5rem, 0.4vw);
font-family: Raleway, 'sans-serif';
fill: #77889d72;
stroke: #dddddd;
stroke-width: min(2px, 0.2vw);
animation: animated-stroke 3s infinite alternate ease-in-out;
text-anchor: middle;
display: flex;
}
@keyframes animated-stroke {
0%{
stroke-dasharray: 1% 50%;
stroke-dashoffset: 10%;
}
100%{
stroke-dasharray: 10% 0%;
stroke-dashoffset: 30%;
}
}
.color-categories-list {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
row-gap: 1.5rem;
column-gap: 1.5rem;
padding: 1rem;
}
.color-category-item {
width: calc(100% - 3rem);
padding: 1rem 1.5rem 1.5rem 1.5rem;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
row-gap: 1rem;
column-gap: 2rem;
border-radius: 1rem;
transition: box-shadow 1s ease;
}
.color-category-item:hover {
box-shadow: 0 0 1rem 1rem rgba(255, 255, 255, 0.2);
}
.color-category-item-header {
display: flex;
flex-direction: column;
row-gap: 0.2rem;
width: min(100%, 27rem);
}
.color-category-item-header h3 {
font-family: Raleway, 'sans-serif';
font-size: 2.8rem;
font-weight: 900;
margin: 0;
}
.color-category-item-header p {
font-family: Raleway, 'sans-serif';
font-size: 2rem;
font-weight: 700;
margin: 0;
}
.color-category-item-header .color-category-item-header-comment {
background-color: rgba(0,0,0,0.3);
font-style: italic;
border-radius: 0.5rem;
font-size: 1rem;
font-weight: 400;
display: flex;
padding: 0.3rem 0.5rem;
margin-top: 0.5rem;
}
.color-category-item-info {
display: flex;
flex-direction: column;
row-gap: 1rem;
max-width: 25rem;
padding: 1rem;
background-color: rgba(0,0,0,0.3);
border-radius: 0.5rem;
margin: 0;
}
.color-category-item-info p {
margin: 0;
}
.color-category-item-gallery {
display: flex;
flex-direction: column;
flex-wrap: wrap;
column-gap: 1rem;
max-width: 100%;
row-gap: 1rem;
flex-grow: 1;
}
.color-category-item-gallery img {
height: auto;
border-radius: 0.5rem;
flex-shrink: 1;
object-fit: cover;
flex-grow: 1;
width: 100%;
max-width: 100%;
}
.color-category-item-gallery img:hover {
box-shadow: 0 0 1rem 1rem rgba(255,255,255,0.3);
z-index: 3;
}
.color-category-item-gallery img:active {
box-shadow: 0 0 1rem 1rem rgba(0,0,0,0.6);
z-index: 3;
opacity: 0.75;
}
.tarot-cards-info-gallery {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
padding: 1.5rem;
background-color: rgba(0,0,0,0.3);
width: calc(100% - 3rem);
overflow-x: scroll;
column-gap: 1rem;
align-items: stretch;
user-select: none;
}
.tarot-cards-info-gallery::-webkit-scrollbar {
width: 0.3rem;
height: 1rem;
}
.tarot-cards-info-gallery::-webkit-scrollbar-track {
width: 0.3rem;
}
.tarot-cards-info-gallery::-webkit-scrollbar-thumb {
width: 0.3rem;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 2rem;
}
.tarot-cards-info-gallery-item:first-child {
margin-left: auto;
}
.tarot-cards-info-gallery-item:last-child {
margin-right: auto;
}
.tarot-cards-info-gallery-item {
display: flex;
flex-direction: column;
padding: 1rem;
border-radius: 0.5rem;
background-color: #e8e8e8;
color: #000000;
row-gap: 0.75rem;
padding-bottom: 1.5rem;
min-width: min(min(min(100%, 17rem), calc(100vw - 8rem)), calc(70vw - 3rem));
width: min(min(min(100%, 17rem), calc(100vw - 8rem)), calc(70vw - 3rem));
position: relative;
}
.tarot-cards-info-gallery-item h4 {
font-family: Raleway, 'sans-serif';
font-size: min(1.8rem, 9vw);
font-weight: 900;
margin: 0;
}
.tarot-cards-info-gallery-item h6 {
font-family: Raleway, 'sans-serif';
font-size: min(0.75rem, 3.75vw);
font-weight: 400;
margin: 0;
font-style: italic;
}
.tarot-cards-info-gallery-item p {
font-family: Raleway, 'sans-serif';
font-size: min(1rem, 5vw);
font-weight: 400;
margin: 0;
}
.tarot-cards-info-gallery-item img {
width: 100%;
}
#tarot-card-more-info-div {
display: flex;
width: calc(100% - 3rem);
height: calc(100vh - 3rem);
background-color: #e8e8e8;
z-index: 5;
position: fixed;
top: 0;
left: 0;
padding: 1.5rem;
overflow-y: scroll;
color: #000000;
flex-direction: column;
}
.tarot-card-more-info-flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 1rem;
row-gap: 1rem;
justify-content: flex-start;
align-items: flex-start;
}
.tarot-card-more-info-flex-group {
display: flex;
flex-direction: column;
column-gap: 1rem;
row-gap: 1rem;
/* max-width: 40rem;*/
min-width: min(100%, 10rem);
flex-shrink: 1;
margin: 0;
flex: 1 1 30rem;
}
.tarot-card-more-info-flex-item {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
background-color: rgba(0,0,0,0.3);
border-radius: 0.75rem;
padding: 1rem;
position: relative;
}
#tarot-card-more-info-div .tarot-card-more-info-semiheader {
font-family: Raleway, 'sans-serif';
font-size: 1.5rem;
font-weight: 700;
margin: 0;
font-style: normal;
}
#tarot-card-more-info-div h4 {
font-family: Raleway, 'sans-serif';
font-size: 1.8rem;
font-weight: 900;
margin: 0;
}
#tarot-card-more-info-div h6 {
font-family: Raleway, 'sans-serif';
font-size: 1.2rem;
font-weight: 700;
margin: 0;
font-style: italic;
}
#tarot-card-more-info-div p {
font-family: Raleway, 'sans-serif';
font-size: 1rem;
font-weight: 400;
margin: 0;
}
.tarot-card-more-info-flex-item img {
width: min(100%, 20rem);
}
#tarot-card-more-info-div::-webkit-scrollbar {
width: 0.5rem;
height: 1rem;
}
#tarot-card-more-info-div::-webkit-scrollbar-track {
width: 0.5rem;
}
#tarot-card-more-info-div::-webkit-scrollbar-thumb {
width: 0.5rem;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 2rem;
}
#tarot-card-more-info-div .info-quotes {
font-size: 1rem;
font-weight: 900;
opacity: 0.52;
font-style: italic;
margin: 0.5rem 0;
}
#tarot-card-more-info-div .info-quotes::before {
content: "\"";
}
#tarot-card-more-info-div .info-quotes::after {
content: "\"";
}
.tarot-card-admin-edit-menu {
position: absolute;
display: flex;
right: 0;
top: 0;
cursor: pointer;
flex-direction: column;
align-items: flex-end;
}
.tarot-card-admin-edit-menu-toggle-button {
word-break: normal;
width: 6rem;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
align-items: center;
padding: 0.2rem;
user-select: none;
border-top-right-radius: 0.75rem;
border-top-left-radius: 0.75rem;
}
.tarot-card-admin-edit-menu-toggle-button.tarot-card-admin-edit-menu-toggle-button img {
width: 2rem;
margin-left: 0.5rem;
}
.tarot-card-admin-edit-menu-toggle-button:hover {
background-color: #4a4a4a;
color: rgb(240,240,240);
}
.tarot-card-admin-edit-menu-toggle-button:active {
background-color: #000000;
color: rgb(240,240,240);
}
.tarot-card-admin-edit-menu-toggle-button:hover img, .tarot-card-admin-edit-menu-toggle-button:active img {
filter: invert(1);
}
.tarot-card-admin-edit-menu-buttons-holder {
pointer-events: none;
opacity: 0;
display: none;
flex-direction: column;
background-color: #0d0d0d;
}
.tarot-card-admin-edit-menu-button {
padding: 0.75rem;
color: rgb(240,240,240);
}
.tarot-card-admin-edit-menu-button:hover {
background-color: #4a4a4a;
}
.tarot-card-admin-edit-menu-button:active {
background-color: #ebebeb;
color: #000000;
}
.tarot-card-admin-edit-menu:active, .tarot-card-admin-edit-menu:focus {
z-index: 7;
.tarot-card-admin-edit-menu-toggle-button {
background-color: #000000;
color: rgb(240,240,240);
}
.tarot-card-admin-edit-menu-toggle-button img {
filter: invert(1);
}
.tarot-card-admin-edit-menu-buttons-holder {
pointer-events: all;
opacity: 1;
display: flex;
}
}
.tarot-text-edit-mode-buttons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
row-gap: 1rem;
column-gap: 1rem;
padding: 0.3rem 0;
}
.tarot-text-edit-mode-saving {
background-color: #000000;
color: white;
padding: 0.3rem;
border-radius: 0.5rem;
}
.tarot-text-edit-mode-saving.tarot-text-edit-mode-saving p {
font-size: 1.2rem !important;
}
.previous-tarot-card-edit-div-text p {
margin: 0;
}
.previous-tarot-card-edit-div-text .info-quotes {
font-size: 1rem;
font-weight: 900;
opacity: 0.52;
font-style: italic;
margin: 0.5rem 0;
}
.previous-tarot-card-edit-div-text .info-quotes::before {
content: "\"";
}
.previous-tarot-card-edit-div-text .info-quotes::after {
content: "\"";
}
.edit-tarot-category-points-plus-minus-buttons {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
column-gap: 1rem;
}
.edit-tarot-category-points-plus-minus-buttons img {
width: 1.7rem;
height: 1.7rem;
object-fit: contain;
border-radius: 0.5rem;
background-color: #e8e8e8;
cursor: pointer;
}
.edit-tarot-category-points-plus-minus-buttons img:hover {
box-shadow: 0 0 0.7rem rgba(0, 0, 0, 0.5);
background-color: white;
}
.edit-tarot-category-points-plus-minus-buttons img:active {
box-shadow: 0 0 1.2rem 0.5rem rgba(0, 0, 0, 0.8);
background-color: #e8e8e8;
opacity: 0.6;
}
.legend-story-list {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 2rem;
margin-bottom: 5rem;
}
.legend-story-list hr {
border: none;
border-bottom: rgba(255,255,255,0.4) dashed 1rem;
width: 100%;
}
.legend-story-entry {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 2.5rem 1rem;
width: calc(100% - 2rem);
column-gap: 2rem;
row-gap: 1rem;
}
.legend-story-entry:nth-of-type(2n - 1) {
background-color: rgba(0,0,0,0.5);
}
.legend-story-entry:nth-of-type(2n) {
background-color: rgba(30,30,30,0.5);
}
.legend-story-part-image {
display: flex;
width: min(100%, 35rem);
height: auto;
padding: min(1rem, 3vw);
background-color: rgba(70,70,70,0.7);
border-radius: min(1rem, 3vw);
}
.legend-story-part-image img {
width: 100%;
height: auto;
}
.legend-story-part-text {
display: flex;
width: min(100%, 40rem);
background-color: rgba(70,70,70,0.7);
padding: min(1rem, 3vw);
border-radius: min(1rem, 3vw);
flex-direction: column;
row-gap: 0.3rem;
}
.legend-story-part-text p {
margin: 0;
font-family: Raleway, 'sans-serif';
font-weight: 300;
font-size: 1.1rem;
}
.legend-story-part-text .info-quotes {
font-weight: 500;
font-style: italic;
margin: 0;
}
.legend-story-part-text .info-quotes::before {
content: "\"";
font-size: 1.1rem;
}
.legend-story-part-text .info-quotes::after {
content: "\"";
font-size: 1.1rem;
}
.moving-background-1 {
background: linear-gradient(to right, rgb(55, 190, 208), rgb(64, 107, 208), rgb(126, 41, 157), rgb(136, 36, 69));
background-size: 200%;
background-position: 0%;
animation: moving-background-1-anim 6s ease-in-out infinite alternate;
}
@keyframes moving-background-1-anim {
from {
background-position: 0%;
}
to {
background-position: 100%;
}
}
.list-grid-style-1 {
display: grid;
width: calc(100% - 2rem);
padding: 1rem;
grid-template-columns: repeat(auto-fit, minmax(min(20rem, 60vw), 1fr));
row-gap: 1rem;
column-gap: 1rem;
justify-content: flex-start;
}
.current-info-item {
background-color: rgb(50,50,50);
border-radius: 0.5rem;
padding: 0.75rem;
}
.current-info-item p {
margin: 0;
font-size: 0.8rem;
}
.current-info-item-count {
font-size: 1rem;
font-weight: 900;
}
.daily-fortune-pick-a-card {
display: flex;
flex-direction: column;
row-gap: 1rem;
justify-content: center;
align-items: center;
width: 100%;
user-select: none;
opacity: 1;
transition: opacity 0.3s ease;
}
.daily-fortune-pick-a-card h2 {
margin: 0;
font-family: Raleway, 'sans-serif';
font-weight: 500;
font-size: 2rem;
text-align: center;
padding: 1rem;
}
.daily-fortune-pick-a-card-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow: visible;
}
.daily-fortune-pick-a-card-card-container {
display: flex;
flex-direction: row;
align-items: center;
overflow: visible;
}
.daily-fortune-pick-a-card-card-container:hover, .daily-fortune-pick-a-card-card-container:active {
z-index: 2;
}
.daily-fortune-pick-a-card-card {
position: relative;
margin: 0;
padding: 0;
transition: all 0.15s ease;
cursor: pointer;
}
.daily-fortune-pick-a-card-card img {
height: min(13rem, 40vw);
transition: transform 0.15s ease;
}
.daily-fortune-pick-a-card-card:hover {
z-index: 2;
transform: scale(1.2);
}
.daily-fortune-pick-a-card-card:active {
z-index: 2;
transform: scale(1.4);
}
.card-container-row1:not(.daily-fortune-pick-a-card-card-container-stop-animation) {
animation: dailyFortuneCardsMoveRightToLeft 20s alternate infinite ease-in-out -2s;
animation-timing-function: cubic-bezier(0.2,0,0.8,1);
}
.card-container-row2:not(.daily-fortune-pick-a-card-card-container-stop-animation) {
animation: dailyFortuneCardsMoveLeftToRight 20s alternate infinite ease-in-out -4s;
animation-timing-function: cubic-bezier(0.2,0,0.8,1);
}
.card-container-row1:active, .card-container-row2:active {
animation-play-state: paused;
}
.chosen-card-container-grid-item {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
position: relative;
}
.chosen-card-container-grid-item-back-image {
width: 100%;
/*width: min(100%, 85vw, 25rem);*/
filter: blur(0.2rem) grayscale(0.9) brightness(0.2);
}
.chosen-card-container-grid-item-card-image {
width: 100%;
/*width: min(100%, 85vw, 25rem);*/
/*transition: opacity 0.3s ease, transform 0.5s ease 1s;*/
transition: all 0.3s ease;
opacity: 0;
position: absolute;
z-index: 6;
user-select: none;
pointer-events: none;
top: 0rem;
left: 0rem;
}
.chosen-card-container-grid-item-card-image img {
width: 100%;
filter: blur(0.2rem);
position: relative;
transition: filter 0.2s ease;
z-index: 6;
}
.chosen-card-container-grid-item-card-image.chosen-card-container-grid-item-card-image-reveal {
opacity: 1;
pointer-events: all;
}
.chosen-card-container-grid-item-card-image.chosen-card-container-grid-item-card-image-reveal-ended {
transform: scale(1) translateX(0) translateY(0);
z-index: 2;
}
.chosen-card-container-grid-item-card-image.chosen-card-container-grid-item-card-image-reveal img {
filter: none;
}
/*.chosen-card-container-grid-item:nth-child(1) .chosen-card-container-grid-item-card-image:not(.chosen-card-container-grid-item-card-image-reveal-ended) {
transform: scale(3) translateX(min(13vw, 5rem)) translateY(calc(min(21vw, 7rem) * -1));
}
.chosen-card-container-grid-item:nth-child(2) .chosen-card-container-grid-item-card-image:not(.chosen-card-container-grid-item-card-image-reveal-ended) {
transform: scale(3) translateX(min(6.5vw, 2.5rem)) translateY(calc(min(21vw, 7rem) * -1));
}
.chosen-card-container-grid-item:nth-child(3) .chosen-card-container-grid-item-card-image:not(.chosen-card-container-grid-item-card-image-reveal-ended) {
transform: scale(3) translateX(0) translateY(calc(min(21vw, 7rem) * -1));
}
.chosen-card-container-grid-item:nth-child(4) .chosen-card-container-grid-item-card-image:not(.chosen-card-container-grid-item-card-image-reveal-ended) {
transform: scale(3) translateX(calc(min(6.5vw, 2.5rem) * -1)) translateY(calc(min(21vw, 7rem) * -1));
}
.chosen-card-container-grid-item:nth-child(5) .chosen-card-container-grid-item-card-image:not(.chosen-card-container-grid-item-card-image-reveal-ended) {
transform: scale(3) translateX(calc(min(13vw, 5rem) * -1)) translateY(calc(min(21vw, 7rem) * -1));
}*/
/*.chosen-card-container-grid-item .chosen-card-container-grid-item-card-image:not(.chosen-card-container-grid-item-card-image-reveal-ended) {
transform: scale(1) translateX(0) translateY(0);
}*/
/*.chosen-card-container-grid-item.chosen-card-container-grid-item-reveal:not(.chosen-card-container-grid-item-reveal-ended) {
transform: scale(3) translateX(0) translateY(0);
left: 50%;
}*/
.chosen-card-container-grid-item-card-image-info {
position: absolute;
display: flex;
flex-direction: column;
row-gap: min(0.1rem, 0.3vw);
/*transition: opacity 1s ease !important;*/
opacity: 1;
}
.chosen-card-container-grid-item-card-image-info h4 {
font-family: Raleway, 'sans-serif';
font-size: min(0.8rem, 2.2vw);
font-weight: 900;
margin: 0;
z-index: 6;
color: #000000;
position: relative;
transition: all 1s ease;
}
.chosen-card-container-grid-item-card-image-info p {
font-family: Raleway, 'sans-serif';
font-size: min(0.5rem, 1.4vw);
font-weight: 400;
margin: 0;
z-index: 6;
color: #000000;
position: relative;
transition: all 1s ease;
}
.chosen-card-container-grid-item-card-image-background {
position: absolute;
width: 100%;
height: calc(100% + min(3rem, 9vw));
z-index: 4;
top: calc(min(0.5rem, 1.5vw) * -1);
left: calc(min(0.5rem, 1.5vw) * -1);
padding: min(0.5rem, 1.5vw);
background-color: #e8e8e8;
border-radius: min(0.5rem, 1.5vw);
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
opacity: 1;
}
.chosen-card-container-grid-item-card-image-background p {
position: absolute;
top: calc(min(1.5rem, 4.5vw) * -1);
font-size: min(0.5rem, 1.4vw);
opacity: 0.8;
text-align: center;
}
.daily-fortune-pick-a-card-header {
opacity: 1;
transition: all 0.3s ease;
}
.block-page-black {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
z-index: 3;
overflow: hidden;
opacity: 1;
transition: opacity 0.3s ease;
}
.invisible {
opacity: 0;
pointer-events: none;
}
.chosen-card-container-grid-item-card-image.chosen-card-container-grid-item-card-image-reveal-ended .chosen-card-container-grid-item-card-image-background,
.chosen-card-container-grid-item-card-image.chosen-card-container-grid-item-card-image-reveal-ended .chosen-card-container-grid-item-card-image-info {
opacity: 0;
pointer-events: none;
}
@keyframes dailyFortuneCardsMoveRightToLeft {
0% {
transform: translateX(calc(50% - 50vw));
}
100% {
transform: translateX(calc(-50% + 50vw));
}
}
@keyframes dailyFortuneCardsMoveLeftToRight {
0% {
transform: translateX(calc(-50% + 50vw));
}
100% {
transform: translateX(calc(50% - 50vw));
}
}
.tarot-cards-influence-points-table {
width: 100%;
border-collapse: collapse;
display: table;
}
.tarot-cards-influence-points-table col:nth-child(1) {
width: 10%;
}
.tarot-cards-influence-points-table col:not(:nth-child(1)) {
width: 18%;
}
.tarot-cards-influence-points-table th {
padding: min(1rem, 2.5vw);
border: #e8e8e8 min(0.3rem, 0.8vw) solid;
background-color: rgba(255,255,255,0.5);
text-align: center;
font-weight: 700;
font-family: Raleway, 'sans-serif';
font-size: min(1rem, 3vw);
}
.tarot-cards-influence-points-table th img {
height: min(6rem, 16vw);
filter: grayscale(0.8);
}
.tarot-cards-influence-points-table th p {
margin: 0;
margin-bottom: 0.5rem;
font-size: min(1.5rem, 4.5vw);
}
.tarot-cards-influence-points-table td {
padding: min(1rem, 2.5vw);
border: #e8e8e8 min(0.3rem, 0.8vw) solid;
text-align: center;
font-family: Raleway, 'sans-serif';
font-size: min(1.5rem, 4.5vw);
font-weight: 400;
}
.tarot-cards-influence-points-table th:nth-child(1) {
background-color: rgba(156, 156, 156, 0.5);
font-weight: 700;
font-family: Raleway, 'sans-serif';
font-size: min(1rem, 3vw);
}
.tarot-cards-influence-points-table td:nth-child(1) {
background-color: rgba(156, 156, 156, 0.5);
font-weight: 700;
font-family: Raleway, 'sans-serif';
font-size: min(1rem, 3vw);
}
.tarot-cards-influence-points-table tr:nth-child(3) td:not(:nth-child(1)) {
background-color: rgba(216, 13, 13, 0.5);
}
.tarot-cards-influence-points-table tr:nth-child(4) td:not(:nth-child(1)) {
background-color: rgba(255, 162, 2, 0.5);
}
.tarot-cards-influence-points-table tr:nth-child(5) td:not(:nth-child(1)) {
background-color: rgba(29, 237, 230, 0.5);
}
.tarot-cards-influence-points-table tr:nth-child(6) td:not(:nth-child(1)) {
background-color: rgba(144, 237, 57, 0.5);
}
.tarot-cards-influence-points-table tr:nth-child(7) td:not(:nth-child(1)) {
background-color: rgba(255, 255, 0, 0.5);
}
.tarot-cards-influence-points-table tr:nth-child(8) td:not(:nth-child(1)) {
background-color: rgba(174, 174, 174, 0.5);
}
.tarot-cards-influence-points-table tr:nth-child(9) td:not(:nth-child(1)) {
background-color: rgba(0, 0, 0, 0.5);
}
.tarot-cards-influence-points-table tr:nth-child(10) td:not(:nth-child(1)) {
background-color: rgba(212, 126, 224, 0.5);
}
.tarot-cards-influence-points-table tr:nth-child(11) td:not(:nth-child(1)) {
background-color: rgba(255, 255, 255, 0.5);
}
.tarot-cards-influence-points-table tr:nth-child(12) td:not(:nth-child(1)) {
background-color: rgba(22, 191, 171, 0.5);
}
.gallery-scrollbar::-webkit-scrollbar {
width: 0.3rem;
height: 1rem;
}
.gallery-scrollbar::-webkit-scrollbar-track {
width: 0.3rem;
}
.gallery-scrollbar::-webkit-scrollbar-thumb {
width: 0.3rem;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 2rem;
}
.daily-fortune-daily-questions-info-div {
display: flex;
flex-direction: column;
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: min(1.5rem, 4.5vw);
width: calc(100% - min(5rem, 15vw));
background-color: rgb(40,40,40);
transition: opacity 0.3s ease;
max-width: 40rem;
border-radius: min(1rem, 3vw);
z-index: 3;
user-select: none;
}
.daily-fortune-daily-questions-info-div p {
text-align: center;
margin: 0.5rem 0;
}
.daily-fortune-daily-questions {
display: flex;
flex-direction: column;
position: absolute;
top: 50%;
height: 100%;
transform: translateY(-50%);
/*margin: min(1.5rem, 4.5vw);*/
width: calc(100% - min(3rem, 9vw));
transition: opacity 0.3s ease;
max-width: 40rem;
user-select: none;
}
.info-small-button {
width: min(2rem, 6vw);
padding: min(0.2rem, 0.6vw);
filter: invert(1);
border-radius: 3rem;
cursor: pointer;
position: absolute;
right: 0;
top: 0;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.info-small-button:hover {
background-color: rgb(190,190,190);
}
.info-small-button:active {
opacity: 0.8;
background-color: rgb(210,210,210);
}
.small-bordered-button {
display: flex;
border: rgb(200,200,200) 0.2rem solid;
font-size: 0.8rem;
font-family: Roboto, "sans-serif";
font-weight: 300;
padding: 0.3rem;
border-radius: 2rem;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
}
.small-bordered-button:hover {
background-color: rgb(60,60,60);
}
.small-bordered-button:active {
opacity: 0.8;
background-color: rgb(40,40,40);
}
.daily-fortune-daily-question-part {
display: flex;
flex-direction: column;
row-gap: min(1rem, 3vw);
justify-content: center;
align-items: center;
position: absolute;
top: 3rem;
width: 100%;
transition: opacity 0.3s ease;
}
.daily-fortune-daily-question-part h3 {
text-align: center;
font-family: Raleway, 'sans-serif';
font-size: min(1.5rem, 4.5vw);
font-weight: 400;
margin: 0;
margin-bottom: min(0.5rem, 1.5vw);
}
.daily-fortune-daily-question-part-answer {
text-align: center;
font-family: Raleway, 'sans-serif';
font-size: min(1.3rem, 3.9vw);
font-weight: 600;
margin: 0;
padding: min(0.75rem, 2.25vw) min(1rem, 3vw);
width: calc(100% - 2rem);
border: rgb(40,40,40) min(0.2rem, 0.6vw) solid;
border-radius: min(0.5rem, 1.5vw);
cursor: pointer;
}
.daily-fortune-daily-question-part-answer:hover {
background-color: rgb(60,60,60);
border: rgb(100,100,100) min(0.2rem, 0.6vw) solid;
box-shadow: 0 0 0.75rem 0.75rem rgba(255,255,255,0.3);
}
.daily-fortune-daily-question-part-answer:active {
background-color: rgb(40,40,40);
border: rgb(100,100,100) min(0.2rem, 0.6vw) solid;
opacity: 0.8;
box-shadow: 0 0 0.5rem 0.5rem rgba(255,255,255,0.1);
}
.daily-fortune-daily-question-part-answer-purple {
background-color: rgb(116, 10, 142);
border: rgb(192, 192, 192) min(0.2rem, 0.6vw) solid;
}
.daily-fortune-daily-question-part-answer-purple:hover {
background-color: rgb(145, 8, 179);
border: rgb(232, 232, 232) min(0.2rem, 0.6vw) solid;
}
.daily-fortune-daily-question-part-answer-purple:active {
background-color: rgb(76, 11, 92);
border: rgb(165, 165, 165) min(0.2rem, 0.6vw) solid;
}
/*LOADER CSS STARTS*/
/* HTML: */
.animated-loader-115 {
height: 80px;
width: 20px;
color: #514b82;
background:
radial-gradient(farthest-side,currentColor 94%,#0000 ) top/8px 8px,
linear-gradient(currentColor 0 0) top/4px 70%,
conic-gradient(from -30deg at bottom,#0000,currentColor 2deg 58deg,#0000 60deg) bottom /100% 20px,
conic-gradient(from 150deg at top ,#0000,currentColor 2deg 58deg,#0000 60deg) bottom 20px left 0/100% 20px;
background-repeat: no-repeat;
transform-origin: 50% 4px;
animation: l15 2s infinite cubic-bezier(0.5,300,0.5,-300);
}
@keyframes l15 {
100% {transform: rotate(0.5deg)}
}
/* HTML: */
.animated-loader-15 {
width: 50px;
aspect-ratio: 1.154;
display: grid;
color: #ffffff;
background:
linear-gradient(to bottom left ,#ffffff00 calc(50% - 1px),currentColor 0 calc(50% + 1px),#ffffff00 0) right/50% 100%,
linear-gradient(to bottom right,#ffffff00 calc(50% - 1px),currentColor 0 calc(50% + 1px),#ffffff00 0) left /50% 100%,
linear-gradient(currentColor 0 0) bottom/100% 2px;
background-repeat: no-repeat;
transform-origin: 50% 66%;
animation: l5 4s infinite linear;
}
.animated-loader-15::before,
.animated-loader-15::after {
content: "";
grid-area: 1/1;
background: inherit;
transform-origin: inherit;
animation: inherit;
}
.animated-loader-15::after {
animation-duration: 2s;
}
@keyframes l5{
100% {transform:rotate(1turn)}
}
/* HTML: */
.animated-loader-16 {
--c1:#673b14;
--c2:#f8b13b;
width: 40px;
height: 80px;
border-top: 4px solid var(--c1);
border-bottom: 4px solid var(--c1);
background: linear-gradient(90deg, var(--c1) 2px, var(--c2) 0 5px,var(--c1) 0) 50%/7px 8px no-repeat;
display: grid;
overflow: hidden;
animation: l5-0 2s infinite linear;
}
.animated-loader-16::before,
.animated-loader-16::after {
content: "";
grid-area: 1/1;
width: 75%;
height: calc(50% - 4px);
margin: 0 auto;
border: 2px solid var(--c1);
border-top: 0;
box-sizing: content-box;
border-radius: 0 0 40% 40%;
-webkit-mask:
linear-gradient(#000 0 0) bottom/4px 2px no-repeat,
linear-gradient(#000 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
background:
linear-gradient(var(--d,0deg),var(--c2) 50%,#0000 0) bottom /100% 205%,
linear-gradient(var(--c2) 0 0) center/0 100%;
background-repeat: no-repeat;
animation: inherit;
animation-name: l5-1;
}
.animated-loader-16::after {
transform-origin: 50% calc(100% + 2px);
transform: scaleY(-1);
--s:3px;
--d:180deg;
}
@keyframes l5-0 {
80% {transform: rotate(0)}
100% {transform: rotate(0.5turn)}
}
@keyframes l5-1 {
10%,70% {background-size:100% 205%,var(--s,0) 100%}
70%,100% {background-position: top,center}
}
/* HTML: */
.animated-loader-14 {
height: 60px;
aspect-ratio: 1;
display: grid;
}
.animated-loader-14:before,
.animated-loader-14:after {
content: "";
background:
radial-gradient(farthest-side,#000 15%,#0000 18%)0 0/50% 100%,
radial-gradient(50% 100% at 50% 160%,#fff 95%,#0000) 0 0 /50% 50%,
radial-gradient(50% 100% at 50% -60%,#fff 95%,#0000) 0 100%/50% 50%;
background-repeat: repeat-x;
-webkit-mask: radial-gradient(50% 100%,#000 95%,#0000) 0 100%/50% 0% repeat-x;
animation: l4 1s infinite alternate ease-in;
}
.animated-loader-14.animated-loader-14-white:after, .animated-loader-14.animated-loader-14-white::before {
filter: invert(0.9);
}
.animated-loader-14:after {
animation-duration: .7s;
}
@keyframes l4 {
0%,
70% {-webkit-mask-size:50% 100%}
85% {-webkit-mask-size:50% 0}
100% {-webkit-mask-size:50% 100%}
}
/*LOADER CSS ENDED*/
.type1list {
color: white;
display: flex;
flex-wrap: wrap;
flex-direction: row;
width: calc(100% - 4rem);
max-width: 122rem;
padding: 1rem;
margin: 1rem;
margin-bottom: 0rem;
border-radius: 1rem;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: linear-gradient(
120deg,
rgb(56, 56, 56) 0%,
rgb(83, 58, 88) 50%,
rgb(38, 67, 78) 100%
);
background-size: 300%;
background-position: 0%;
animation: quick-apps-and-games-background 12s infinite alternate ease-in-out;
}
@keyframes quick-apps-and-games-background {
from {
background-position: 0%;
}
to {
background-position: 100%;
}
}
.type1list.type1list-background2 {
background: linear-gradient(
120deg,
rgb(26, 76, 66) 0%,
rgb(63, 78, 98) 50%,
rgb(18, 87, 88) 100%
);
background-size: 300%;
background-position: 0%;
}
.type1list.type1list-background3 {
background: linear-gradient(
120deg,
rgb(86, 76, 26) 0%,
rgb(103, 78, 48) 50%,
rgb(58, 67, 48) 100%
);
background-size: 300%;
background-position: 0%;
}
.type1list.type2list {
padding: 0.3rem 0.6rem;
margin: 0.4rem 1rem;
width: calc(100% - 3.2rem);
}
.type1list-header {
margin: 0.5rem;
margin-right: 1rem;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
border-radius: 1rem;
padding: 1rem;
}
.type1list.type2list .type1list-header {
margin: 0.2rem 0.5rem;
padding: 0.5rem 1rem;
padding-right: 0.5rem;
background-color: rgb(80,100,110);
border: 2px rgb(150,150,150) dashed;
}
.type1list-item {
background-color: rgba(0, 0, 0, 0.563);
border-radius: 1rem;
padding: 1rem;
margin: 0.5rem;
display: flex;
justify-content: center;
align-items: center;
}
.type1list.type2list .type1list-item {
padding: 0.5rem 1rem;
margin: 0.3rem;
}
.type1list.type2list .type1list-item .checkbox-rect {
padding: 0.2rem 0.5rem !important;
}
.type1list-itemsarray {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
}
.type1list-itemsarray h3 {
background-color: rgba(0, 0, 0, 0.563);
border-radius: 1rem;
padding: 1rem;
margin: 0.5rem;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
align-self: stretch;
}
.type1list.type2list .type1list-itemsarray h3 {
padding: 0.5rem 1rem;
margin: 0.3rem;
}
.type1list-itemsarray h3.type1list-item-choosen {
background-color: rgba(5, 0, 15, 0.9);
box-shadow: 0px 0px 10px 10px rgba(230,200,255,0.4);
}
.type1list-itemsarray h3:hover {
background-color: rgba(0, 0, 0, 0.737);
}
.type1list-itemsarray h3:active {
background-color: rgba(0, 0, 0, 0.597);
opacity: 0.8;
}
.daily-questions-ended-div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
height: 100%;
transform: translateY(-50%);
/*margin: min(1.5rem, 4.5vw);*/
width: calc(100% - min(3rem, 9vw));
transition: opacity 0.3s ease;
max-width: 40rem;
user-select: none;
row-gap: 1rem;
}
.daily-questions-ended-div p {
text-align: center;
font-family: Raleway, 'sans-serif';
font-size: min(1.5rem, 4.5vw);
font-weight: 400;
margin: 0;
}
#magical-trying-to-connect-404 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: calc(100% - 2rem);
padding: 5rem 1rem;
row-gap: 1rem;
}
#magical-trying-to-connect-404 p {
text-align: center;
font-family: Raleway, 'sans-serif';
font-size: min(1.5rem, 4.5vw);
font-weight: 400;
margin: 0;
}
.header-big-holder {
display: flex;
width: 100%;
flex-direction: column;
}
.daily-fortune-first-panel {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
.daily-fortune-for-who-panel {
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
position: absolute;
top: 0rem;
transition: opacity 0.3s ease;
}
.daily-fortune-for-who-question {
display: flex;
flex-direction: column;
row-gap: min(1rem, 3vw);
padding: min(3rem, 9vw) min(1rem, 3vw);
width: calc(100% - min(2rem, 6vw));
justify-content: center;
align-items: center;
max-width: 40rem;
transition: opacity 0.3s ease;
}
.daily-fortune-for-who-question h3 {
text-align: center;
font-family: Raleway, 'sans-serif';
font-size: min(1.5rem, 4.5vw);
font-weight: 400;
margin: 0;
margin-bottom: min(0.5rem, 1.5vw);
}
.big-circle-shrink-background {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 150rem;
height: 100%;
background-color: rgb(202, 202, 202);
border-radius: 150rem;
animation: big-circle-shrink-background-anim forwards 2s ease;
}
@keyframes big-circle-shrink-background-anim {
from {
opacity: 1;
width: 150rem;
height: 100%;
}
to {
opacity: 0;
width: 0rem;
height: 80%;
}
}
.daily-fortune-for-who-question-info {
display: flex;
flex-direction: column;
position: absolute;
top: 2.5rem;
padding: min(1.5rem, 4.5vw);
width: calc(100% - min(3rem, 9vw));
background-color: rgb(40,40,40);
transition: opacity 0.3s ease;
border-radius: min(1rem, 3vw);
z-index: 3;
user-select: none;
max-height: 70vh;
overflow-y: auto;
box-shadow: 0rem 1rem 0.5rem 0 rgb(0,0,0,0.4);
}
.daily-fortune-for-who-question-info p {
display: list-item;
list-style: disc outside;
margin: 0.55rem 0;
margin-left: min(1rem, 3vw);
}
.info-small-button.yellow-pulse {
transform: translateX(0.2rem) translateY(-0.2rem);
animation: info-small-button-yellow-pulse-anim alternate infinite ease 1s;
}
@keyframes info-small-button-yellow-pulse-anim {
from {
border: 0.2rem solid rgba(0, 64, 255, 1);
}
to {
border: 0.2rem solid rgba(0, 64, 255, 0);
}
}
.daily-fortune-for-who-question-info-table {
border-collapse: collapse;
display: table;
margin-bottom: 1rem;
}
.daily-fortune-for-who-question-info-table col {
width: 50%;
}
.daily-fortune-for-who-question-info-table th {
border: solid rgb(170,170,170) 0.2rem;
padding: 1rem 0.75rem;
text-align: center;
background-color: rgb(60,60,60);
font-family: Raleway, 'sans-serif';
font-size: min(1.3rem, 3.9vw);
font-weight: 700;
}
.daily-fortune-for-who-question-info-table td {
border: solid rgb(170,170,170) 0.2rem;
padding: 1rem 0.75rem;
text-align: center;
font-family: Raleway, 'sans-serif';
font-size: min(1rem, 3vw);
font-weight: 400;
}
.gallery-scrollbar-wide::-webkit-scrollbar {
width: 0.75rem;
height: 1rem;
}
.gallery-scrollbar-wide::-webkit-scrollbar-track {
width: 0.75rem;
}
.gallery-scrollbar-wide::-webkit-scrollbar-thumb {
width: 0.75rem;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 2rem;
}
.gallery-scrollbar-cropped::-webkit-scrollbar-track {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.add-new-candle-form {
width: calc(100% - 2rem);
padding: 1rem;
margin: 1rem 0;
border-radius: 0.5rem;
background-color: rgb(30,30,30);
display: flex;
flex-direction: column;
row-gap: 1.5rem;
}
.add-new-candle-form-part {
display: flex;
flex-direction: column;
width: 100%;
}
input {
padding: 0.75rem;
font-family: Roboto, "sans-serif";
font-size: 1rem;
}
textarea {
padding: 0.75rem;
font-family: Roboto, "sans-serif";
font-size: 1rem;
}
.add-new-candle-form textarea {
min-height: 7rem;
max-width: calc(100% - 1.5rem);
}
.add-new-candle-form h2 {
font-family: Raleway, 'sans-serif';
font-size: 1.75rem;
font-weight: 800;
margin: 0.5rem 0;
}
.add-new-candle-form label {
font-family: Raleway, 'sans-serif';
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.2rem;
}
.search-icon {
width: 2rem;
padding: 0.5rem;
background-color: rgb(240,240,240);
border-radius: 5rem;
cursor: pointer;
}
.search-icon:hover {
background-color: rgb(255,255,255);
box-shadow: 0 0 0.5rem 0.5rem rgba(255,255,255,0.3);
}
.search-icon:active {
background-color: rgb(200,200,200);
box-shadow: 0 0 0.5rem 0.5rem rgba(255,255,255,0.3);
opacity: 0.8;
}
.candle-design-color-grid {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
gap: 0.5rem;
user-select: none;
}
.candle-design-color-item {
height: 3rem;
cursor: pointer;
border: 0.3rem solid transparent;
transition: border-color 0.1s ease;
position: relative;
}
.candle-design-color-item.selected {
border-color: white;
box-shadow: 0 0 1rem 1rem rgba(255,255,255,0.3);
}
.candle-design-color-item.selected::after {
content: "";
position: absolute;
display: flex;
width: 2rem;
height: 2rem;
background-image: url("/needs/check_small.png");
bottom: 0.2rem;
right: 0.2rem;
z-index: 1;
}
.candle-design-color-item.selected::before {
content: "";
position: absolute;
display: flex;
width: 2rem;
height: 2rem;
background-image: url("/needs/check_small.png");
bottom: 0.2rem;
right: 0.4rem;
z-index: 1;
filter: invert(1);
}
.candle-design-color-name {
margin: 0;
}
.hideable-info-paragraph {
display: flex;
flex-direction: column;
padding: 0.5rem 1rem;
border: 2px rgba(255,255,255,0.5) solid;
margin: 1rem 0rem;
border-radius: 1rem;
transition: all 0.5s ease;
background-color: rgba(0,0,0,0.53);
}
.hideable-info-paragraph:not(.hide-info-paragraph) {
animation: hideable-info-paragraph-delayed-overflow 0.5s linear;
}
@keyframes hideable-info-paragraph-delayed-overflow {
from {
overflow: hidden;
}
to {
overflow: unset;
}
}
.hideable-info-paragraph:not(.hide-info-paragraph).hideable-info-paragraph-transparent-when-normal {
background-color: unset;
}
.hideable-info-paragraph.hide-info-paragraph {
max-height: 5rem !important;
background-color: rgba(0,0,0,0.20);
overflow: hidden;
}
.hideable-info-paragraph:not(.dont-auto-margin-p-for-paragraph) p {
margin: 0.3rem 0rem;
}
.hideable-info-paragraph-close-holder {
position: relative;
display: flex;
width: 100%;
height: 0rem;
justify-content: flex-end;
flex-direction: row;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.hideable-info-paragraph-close-button {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0.5rem;
z-index: 2;
}
.hideable-info-paragraph-close-button img {
height: 2.5rem;
filter: brightness(3);
opacity: 0.5;
transform: rotateZ(90deg);
cursor: pointer;
transition: transform 0.3s ease;
}
.hideable-info-paragraph.hide-info-paragraph .hideable-info-paragraph-close-button img {
transform: rotateZ(-90deg);
}
.hideable-info-paragraph-close-button:hover {
background-color: rgba(0, 0, 0, 0.4);
}
.hideable-info-paragraph-close-button:hover img {
opacity: 0.75;
}
.hideable-info-paragraph-close-button:active {
background-color: rgba(0, 0, 0, 0.4);
opacity: 0.5;
}
.hideable-info-paragraph-close-button:active img {
opacity: 0.75;
}
.hideable-info-paragraph-text-holder {
display: flex;
flex-direction: column;
}
input[type=date] {
position: relative;
}
input[type=date]::-webkit-calendar-picker-indicator {
height: 2rem;
width: 2rem;
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
}
/* checkbox-rect */
.checkbox-rect {
display: flex;
align-items: center;
flex-direction: row;
}
.checkbox-rect input[type="checkbox"] {
display: none;
}
.checkbox-rect input[type="checkbox"] + label {
display: flex;
align-items: center;
flex-direction: row;
position: relative;
/*padding-left: 35px;
margin-bottom: 20px;*/
margin-left: 2.1rem;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.checkbox-rect input[type="checkbox"]:hover + label:hover {
color: rgb(213, 213, 213);
}
.checkbox-rect input[type="checkbox"]:hover + label:before {
background: #50565a;
box-shadow: inset 0px 0px 0px 2px #f7f2f2;
}
.checkbox-rect input[type="checkbox"] + label:last-child {
margin-bottom: 0;
}
.checkbox-rect input[type="checkbox"] + label:before {
content: "";
display: flex;
width: 1.4rem;
height: 1.4rem;
border: 1px solid #343a3f;
border-radius: 0.2rem;
position: absolute;
left: -2.1rem;
top: 50%;
transform: translateY(-50%);
-webkit-transition: all 0.2s, background 0.2s ease-in-out;
transition: all 0.2s, background 0.2s ease-in-out;
background: #f3f3f3;
}
.checkbox-rect input[type="checkbox"]:checked + label:before {
width: 1.3em;
height: 1.3em;
border-radius: 0.2em;
border: 2px solid #fff;
-webkit-transform: rotate(90deg) translateX(-50%);
transform: rotate(90deg) translateX(-50%);
background: #50565a;
box-shadow: 0 0 0 1px #000;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkbox-rect input[type="checkbox"] + label:after {
content: "";
position: absolute;
display: flex;
opacity: 0;
transition: opacity 0.15s ease-in-out;
}
/* Show the checkmark when checked */
.checkbox-rect input[type="checkbox"]:checked + label:after {
opacity: 1;
}
/* Style the checkmark/indicator */
.checkbox-rect input[type="checkbox"] + label:after {
left: -1.55rem;
top: 50%;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: translateY(calc(-50% - 0.1rem)) rotate(45deg);
-ms-transform: translateY(calc(-50% - 0.1rem)) rotate(45deg);
transform: translateY(calc(-50% - 0.1rem)) rotate(45deg);
}
/* checkbox-rect end */
.checkbox-rect.checkbox-rect-little input[type="checkbox"] + label:after {
left: -1.6rem;
height: 8px;
width: 4px;
}
.checkbox-rect.checkbox-rect-more-little input[type="checkbox"] + label:after {
left: -1.65rem;
height: 8px;
width: 4px;
}
.qr-code-reader-window {
display: flex;
flex-direction: column;
position: fixed;
top: 50%;
left: 50%;
width: calc(100% - 2rem);
height: calc(100% - 2rem);
background-color: #000;
padding: 1rem;
transform: translateX(-50%) translateY(-50%);
z-index: 10;
box-shadow: 0 0 0rem 2rem rgb(0,0,0);
align-items: center;
}
.qr-code-reader-window .qr-code-reader-header-text {
font-size: min(2rem, 6vw);
margin: 0 2rem;
text-align: center;
font-family: Raleway, 'sans-serif';
font-weight: 400;
width: calc(100% - 4rem);
}
.qr-code-reader-window .qr-code-reader-qr-code-index-text {
font-size: min(1.5rem, 4.5vw);
margin: 0.2rem 2rem;
text-align: center;
font-family: Raleway, 'sans-serif';
font-weight: 900;
width: calc(100% - 4rem);
}
.qr-code-reader-window .qr-code-reader-options {
max-width: min(100%, 40rem);
width: 100%;
display: flex;
flex-direction: column;
}
.qr-code-reader-camera-div {
width: 100%;
display: flex;
flex-direction: column;
}
#qr-code-reader video {
display: flex !important;
object-fit: contain !important;
width: auto !important;
justify-content: center !important;
align-items: center !important;
margin: auto;
max-width: 100% !important;
max-height: 75vh !important;
}
@media print {
.no-print, .no-print * {
display: none !important;
}
}
.qr-code-canvas {
width: 100% !important;
height: auto !important;
}
.scent-picker-panel {
display: flex;
flex-direction: column;
padding: 1rem;
box-shadow: 0 0 2rem 2rem rgba(0,0,0,0.5);
border-radius: 0.5rem;
width: min(30rem, calc(100% - 2rem));
max-height: 90vh;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: rgb(50,100,100);
z-index: 11;
}
.scent-picker-search-results-div {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
max-height: 60vh;
overflow-y: auto;
/*justify-content: center;*/
align-items: center;
}
.any-picker-result-item, .any-picker-create-as-new-item {
display: flex;
justify-content: center;
align-items: center;
padding: 0.75rem 0.5rem;
background-color: #000;
border-radius: 0.4rem;
width: calc(100% - 1rem);
cursor: pointer;
user-select: none;
flex-direction: column;
}
.any-picker-result-item:hover, .any-picker-create-as-new-item:hover {
background-color: rgb(240,240,240);
color: black;
}
.any-picker-result-item:active, .any-picker-create-as-new-item:active {
background-color: rgb(200,200,200);
color: black;
}
.any-picker-result-item p, .any-picker-create-as-new-item p {
margin: 0 0.5rem;
text-align: center;
}
.any-picker-create-as-new-item {
background-color: rgb(50, 27, 50);
border: 0.3rem solid rgb(227, 227, 227);
width: calc(100% - 1.6rem);
border-radius: 0.75rem;
}
.form-part-mark-as-changed {
position: relative;
left: -1rem;
padding: 0.5rem 1rem;
background-color: rgba(21, 233, 212, 0.506);
border-radius: 1rem;
}
.fixed-box-panel {
display: flex;
flex-direction: column;
padding: 1rem;
box-shadow: 0 0 2rem 2rem rgba(0,0,0,0.6);
border-radius: 0.5rem;
width: min(30rem, calc(100% - 2rem));
max-height: calc(100% - 2rem);
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: rgb(46, 45, 55);
z-index: 13;
overflow-y: auto;
min-height: 3rem;
}
.fixed-box-panel::-webkit-scrollbar {
width: 0.75rem;
height: 1rem;
}
.fixed-box-panel::-webkit-scrollbar-track {
width: 0.75rem;
}
.fixed-box-panel::-webkit-scrollbar-thumb {
width: 0.75rem;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 2rem;
}
@keyframes left-to-right-cycle-periodic-1 {
from {
left: 0rem;
transform: translateX(0) translateY(-50%);
}
to {
left: 100%;
transform: translateX(-100%) translateY(-50%);
}
}
.progress-bar-1 {
display: flex;
width: 100%;
background-color: #181818;
padding: 0.2rem;
border-radius: 2rem;
height: 1rem;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.progress-bar-1 .progress-bar-progress {
height: 100%;
max-width: 100%;
min-width: 2%;
background-color: #879bc6;
border-radius: 2rem;
transition: all 1s ease;
animation: progress-bar-progress-on-start 1 ease 1s;
}
@keyframes progress-bar-progress-on-start {
from {
width: 2%;
background-color: rgb(240,240,240);
}
to {
}
}
.candle-timeline-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 1.5rem;
row-gap: 0.1rem;
border-collapse: collapse;
}
.candle-timeline-grid-item {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 0.2rem;
}
.candle-timeline-grid-item p {
margin: 0 !important;
}
.candle-timeline-grid-item:nth-child(2n-1) {
justify-content: flex-end;
padding-top: 0.2rem;
text-align: end;
position: relative;
}
.candle-timeline-grid-item:nth-child(2n) {
cursor: pointer;
position: relative;
}
.candle-timeline-grid-item:nth-child(2n):hover {
background-color: rgb(240,240,240);
color: #000;
z-index: 1;
box-shadow: 0 0 0.5rem 0.5rem rgba(0, 0, 0, 0.3);
}
.candle-timeline-grid-item:nth-child(2n):active {
background-color: rgb(176, 176, 176);
color: #000;
z-index: 1;
box-shadow: 0 0 0.5rem 0.5rem rgba(0, 0, 0, 0.3);
}
.candle-timeline-grid-item:nth-child(2n):focus {
background-color: rgb(255,255,255);
color: #000;
z-index: 1;
box-shadow: 0 0 0.5rem 0.5rem rgba(0, 0, 0, 0.3);
}
.candle-timeline-grid-item:nth-child(2n).marked-for-delete {
background-color: rgb(130, 12, 12);
color: white;
text-decoration: line-through;
}
.candle-timeline-grid-item:nth-child(2n).marked-for-delete p::after {
content: "🗑";
}
.candle-timeline-grid-item:nth-child(2n).marked-for-delete::before {
content: "";
display: flex;
width: calc(100% + 0.6rem);
height: 100%;
left: -0.3rem;
top: 0rem;
position: absolute;
background-color: inherit;
border-radius: 0.1rem;
}
.candle-timeline-grid-item:nth-child(2n).marked-for-delete:hover {
background-color: rgb(201, 49, 49);
}
.candle-timeline-grid-item:nth-child(2n).marked-for-delete:active {
background-color: rgb(149, 43, 43);
}
.candle-timeline-grid-item:nth-child(2n).marked-for-delete:focus {
background-color: rgb(199, 83, 83);
}
.candle-timeline-grid-item:nth-child(2n):hover > p, .candle-timeline-grid-item:nth-child(2n):active > p, .candle-timeline-grid-item:nth-child(2n):focus > p, .candle-timeline-grid-item:nth-child(2n).marked-for-delete p {
z-index: 1;
}
.candle-timeline-grid-item:nth-child(2n):hover::before, .candle-timeline-grid-item:nth-child(2n):active::before, .candle-timeline-grid-item:nth-child(2n):focus::before {
content: "";
display: flex;
width: calc(100% + 0.6rem);
height: calc(100% + 0.6rem);
left: -0.3rem;
top: -0.3rem;
position: absolute;
background-color: inherit;
border-radius: 0.3rem;
}
.candle-timeline-grid-item-delete {
position: absolute;
top: 0;
right: 0;
background-color: rgb(220,40,40);
padding: 0.3rem 0.6rem;
cursor: pointer;
opacity: 0;
pointer-events: none;
transform: translateY(-100%);
color: white;
user-select: none;
border-radius: 0.3rem;
z-index: 4;
}
.candle-timeline-grid-item:nth-child(2n):active .candle-timeline-grid-item-delete, .candle-timeline-grid-item:nth-child(2n):focus .candle-timeline-grid-item-delete {
opacity: 1;
pointer-events: all;
}
.candle-timeline-grid-item-delete:hover {
background-color: rgb(255, 74, 74);
box-shadow: 0 0 0.5rem 0.5rem rgba(255,255,255,0.4);
}
.candle-timeline-grid-item-delete:active {
background-color: rgb(156, 27, 27);
box-shadow: 0 0 0.5rem 0.5rem rgba(0, 0, 0, 0.4);
}
.marked-for-delete .candle-timeline-grid-item-delete {
background-color: rgb(227, 227, 227);
color: black;
}
.marked-for-delete .candle-timeline-grid-item-delete:hover {
background-color: rgb(255, 255, 255);
color: black;
}
.marked-for-delete .candle-timeline-grid-item-delete:active {
background-color: rgb(190, 190, 190);
color: black;
}
.candle-timeline-grid-item:nth-child(2n-1)::after {
content: "";
border-radius: 1rem;
width: 0.3rem;
/*height: 0.7rem;*/
height: calc(100% - 0.3rem);
position: absolute;
right: -0.75rem;
/*top: 0.65rem;*/
top: 0.2rem;
background-color: rgba(255,255,255);
/*transform: translateX(50%) translateY(-50%);*/
transform: translateX(50%);
}
.candle-timeline-grid-item:nth-child(16n-15)::after {
animation: opacity-cycle-animation-1 infinite ease-in-out alternate 1s -2s;
}
.candle-timeline-grid-item:nth-child(16n-13)::after {
animation: opacity-cycle-animation-1 infinite ease-in-out alternate 1s -1.75s;
}
.candle-timeline-grid-item:nth-child(16n-11)::after {
animation: opacity-cycle-animation-1 infinite ease-in-out alternate 1s -1.5s;
}
.candle-timeline-grid-item:nth-child(16n-9)::after {
animation: opacity-cycle-animation-1 infinite ease-in-out alternate 1s -1.25s;
}
.candle-timeline-grid-item:nth-child(16n-7)::after {
animation: opacity-cycle-animation-1 infinite ease-in-out alternate 1s -1s;
}
.candle-timeline-grid-item:nth-child(16n-5)::after {
animation: opacity-cycle-animation-1 infinite ease-in-out alternate 1s -0.75s;
}
.candle-timeline-grid-item:nth-child(16n-3)::after {
animation: opacity-cycle-animation-1 infinite ease-in-out alternate 1s -0.5s;
}
.candle-timeline-grid-item:nth-child(16n-1)::after {
animation: opacity-cycle-animation-1 infinite ease-in-out alternate 1s -0.25s;
}
@keyframes opacity-cycle-animation-1 {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.candle-timeline-grid-item-hold-info:not(:focus):not(:active) > p:after {
content: "...";
margin: 0 0.1rem;
font-weight: 700;
opacity: 0.6;
}
.candle-timeline-grid-item-more-text {
font-size: 0.8rem;
font-style: italic;
pointer-events: none;
opacity: 0;
max-height: 0rem;
z-index: 1;
}
.candle-timeline-grid-item.candle-timeline-grid-item-hold-info:active .candle-timeline-grid-item-more-text, .candle-timeline-grid-item.candle-timeline-grid-item-hold-info:focus .candle-timeline-grid-item-more-text {
pointer-events: all;
opacity: 0.9;
color: black;
transition: all 0.3s ease;
max-height: unset;
}
.any-picker-result-item.item-already-done::after {
content: "";
position: absolute;
height: 100%;
width: 0.8rem;
background-color: rgba(10,255,10,0.8);
border-radius: 0.4rem;
left: 0;
top: 0;
transition: all 0.3s ease;
}
.any-picker-result-item.next-item-to-select::after {
content: "";
position: absolute;
height: 50%;
width: 0.8rem;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 0.4rem;
left: 0;
top: 0;
animation: opacity-cycle-animation-1 infinite ease-in-out alternate 1s;
transition: all 0.3s ease;
}
.any-picker-result-item.now-selected {
background-color: rgb(217, 228, 255);
color: #000;
}
.any-picker-result-item.now-selected:hover {
background-color: white;
}
.any-picker-result-item.now-selected:active {
background-color: rgb(213, 213, 213);
}
.any-picker-result-item.now-selected::after {
content: "";
position: absolute;
height: 100%;
width: 0.8rem;
background-color: rgb(255, 255, 255);
border-radius: 0.4rem;
left: 0;
top: 0;
animation: color-white-black-cycle-animation-1 infinite alternate 1s ease;
transition: all 0.3s ease;
}
@keyframes color-white-black-cycle-animation-1 {
from {
background-color: rgb(255, 255, 255);
}
to {
background-color: rgb(78, 78, 78);
width: 1.5rem;
opacity: 0.5;
box-shadow: 1.2rem 0rem 0 0 rgba(255,255,255,0.7);
}
}
#production-timeline-div.form-part-mark-as-changed {
background-color: rgba(25, 126, 189, 0.7) !important;
}
#design-timeline-div.form-part-mark-as-changed {
background-color: rgba(242, 212, 39, 0.6) !important;
}
.all-candles-page-candle-item {
background-color: rgb(50,50,50);
}
.all-candles-page-candle-item:hover {
background-color: rgb(90, 90, 90);
}
.all-candles-page-candle-item:active {
background-color: rgb(30, 30, 30);
}
@keyframes color-white-black-background-cycle-animation-1 {
from {
background-color: rgb(255, 255, 255);
}
to {
background-color: rgb(181, 181, 181);
box-shadow: 1rem 0rem 0 0 rgba(255,255,255,0.7);
}
}
@keyframes color-white-black-background-cycle-animation-2 {
from {
opacity: 1;
}
to {
opacity: 0.9;
box-shadow: 1rem 0rem 0 0 rgba(255,255,255,0.7);
}
}
.hover-stop-animation:hover {
/*animation-play-state: paused !important;*/
animation: none !important;
}
#background-blocker-div {
display: flex;
position: fixed;
width: 110vw;
height: 110vh;
background-color: rgba(0,0,0,0.5);
transform: translateX(-50%) translateY(-50%);
left: 50%;
top: 50%;
z-index: 3;
}
/*FAQ: */
.content-columns {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
justify-content: center;
align-items: stretch;
position: relative;
}
.left-content {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
flex-grow: 1;
border: #262626 1px solid;
}
.right-content {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
flex-grow: 1;
border: #262626 1px solid;
}
.faq-categories-left {
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-direction: column;
padding: 0rem;
padding-bottom: 1rem;
margin-top: 1rem;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: -webkit-sticky;
position: sticky;
top: 2.5rem;
}
.faq-categories-left h3 {
background-color: rgba(0,0,0,0.3);
margin: 0.5rem 0rem;
padding: 0.75rem 1rem;
border-bottom-left-radius: 1rem;
border-top-left-radius: 1rem;
}
.faq-categories-left ul {
padding: 0rem;
padding-left: 1rem;
margin-top: 0.75rem;
width: 14rem;
list-style: none;
max-height: 70vh;
overflow-y: auto;
overflow-x: visible;
position: relative;
scroll-behavior: smooth;
align-items: stretch;
}
.faq-categories-left ul::-webkit-scrollbar {
width: 0.3rem;
height: 0.5rem;
}
.faq-categories-left ul::-webkit-scrollbar-track {
width: 0.3rem;
}
.faq-categories-left ul::-webkit-scrollbar-thumb {
width: 0.3rem;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 2rem;
}
.faq-categories-left li {
padding: 0rem;
padding-left: 1rem;
margin: 0rem;
cursor: pointer;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
flex-wrap: nowrap;
border-bottom-left-radius: 1rem;
border-top-left-radius: 1rem;
}
.faq-categories-left li p {
margin: 0rem;
padding: 0.75rem 0rem;
}
.faq-categories-left li .list-end-marker-div {
width: 0.3rem;
transition: all 0.2s ease;
}
.faq-categories-left li:hover {
background-color: rgba(0,0,0,0.3);
font-weight: 900;
}
.faq-categories-left li:hover .list-end-marker-div {
background-color: rgba(255, 119, 0, 0.623);
}
.faq-categories-left li:active {
background-color: rgba(0,0,0,0.2);
font-weight: 900;
opacity: 0.8;
}
.faq-categories-left li.faq-li-selected {
font-weight: 900;
}
.faq-categories-left li.faq-li-selected .list-end-marker-div {
background-color: rgba(255, 119, 0, 0.85);
}
.normal-text-searchbar {
display: flex;
flex-direction: row;
width: calc(100% - 2rem);
justify-content: space-between;
align-items: center;
background-color: rgba(0,0,0,0.6);
padding: 0.5rem 1rem;
margin-top: 1.5rem;
margin-bottom: 1rem;
border-radius: 1rem;
}
.content-columns.light-mode .normal-text-searchbar {
/*background-color: rgba(255,255,255,0.45);*/
background-color: white;
}
.content-columns.light-mode .normal-text-searchbar input {
/*background-color: white;*/
border-color: rgb(230,230,230);
background-color: rgb(245, 245, 245);
color: #000;
}
.content-columns.light-mode .normal-text-searchbar .search-icon {
filter: none;
}
.content-columns.light-mode .normal-text-searchbar .search-icon:hover {
filter: invert(1);
background-color: #dfdfdf;
}
.content-columns.light-mode .normal-text-searchbar .search-icon:active {
filter: invert(1);
background-color: #dfdfdf;
opacity: 0.7;
}
.content-columns.light-mode #classic-hr {
border-color: rgb(217, 217, 217);
}
.normal-text-searchbar form {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-grow: 1;
}
.normal-text-searchbar form label {
flex-grow: 0;
flex-shrink: 0;
margin-right: 0.5rem;
}
.normal-text-searchbar form input {
flex-grow: 1;
flex-shrink: 1;
}
.normal-text-searchbar .search-icon {
flex-grow: 0;
flex-shrink: 0;
height: 2rem;
filter: invert(1);
margin-left: 0.3rem;
border-radius: 5rem;
padding: 0.2rem;
cursor: pointer;
}
.normal-text-searchbar .search-icon:hover {
background-color: #E8E8E8;
filter: invert(0);
}
.normal-text-searchbar .search-icon:active {
background-color: rgb(161, 161, 161);
filter: invert(0);
}
[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
height: 1.2rem;
width: 1.2rem;
background-image: url("/needs/close_small.png");
background-size: 100%;
position: relative;
right: -0.5rem;
cursor: pointer;
}
[type="search"]::-webkit-search-cancel-button:hover {
border: 1px rgb(0, 0, 0) solid;
right: calc(-0.5rem - 1px);
border-radius: 3px;
}
#faq-categories-mobile-holder {
width: calc(100% - 4rem);
padding-left: 2rem;
padding-right: 2rem;
padding-top: 0.5rem;
padding-bottom: 0rem;
}
.faq-categories-mobile {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
width: 100%;
flex-wrap: wrap;
}
.faq-categories-mobile form {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
background-color: rgba(0,0,0,0.6);
flex-grow: 1;
padding: 1rem;
border-radius: 1rem;
margin: 0.5rem;
}
.faq-qa-holder .faq-question-div {
display: flex;
align-items: flex-start;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
z-index: 2;
position: relative;
cursor: pointer;
}
.faq-question-div-background-holder {
display: flex;
flex-direction: column;
width: 100%;
position: relative;
justify-content: center;
align-items: center;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
z-index: 0;
}
.faq-question-div-background {
position: absolute;
bottom: 0rem;
display: flex;
height: 5rem;
width: calc(120% + 8rem);
background-color: rgba(0,0,0,0.3);
opacity: 0;
transition: all 0.1s ease;
}
.faq-question-div-background.faq-question-div-background-show {
opacity: 1;
}
.faq-question-div-background.faq-question-div-background-click {
background-color: rgba(0,0,0,0.7);
transition: all 0s;
}
.faq-qa-holder .faq-question-div img {
transform: rotateZ(90deg);
transition: all 0.3s ease;
filter: brightness(2);
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.faq-qa-holder.close-faq-div .faq-question-div img {
transform: rotateZ(-90deg);
filter: brightness(1);
}
.faq-normal-text-div h3 {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
background-color: #e8e8e8;
color: black;
position: relative;
padding: 0.2rem 1rem 0.2rem 5rem;
left: -5rem;
border-radius: 1rem;
}
.faq-answer-div {
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
overflow: hidden;
transition: all 0.5s ease;
}
.faq-qa-holder.close-faq-div .faq-answer-div {
max-height: 0rem;
}
.faq-answer-div p {
margin: 0rem;
padding-top: 0.4rem;
padding-bottom: 1rem;
z-index: 1;
}
.faq-header-div {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
width: 100%;
position: relative;
left: -5rem;
margin: 1.5rem 0rem 0.6rem 0rem;
padding: 1rem 5rem;
background: linear-gradient(
90deg,
rgb(193, 90, 0) 0%,
rgb(148, 97, 53) 40%,
rgb(27, 153, 158) 60%,
rgb(42, 171, 176) 100%
);
background-size: 250%;
background-position: 0%;
transition: all 1s ease;
}
.faq-header-div h2 {
margin: 0rem;
}
.faq-see-other-support {
display: flex;
flex-direction: column;
background-color: rgba(0,0,0,0.3);
margin-top: 2.5rem;
margin-left: 1rem;
padding: 1rem;
padding-bottom: 0.5rem;
border-radius: 1rem;
width: 15rem;
margin-bottom: 2rem;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.faq-see-other-support h3 {
margin: 0.5rem 0rem;
}
#faq-see-other-support-buttons-div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
}
.faq-see-other-support-for-mobile .faq-see-other-support-button {
margin: 0.5rem;
width: 13rem;
}
.faq-see-other-support-button {
margin: 0.5rem 0rem;
padding: 1rem;
text-align: center;
background-color: black;
border-radius: 1rem;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.faq-see-other-support-button p {
margin-top: 0.1rem;
margin-bottom: 0rem;
}
.faq-see-other-support-button img {
height: 6rem;
}
.faq-see-other-support-button:hover {
box-shadow: 0px 0px 10px 10px rgba(255,255,255,0.3), 0px 0px 10px 10px inset rgba(255,255,255,0.3);
}
.faq-see-other-support-button:active {
box-shadow: 0px 0px 10px 10px rgba(255,255,255,0.1), 0px 0px 10px 10px inset rgba(255,255,255,0.1);
opacity: 0.7;
}
.faq-see-other-support-button:hover img {
filter: drop-shadow(0px 0px 10px rgba(255,255,255,0.5));
}
.highlight-text-orange {
/*background-color: #EEF43B;*/
background-color: #f4aa3b;
}
.faq-qa-holder h3 .highlight-text-orange {
/*background-color: #EEF43B;*/
background-color: #f4aa3b;
}
.faq-qa-holder p .highlight-text-orange {
/*background-color: #EEF43B;*/
background-color: #966925;
}
.admin-faq-tag-list {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
width: 100%;
}
.admin-faq-tag-list-item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0.5rem 0rem;
flex-wrap: wrap;
}
.admin-faq-tag-list-item form {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
margin-right: 0.5rem;
}
.admin-faq-tag-list hr {
width: 100%;
}
.admin-faq-tag-list p {
margin: 0rem;
}
.admin-faq-tag-list-item-form-item {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.admin-faq-tag-list-item-form-item label {
margin: 0rem 0.2rem;
font-size: 0.9rem;
}
.admin-faq-tags-list-item-buttons-div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 1rem 0rem;
margin-left: 0.5rem;
}
.sticky-warning {
display: flex;
position: fixed;
width: 100vw;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 15;
top: 2rem;
pointer-events: none;
transition: all 0.3s ease;
opacity: 0;
}
.sticky-warning h4 {
font-size: 2rem;
background-color: #178a36;
padding: 1rem 5rem;
margin: 0rem;
border-radius: 1rem;
animation: sticky-warning-one-time-animation 1s ease forwards 1;
}
@keyframes sticky-warning-one-time-animation {
from {
box-shadow: 0px 0px 10px 10px rgba(255,255,255,0.7);
}
30% {
box-shadow: 0px 0px 10px 10px rgba(255,255,255,0.7);
}
to {
box-shadow: 0px 0px 10px 10px rgba(255,255,255,0);
}
}
.profile-setting-div-change-save-button {
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
background-color: rgb(232, 232, 232);
color: black;
font-weight: 900;
padding: 0.75rem 1rem;
min-width: 5rem;
text-align: center;
border-radius: 0.5rem;
cursor: pointer;
border: 5px white outset;
margin: 0.5rem 0rem 0rem 0.5rem;
}
.profile-setting-div-change-save-button-disabled {
pointer-events: none;
background-color: rgb(0, 0, 0);
opacity: 0.7;
color: #b3b3b3;
}
.profile-setting-div-change-save-button-saving {
background: linear-gradient(
90deg,
rgb(232, 232, 232) 0%,
rgb(232, 232, 232) 40%,
rgb(10, 195, 0) 50%,
rgb(232, 232, 232) 60%,
rgb(232, 232, 232) 100%
);
background-size: 300%;
background-position: 50%;
animation: profile-setting-div-change-save-button-saving 0.5s alternate infinite ease-in-out;
}
@keyframes profile-setting-div-change-save-button-saving {
from {
background-position: 0%;
}
to {
background-position: 100%;
}
}
.profile-setting-div-change-save-button p {
position: relative;
margin: 0;
}
.profile-setting-div-change-save-button:hover {
background-color: #cccccc;
}
.profile-setting-div-change-save-button:active {
border: 5px white inset;
background-color: #cccccc;
}
.profile-setting-div-change-save-button:active p {
left: 0.1rem;
top: 0.1rem;
}
.profile-setting-div-change-save-button-div {
display: flex;
flex-grow: 1;
justify-content: flex-end;
align-items: flex-end;
flex-direction: row;
}
.profile-setting-div-change-save-button.profile-setting-div-change-save-button-red {
background-color: rgb(237, 23, 23);
border-color: rgb(229, 89, 89);
}
.profile-setting-div-change-save-button.profile-setting-div-change-save-button-red:hover {
background-color: rgb(190, 18, 18);
}
.profile-setting-div-change-save-button.profile-setting-div-change-save-button-red:active {
background-color: rgb(190, 18, 18);
}
.delete-prompt {
display: flex;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2rem;
background-color: #000;
border: 3px #e8e8e8 solid;
border-radius: 1rem;
box-shadow: 0px 0px 15px 15px rgba(0,0,0,0.7);
}
.delete-prompt h3 {
margin-top: 0.5rem;
margin-bottom: 1.5rem;
font-size: 2rem;
}
.delete-prompt-buttons-div {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
.delete-prompt-buttons-div p {
font-size: 1.5rem;
border-radius: 1rem;
padding: 1rem 2rem;
margin: 0.75rem 1.25rem;
cursor: pointer;
}
.delete-prompt-buttons-div p:hover {
box-shadow: 0px 0px 5px 5px rgba(255,255,255,0.3);
}
.delete-prompt-buttons-div p:active {
opacity: 0.8;
}
/*END FAQ*/
.candle-background-theme-image {
display: flex;
position: absolute;
right: 0;
top: 0;
z-index: 0;
width: 100%;
height: 100%;
}
.candle-background-theme-image img {
position: absolute;
right: 0;
top: 0;
width: min(75%, 40rem);
height: 100%;
object-fit: cover;
}
.mask-left {
-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);
mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);
}
.overlap-black-fade-left {
z-index: 0;
position: absolute;
left: 0;
top: 0;
width: min(100%, 50rem);
height: 100%;
background: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 100%);
}
.fortune-result-part {
opacity: 0;
transform: translateX(min(3rem, 9vw));
filter: blur(10px);
transition: all 1.5s ease-out;
will-change: transform, opacity, filter;
}
.fortune-result-part.visible-state {
opacity: 1;
transform: translateX(0);
filter: blur(0);
}
.fortune-result-part .tarot-card-more-info-semiheader {
font-family: Raleway, 'sans-serif';
font-size: min(1.5rem, 7.5vw);
font-weight: 700;
margin: 0;
font-style: normal;
}
.fortune-result-part h4 {
font-family: Raleway, 'sans-serif';
font-size: min(1.8rem, 9vw);
font-weight: 900;
margin: 0;
}
.fortune-result-part h6 {
font-family: Raleway, 'sans-serif';
font-size: min(1.2rem, 6vw);
font-weight: 700;
margin: 0;
font-style: italic;
}
.fortune-result-part p {
font-family: Raleway, 'sans-serif';
font-size: min(1rem, 5vw);
font-weight: 400;
margin: 0;
}
.tarot-card-more-info-flex-item img {
width: min(100%, 20rem);
}
.background-anim-particles-body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100vh;
overflow: hidden;
position: fixed;
top: 0;
}
.background-anim-particles-glowing {
position: relative;
min-width: 700px;
height: 550px;
margin: -150px;
transform-origin: right;
animation: background-anim-particles-colorChange 15s linear infinite;
}
.background-anim-particles-glowing:nth-child(even) {
transform-origin: left;
}
@keyframes background-anim-particles-colorChange {
0% {
filter: hue-rotate(0deg);
transform: rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
transform: rotate(360deg);
}
}
.background-anim-particles-glowing span {
position: absolute;
top: calc(80px * var(--i));
left: calc(80px * var(--i));
bottom: calc(80px * var(--i));
right: calc(80px * var(--i));
}
.background-anim-particles-glowing span::before {
content: "";
position: absolute;
top: 50%;
left: -8px;
width: 15px;
height: 15px;
background: #f00;
border-radius: 50%;
}
.background-anim-particles-glowing span:nth-child(3n + 1)::before {
background: rgba(134,255,0,1);
box-shadow: 0 0 20px rgba(134,255,0,1),
0 0 40px rgba(134,255,0,1),
0 0 60px rgba(134,255,0,1),
0 0 80px rgba(134,255,0,1),
0 0 0 8px rgba(134,255,0,.1);
}
.background-anim-particles-glowing span:nth-child(3n + 2)::before {
background: rgba(255,214,0,1);
box-shadow: 0 0 20px rgba(255,214,0,1),
0 0 40px rgba(255,214,0,1),
0 0 60px rgba(255,214,0,1),
0 0 80px rgba(255,214,0,1),
0 0 0 8px rgba(255,214,0,.1);
}
.background-anim-particles-glowing span:nth-child(3n + 3)::before {
background: rgba(0,226,255,1);
box-shadow: 0 0 20px rgba(0,226,255,1),
0 0 40px rgba(0,226,255,1),
0 0 60px rgba(0,226,255,1),
0 0 80px rgba(0,226,255,1),
0 0 0 8px rgba(0,226,255,.1);
}
.background-anim-particles-glowing span:nth-child(3n + 1) {
animation: background-anim-particles-animate 30s alternate infinite;
}
.background-anim-particles-glowing span:nth-child(3n + 2) {
animation: background-anim-particles-animate-reverse 9s alternate infinite;
}
.background-anim-particles-glowing span:nth-child(3n + 3) {
animation: background-anim-particles-animate 24s alternate infinite;
}
@keyframes background-anim-particles-animate {
0% {
transform: rotate(180deg);
}
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes background-anim-particles-animate-reverse {
0% {
transform: rotate(360deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(0deg);
}
}
.user-profile-container {
width: min(40rem, calc(100% - 4rem));
padding: 1rem;
background-color: #282738;
border-radius: 1rem;
}
.user-profile-initial-options {
display: flex;
flex-direction: column;
gap: 1rem;
}
.user-profile-big-button {
padding: 1rem;
border: none;
border-radius: 0.5rem;
background-color: #007bff;
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
}
.user-profile-big-button:hover {
background-color: #0056b3;
}
.user-profile-panel {
display: none;
flex-direction: column;
gap: 1rem;
}
.user-profile-panel.active {
display: flex;
}
.user-profile-back-button {
align-self: flex-start;
padding: 1rem 1rem;
border: none;
border-radius: 0.5rem;
background-color: #dc3545;
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
}
.user-profile-back-button:hover {
background-color: #a71d2a;
}
.user-profile-candle-list, .user-profile-history-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.user-profile-candle-list li, .user-profile-history-list li {
display: flex;
justify-content: space-between;
padding: 1rem;
border: 1px solid #ddd;
border-radius: 0.5rem;
margin-bottom: 1rem;
background-color: #1e1e1e;
cursor: pointer;
user-select: none;
}
.user-profile-candle-list li:hover, .user-profile-history-list li:hover {
background-color: #3a3a3a;
}
.user-profile-candle-list li:active, .user-profile-history-list li:active {
background-color: #000000;
}
.user-profile-info-button, .user-profile-delete-button {
padding: 0.5rem 1rem;
border: none;
border-radius: 0.5rem;
cursor: pointer;
}
.user-profile-info-button {
background-color: #28a745;
color: white;
}
.user-profile-info-button:hover {
background-color: #218838;
}
.user-profile-delete-button {
background-color: #dc3545;
color: white;
margin-left: 1rem;
}
.user-profile-delete-button:hover {
background-color: #c82333;
}
.user-profile-history-options {
display: flex;
justify-content: center;
column-gap: 1rem;
row-gap: 0.5rem;
flex-wrap: wrap;
}
.user-profile-history-option {
padding: 1rem 2rem;
border: none;
border-radius: 0.5rem;
cursor: pointer;
background-color: #007bff;
color: white;
transition: background-color 0.3s ease;
flex-grow: 1;
}
.user-profile-history-option.active {
background-color: #0056b3;
}
.user-profile-history-option:hover {
background-color: #0056b3;
}
.user-profile-history-list {
display: none;
}
.user-profile-history-list.active {
display: block;
}
.user-profile-candle-settings-panel {
display: none;
flex-direction: column;
gap: 1rem;
}
.user-profile-candle-settings-panel.active {
display: flex;
}
.user-profile-candle-settings-options {
display: flex;
flex-direction: column;
gap: 1rem;
}
.user-profile-candle-settings-option {
padding: 1rem;
border: none;
border-radius: 0.5rem;
background-color: #007bff;
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
}
.user-profile-candle-settings-option:hover {
background-color: #0056b3;
}
.user-profile-candle-settings-red-option {
background-color: #dc3545;
}
.user-profile-candle-settings-red-option:hover {
background-color: #c82333;
}
.share-button {
background-color: rgb(20,20,20);
}
.share-button:hover {
background-color: rgb(70,70,70);
}
.share-button:active {
background-color: rgb(0,0,0);
}
.candle-square-label-div {
display: flex;
flex-direction: column;
width: 100%;
background-color: rgb(101, 119, 125);
aspect-ratio: 1;
position: relative;
user-select: none;
container-type: inline-size;
}
.candle-square-label-div.label-texts-black {
background-color: rgb(255,255,255);
}
.candle-square-label-div.label-aspect-ratio-2 {
aspect-ratio: 6.8/4.5;
}
.candle-square-label-div-inner-border1 {
display: flex;
position: absolute;
width: calc(100% - 8cqw);
height: 1.5cqw;
background-color: rgb(255,255,255);
top: 4cqw;
left: 4cqw;
}
.candle-square-label-div-inner-border2 {
display: flex;
position: absolute;
width: 1.5cqw;
height: calc(100% - 8cqw);
background-color: rgb(255,255,255);
top: 4cqw;
right: 4cqw;
}
.candle-square-label-div-inner-border3 {
display: flex;
position: absolute;
width: calc(100% - 8cqw);
height: 1.5cqw;
background-color: rgb(255,255,255);
bottom: 4cqw;
left: 4cqw;
}
.candle-square-label-div-inner-border4 {
display: flex;
position: absolute;
width: 1.5cqw;
height: calc(100% - 8cqw);
background-color: rgb(255,255,255);
bottom: 4cqw;
left: 4cqw;
}
.candle-square-label-div.label-texts-black .candle-square-label-div-inner-border1,
.candle-square-label-div.label-texts-black .candle-square-label-div-inner-border2,
.candle-square-label-div.label-texts-black .candle-square-label-div-inner-border3,
.candle-square-label-div.label-texts-black .candle-square-label-div-inner-border4 {
background-color: rgb(0,0,0);
}
.candle-square-label-tellmecandle-logo {
display: flex;
position: absolute;
top: 7cqw;
right: 7.7%;
content:url(/needs/tell_me_candle_logo_transparent.png);
height: 12%;
filter: invert(1);
}
.candle-square-label-div.label-texts-black .candle-square-label-tellmecandle-logo {
filter: invert(0);
}
.candle-square-label-candle-visible-id {
display: flex;
position: absolute;
top: 8.1cqw;
left: 7%;
color: rgb(255,255,255);
margin: 0 !important;
font-weight: 900;
font-size: 5.5cqw;
font-family: Barlow;
}
.candle-square-label-div.label-texts-black .candle-square-label-candle-visible-id {
color: rgba(0, 0, 0, 1);
}
.candle-square-label-candle-name-and-series-holder-div {
display: flex;
position: absolute;
top: 47%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
flex-direction: column;
width: 78%;
align-items: center;
justify-content: center;
row-gap: 1cqw;
}
.candle-square-label-div.label-aspect-ratio-2 .candle-square-label-candle-name-and-series-holder-div {
top: 45%;
row-gap: 0.5cqw;
width: 82%;
}
.candle-square-label-candle-name {
display: flex;
/*position: absolute;
bottom: 53%;
left: 50%;
transform: translateX(-50%);*/
color: rgb(255,255,255);
margin: 0 !important;
font-weight: 400;
font-size: 8.5cqw;
/*font-family: 'Yeseva One';*/
font-family: "STIX Two Text";
background-color: rgba(0, 0, 0, 0.9);
padding: 1.5cqw 5%;
/*width: 68%;*/
width: 90%;
text-align: center;
justify-content: center;
align-items: center;
padding-bottom: 0.5cqw;
}
.candle-square-label-div.label-texts-black .candle-square-label-candle-name {
background-color: rgba(0, 0, 0, 1);
}
.candle-square-label-div.label-aspect-ratio-2 .candle-square-label-candle-name {
font-size: 6cqw;
padding: 1cqw 1%;
padding-bottom: 0.2cqw;
width: 98%;
}
.candle-square-label-div-middle-border1 {
display: flex;
/*position: absolute;*/
width: 73%;
height: 0.9cqw;
margin-top: 1.5cqw;
margin-bottom: 0.5cqw;
background-color: rgba(255,255,255,0.8);
/*top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);*/
}
.candle-square-label-div.label-texts-black .candle-square-label-div-middle-border1 {
background-color: rgba(0,0,0,0.8);
}
.candle-square-label-div.label-aspect-ratio-2 .candle-square-label-div-middle-border1 {
margin-top: 1cqw;
height: 0.75cqw;
margin-bottom: 0.3cqw;
}
.candle-square-label-candle-series-name {
display: flex;
/*position: absolute;
top: 51.5%;
left: 50%;
transform: translateX(-50%);*/
color: rgb(255,255,255);
margin: 0 !important;
font-weight: 400;
font-size: 6cqw;
font-family: 'Pacifico';
width: calc(100% - 2cqw);
padding: 0 1cqw;
text-align: center;
justify-content: center;
align-items: center;
/*background: radial-gradient(rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 70%), #000;*/
text-shadow: 0.5cqw 0.5cqw 1cqw rgba(0,0,0,1);
line-height: 120%;
}
.candle-square-label-div.label-texts-black .candle-square-label-candle-series-name {
color: rgb(0,0,0);
/*background: radial-gradient(rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%), #fff;*/
text-shadow: 0.5cqw 0.5cqw 1cqw rgba(255,255,255,1);
}
.candle-square-label-div.label-aspect-ratio-2 .candle-square-label-candle-series-name {
font-size: 4.5cqw;
}
.candle-square-label-bottom-div {
display: flex;
flex-direction: row;
width: 84%;
bottom: 8cqw;
background-color: rgba(255, 255, 255, 0);
position: absolute;
left: 8%;
column-gap: 1.3%;
flex-wrap: wrap;
row-gap: 0.4cqw;
}
.candle-square-label-div.label-aspect-ratio-2 .candle-square-label-bottom-div {
bottom: 7.5cqw;
row-gap: 0.35cqw;
}
.candle-square-label-category-name-and-color-holder {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 0.2cqw;
}
.candle-square-label-category-name {
margin: 0 !important;
font-size: 6cqw;
font-family: Raleway;
font-weight: 700;
color: rgb(255,255,255);
}
.candle-square-label-div.label-texts-black .candle-square-label-category-name {
color: rgb(0,0,0);
}
.candle-square-label-div.label-aspect-ratio-2 .candle-square-label-category-name {
font-size: 4.5cqw;
}
.candle-square-label-category-color {
display: flex;
width: 30cqw;
height: 3cqw;
}
.candle-square-label-div.label-aspect-ratio-2 .candle-square-label-category-color {
width: 22.5cqw;
height: 2.25cqw;
}
.point_category_color_1 {
background: linear-gradient(135deg, rgb(139, 20, 20), rgb(216, 13, 13));
}
.point_category_color_2 {
background: linear-gradient(135deg, rgb(181, 97, 23), rgb(255, 162, 2));
}
.point_category_color_3 {
background: linear-gradient(135deg, rgb(30, 88, 138), rgb(29, 237, 230));
}
.point_category_color_4 {
background: linear-gradient(135deg, rgb(79, 135, 30), rgb(144, 237, 57));
}
.point_category_color_5 {
background: linear-gradient(135deg, rgb(189 189 56), rgb(255, 255, 0));
}
.point_category_color_6 {
background: linear-gradient(135deg, rgb(79, 79, 79), rgb(174, 174, 174));
}
.point_category_color_7 {
background: linear-gradient(135deg, rgb(41, 41, 41), rgb(0, 0, 0));
}
.point_category_color_8 {
background: linear-gradient(135deg, rgb(149, 96, 156), rgb(212, 126, 224));
}
.point_category_color_9 {
background: linear-gradient(135deg, rgb(173, 172, 172), rgb(255, 255, 255));
}
.point_category_color_10 {
background: linear-gradient(135deg, rgb(41, 117, 87), rgb(22, 191, 171));
}
.candle-square-label-bottom-div-between-border {
display: flex;
width: 0.5cqw;
background-color: rgba(255, 255, 255, 0.5);
}
.candle-square-label-div.label-texts-black .candle-square-label-bottom-div-between-border {
background-color: rgba(0, 0, 0, 0.5);
}
.candle-square-label-wax-info, .candle-square-label-volume-info {
margin: 0 !important;
font-size: 4.5cqw;
font-family: Barlow;
font-weight: 700;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: rgb(255,255,255);
}
.candle-square-label-div.label-texts-black .candle-square-label-wax-info,
.candle-square-label-div.label-texts-black .candle-square-label-volume-info {
color: rgb(0,0,0);
}
.candle-square-label-div.label-aspect-ratio-2 .candle-square-label-wax-info,
.candle-square-label-div.label-aspect-ratio-2 .candle-square-label-volume-info {
font-size: 3.9cqw;
}
.candle-square-label-fortune-candle-text {
/*display: flex;*/
display: none;
position: absolute;
top: 20.7%;
right: 8%;
color: rgb(255,255,255);
margin: 0 !important;
font-weight: 400;
font-size: 4.6cqw;
font-family: 'STIX Two Text';
background-color: rgb(0,0,0,0.7);
border-radius: 50cqw;
border-top-right-radius: 0;
padding: 1% 2%;
padding-bottom: 0%;
text-align: center;
justify-content: center;
align-items: center;
}
.candle-square-label-div-background-img {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
.candle-square-label-div-background-tint {
width: calc(100% - 8cqw);
height: calc(100% - 8cqw);
left: 4cqw;
top: 4cqw;
position: absolute;
background: linear-gradient(to bottom,
rgba(0,0,0,0.5) 0%,
rgba(0,0,0,0.5) 6%,
rgba(0,0,0,0) 20%,
rgba(0,0,0,0) 76%,
rgba(0,0,0,0.6) 86%,
rgba(0,0,0,0.7) 100%
);
}
.candle-square-label-div.label-texts-black .candle-square-label-div-background-tint {
/*background: linear-gradient(to bottom,
rgba(255,255,255,0.5) 0%,
rgba(255,255,255,0.5) 6%,
rgba(255,255,255,0) 20%,
rgba(255,255,255,0) 76%,
rgba(255,255,255,0.6) 86%,
rgba(255,255,255,0.7) 100%
);*/
background: unset;
/*background-color: rgb(255,255,255);*/
}
.uploadbutton {
flex-shrink: 1;
}
.uploadbutton::-webkit-file-upload-button {
padding: 0.75rem 1rem;
background-color: #e8e8e8;
border: none;
border-radius: 1rem;
cursor: pointer;
font-family: Roboto, "sans-serif";
font-weight: 900;
margin-right: 0.75rem;
}
.uploadbutton::-webkit-file-upload-button:hover {
background-color: #d1d1d1;
}
.uploadbutton::-webkit-file-upload-button:active {
background-color: #b7b7b7;
box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.3);
}
.image-upload-button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
user-select: none;
padding: 0.3rem;
border-radius: 0.5rem;
cursor: pointer;
}
.image-upload-button:hover {
background-color: rgb(206, 206, 206);
}
.image-upload-button:active {
background-color: rgb(24, 24, 24);
}
.image-upload-button img {
width: 2rem;
height: 2rem;
object-fit: contain;
}
.image-upload-button:active img {
filter: invert(1);
}
.full-cover-panel {
display: flex;
position: fixed;
top: 0;
left: 0;
width: calc(100% - 2rem);
height: calc(100% - 2rem);
background-color: rgb(20,20,20);
z-index: 5;
flex-direction: column;
padding: 1rem;
overflow-y: auto;
}
.full-cover-panel::-webkit-scrollbar {
width: 0.3rem;
height: 1rem;
}
.full-cover-panel::-webkit-scrollbar-track {
width: 0.3rem;
}
.full-cover-panel::-webkit-scrollbar-thumb {
width: 0.3rem;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 2rem;
}
#select-from-latest-label-background-images-grid img {
display: flex;
aspect-ratio: 1;
width: 100%;
object-fit: cover;
cursor: pointer;
}
#select-from-latest-label-background-images-grid img:hover {
box-shadow: 0 0 1rem 1rem rgba(255,255,255,0.3);
}
#select-from-latest-label-background-images-grid img:active {
box-shadow: 0 0 1rem 1rem rgba(0,0,0,0.3);
filter: brightness(0.8);
}
input.hide-input-arrows::-webkit-outer-spin-button,
input.hide-input-arrows::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input.hide-input-arrows[type=number] {
-moz-appearance: textfield;
}
.fortune-result-lucky-letter-wave-parent1 {
position: relative;
display: flex;
animation: fortune-result-lucky-letter-wave-part1 15s ease-in-out infinite;
}
.fortune-result-lucky-letter-wave-parent2 {
position: relative;
display: flex;
animation: fortune-result-lucky-letter-wave-part2 17s ease-in-out infinite;
}
.fortune-result-lucky-letter-wave-parent3 {
position: relative;
display: flex;
animation: fortune-result-lucky-letter-wave-part3 19s ease-in-out infinite,
fortune-result-lucky-letter-wave-part4 12s ease-in-out infinite;
}
.fortune-result-lucky-letter-wave-parent1:nth-child(1) {
animation-delay: 0s;
}
.fortune-result-lucky-letter-wave-parent1:nth-child(3) {
animation-delay: -5s;
}
.fortune-result-lucky-letter-wave-parent1:nth-child(5) {
animation-delay: -10s;
}
.fortune-result-lucky-letter-wave-parent1:nth-child(1) .fortune-result-lucky-letter-wave-parent2 {
animation-delay: -0.5s;
}
.fortune-result-lucky-letter-wave-parent1:nth-child(3) .fortune-result-lucky-letter-wave-parent2 {
animation-delay: -5.5s;
}
.fortune-result-lucky-letter-wave-parent1:nth-child(5) .fortune-result-lucky-letter-wave-parent2 {
animation-delay: -10.5s;
}
.fortune-result-lucky-letter-wave-parent1:nth-child(1) .fortune-result-lucky-letter-wave-parent3 {
animation-delay: -1s, -2s;
}
.fortune-result-lucky-letter-wave-parent1:nth-child(3) .fortune-result-lucky-letter-wave-parent3 {
animation-delay: -6s, -7s;
}
.fortune-result-lucky-letter-wave-parent1:nth-child(5) .fortune-result-lucky-letter-wave-parent3 {
animation-delay: -11s, -9s;
}
.fortune-result-lucky-letter-wave-parent1.fortune-result-lucky-letter-wave-delay2:nth-child(1) {
animation-delay: -11s;
}
.fortune-result-lucky-letter-wave-parent1.fortune-result-lucky-letter-wave-delay2:nth-child(3) {
animation-delay: -3s;
}
.fortune-result-lucky-letter-wave-parent1.fortune-result-lucky-letter-wave-delay2:nth-child(5) {
animation-delay: -7s;
}
.fortune-result-lucky-letter-wave-parent1.fortune-result-lucky-letter-wave-delay2:nth-child(1) .fortune-result-lucky-letter-wave-parent2 {
animation-delay: -11.5s;
}
.fortune-result-lucky-letter-wave-parent1.fortune-result-lucky-letter-wave-delay2:nth-child(3) .fortune-result-lucky-letter-wave-parent2 {
animation-delay: -4.5s;
}
.fortune-result-lucky-letter-wave-parent1.fortune-result-lucky-letter-wave-delay2:nth-child(5) .fortune-result-lucky-letter-wave-parent2 {
animation-delay: -13.5s;
}
.fortune-result-lucky-letter-wave-parent1.fortune-result-lucky-letter-wave-delay2:nth-child(1) .fortune-result-lucky-letter-wave-parent3 {
animation-delay: -12s, -15s;
}
.fortune-result-lucky-letter-wave-parent1.fortune-result-lucky-letter-wave-delay2:nth-child(3) .fortune-result-lucky-letter-wave-parent3 {
animation-delay: -7s, -17s;
}
.fortune-result-lucky-letter-wave-parent1.fortune-result-lucky-letter-wave-delay2:nth-child(5) .fortune-result-lucky-letter-wave-parent3 {
animation-delay: -15s, -25s;
}
@keyframes fortune-result-lucky-letter-wave-part1 {
0%, 100% {
transform: translateY(0);
}
20% {
transform: translateY(-0.4rem);
}
40% {
transform: translateY(0.4rem);
}
60% {
transform: translateY(-0.4rem);
}
80% {
transform: translateY(0.3rem);
}
}
@keyframes fortune-result-lucky-letter-wave-part2 {
0%, 100% {
transform: translateX(0.3rem);
}
20% {
transform: translateX(0rem);
}
40% {
transform: translateX(-0.2rem);
}
60% {
transform: translateX(0.2rem);
}
80% {
transform: translateX(-0.2rem);
}
}
@keyframes fortune-result-lucky-letter-wave-part3 {
0%, 100% {
transform: rotate(0deg);
}
20% {
transform: rotate(10deg);
}
40% {
transform: rotate(-10deg);
}
60% {
transform: rotate(20deg);
}
80% {
transform: rotate(-20deg);
}
}
@keyframes fortune-result-lucky-letter-wave-part4 {
0%, 100% {
filter: blur(2px);
}
10% {
filter: blur(0px);
}
55% {
filter: blur(0px);
}
60% {
filter: blur(1px);
}
65% {
filter: blur(0px);
}
95% {
filter: blur(0px);
}
}
#background-candle-animation-video-holder {
transition: opacity 0.3s ease;
}
.instagram-button {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
padding: 0.5rem 0.5rem;
margin: 0.5rem;
background-color: rgba(20, 20, 20, 0.7);
border-radius: 1rem;
cursor: pointer;
box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.3);
}
.instagram-button img {
width: 1.5rem;
margin: 0rem 0.25rem
}
.instagram-button p {
margin: 0rem 0.25rem;
color: rgb(247, 247, 247);
font-weight: 900;
}
.instagram-button:hover {
background-color: rgba(42, 42, 42, 0.9);
box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
}
.instagram-button:active {
opacity: 0.9;
background-color: rgba(0, 0, 0, 0.65);
box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.4);
}
.instagram-button.instagram-button-inline {
box-shadow: none;
margin: 0.25rem;
}
/*BACKGROUND STARS:*/
#candle-info-page-stars-container-holder {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
overflow: hidden;
background: radial-gradient(ellipse at bottom, #1B2735 0%, #191F24 100%);
}
.candle-info-page-stars-container {
position: absolute;
top: 50%;
left: 50%;
height: 100%;
width: 100%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.candle-info-page-stars1 {
width: 0.06rem;
height: 0.06rem;
background: transparent;
box-shadow:
0rem 12.8rem #FFF, 4rem 16rem #FFF, 8rem 19.6rem #FFF, 12rem 25.5rem #FFF,
15.6rem 31.5rem #FFF, 19.2rem 36.7rem #FFF, 23.4rem 43.8rem #FFF, 27rem 48.4rem #FFF,
31.2rem 50.2rem #FFF, 35rem 52rem #FFF, 39.8rem 53.1rem #FFF, 42.3rem 54.2rem #FFF,
46.9rem 55.9rem #FFF, 50rem 48.9rem #FFF, 54.7rem 43.2rem #FFF, 58.5rem 40rem #FFF,
62.4rem 63.2rem #FFF, 66.2rem 57rem #FFF, 70.3rem 46.4rem #FFF, 74rem 42.5rem #FFF,
78.2rem 48.3rem #FFF, 82rem 45rem #FFF, 85.9rem 32.6rem #FFF, 90rem 38rem #FFF,
93.8rem 36.7rem #FFF, 97.5rem 35.2rem #FFF, 100rem 30rem #FFF, 4rem 10rem #FFF,
7rem 19.2rem #FFF, 10rem 15rem #FFF, 11.3rem 21.6rem #FFF, 13rem 18.5rem #FFF,
15.9rem 23.8rem #FFF, 18rem 28rem #FFF, 20.7rem 46.4rem #FFF, 23rem 50rem #FFF,
25.4rem 52.6rem #FFF, 28rem 42rem #FFF, 30.1rem 40.7rem #FFF, 32rem 38rem #FFF,
34.7rem 30.3rem #FFF, 37rem 33.8rem #FFF, 40.4rem 70.6rem #FFF, 42rem 66rem #FFF,
44.7rem 42.2rem #FFF, 47rem 38rem #FFF, 52.6rem 71.5rem #FFF, 55rem 60rem #FFF,
58.4rem 31.2rem #FFF, 61rem 35.5rem #FFF, 64.7rem 75.9rem #FFF, 67.5rem 70rem #FFF,
70.3rem 40.8rem #FFF, 73rem 36rem #FFF, 77.8rem 31.9rem #FFF, 80rem 28rem #FFF,
83.1rem 22.4rem #FFF, 85rem 26rem #FFF, 89.2rem 79.7rem #FFF, 92rem 74rem #FFF,
96.5rem 45.7rem #FFF, 99rem 41rem #FFF, 15.6rem 30.3rem #FFF, 19.7rem 32.8rem #FFF,
23.9rem 62.4rem #FFF, 27rem 57rem #FFF, 31.3rem 71.5rem #FFF, 34rem 65rem #FFF,
39.8rem 55.6rem #FFF, 42rem 50rem #FFF, 49.3rem 40.1rem #FFF, 51rem 38rem #FFF,
56.4rem 20.2rem #FFF, 59rem 25rem #FFF, 63.7rem 77.3rem #FFF, 66.5rem 70rem #FFF,
72.1rem 45.7rem #FFF, 74rem 40rem #FFF, 80.9rem 68.2rem #FFF, 83rem 62rem #FFF,
90.4rem 90.3rem #FFF, 93rem 84rem #FFF, 110.3rem 100.5rem #FFF, 115rem 95rem #FFF,
120.7rem 50.3rem #FFF, 125rem 60rem #FFF, 130.5rem 90.7rem #FFF, 135rem 95rem #FFF,
140.2rem 110.8rem #FFF, 145rem 115rem #FFF;
animation: animateCandleInfoPageStars 28.5s ease-in-out infinite;
border-radius: 50%;
}
.candle-info-page-stars1::after {
content: " ";
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 0.06rem;
height: 0.06rem;
background: transparent;
box-shadow:
0rem 12.8rem #FFF, 4rem 16rem #FFF, 8rem 19.6rem #FFF, 12rem 25.5rem #FFF,
15.6rem 31.5rem #FFF, 19.2rem 36.7rem #FFF, 23.4rem 43.8rem #FFF, 27rem 48.4rem #FFF,
31.2rem 50.2rem #FFF, 35rem 52rem #FFF, 39.8rem 53.1rem #FFF, 42.3rem 54.2rem #FFF,
46.9rem 55.9rem #FFF, 50rem 48.9rem #FFF, 54.7rem 43.2rem #FFF, 58.5rem 40rem #FFF,
62.4rem 63.2rem #FFF, 66.2rem 57rem #FFF, 70.3rem 46.4rem #FFF, 74rem 42.5rem #FFF,
78.2rem 48.3rem #FFF, 82rem 45rem #FFF, 85.9rem 32.6rem #FFF, 90rem 38rem #FFF,
93.8rem 36.7rem #FFF, 97.5rem 35.2rem #FFF, 100rem 30rem #FFF, 4rem 10rem #FFF,
7rem 19.2rem #FFF, 10rem 15rem #FFF, 11.3rem 21.6rem #FFF, 13rem 18.5rem #FFF,
15.9rem 23.8rem #FFF, 18rem 28rem #FFF, 20.7rem 46.4rem #FFF, 23rem 50rem #FFF,
25.4rem 52.6rem #FFF, 28rem 42rem #FFF, 30.1rem 40.7rem #FFF, 32rem 38rem #FFF,
34.7rem 30.3rem #FFF, 37rem 33.8rem #FFF, 40.4rem 70.6rem #FFF, 42rem 66rem #FFF,
44.7rem 42.2rem #FFF, 47rem 38rem #FFF, 52.6rem 71.5rem #FFF, 55rem 60rem #FFF,
58.4rem 31.2rem #FFF, 61rem 35.5rem #FFF, 64.7rem 75.9rem #FFF, 67.5rem 70rem #FFF,
70.3rem 40.8rem #FFF, 73rem 36rem #FFF, 77.8rem 31.9rem #FFF, 80rem 28rem #FFF,
83.1rem 22.4rem #FFF, 85rem 26rem #FFF, 89.2rem 79.7rem #FFF, 92rem 74rem #FFF,
96.5rem 45.7rem #FFF, 99rem 41rem #FFF, 15.6rem 30.3rem #FFF, 19.7rem 32.8rem #FFF,
23.9rem 62.4rem #FFF, 27rem 57rem #FFF, 31.3rem 71.5rem #FFF, 34rem 65rem #FFF,
39.8rem 55.6rem #FFF, 42rem 50rem #FFF, 49.3rem 40.1rem #FFF, 51rem 38rem #FFF,
56.4rem 20.2rem #FFF, 59rem 25rem #FFF, 63.7rem 77.3rem #FFF, 66.5rem 70rem #FFF,
72.1rem 45.7rem #FFF, 74rem 40rem #FFF, 80.9rem 68.2rem #FFF, 83rem 62rem #FFF,
90.4rem 90.3rem #FFF, 93rem 84rem #FFF, 110.3rem 100.5rem #FFF, 115rem 95rem #FFF,
120.7rem 50.3rem #FFF, 125rem 60rem #FFF, 130.5rem 90.7rem #FFF, 135rem 95rem #FFF,
140.2rem 110.8rem #FFF, 145rem 115rem #FFF;
border-radius: 50%;
}
.candle-info-page-stars2 {
width: 0.12rem;
height: 0.12rem;
background: transparent;
box-shadow:
3.1rem 9.5rem #FFF, 6.3rem 18.9rem #FFF, 9.3rem 26.6rem #FFF, 12.4rem 32rem #FFF,
14.8rem 32.1rem #FFF, 17.4rem 40.4rem #FFF, 21.9rem 42.7rem #FFF, 25.6rem 50.1rem #FFF,
29.8rem 56.3rem #FFF, 32.6rem 58.2rem #FFF, 37.5rem 61.5rem #FFF, 40rem 57rem #FFF,
46.2rem 65.7rem #FFF, 50rem 60rem #FFF, 56.2rem 52.3rem #FFF, 60rem 50rem #FFF,
64.7rem 31.8rem #FFF, 68rem 36rem #FFF, 73.9rem 66.3rem #FFF, 77rem 60rem #FFF,
83.6rem 75.8rem #FFF, 87rem 72rem #FFF, 93.5rem 81.3rem #FFF, 96.5rem 78rem #FFF,
6.3rem 22.9rem #FFF, 8.2rem 25rem #FFF, 12.5rem 32.5rem #FFF, 14.6rem 35rem #FFF,
20.8rem 49.6rem #FFF, 23rem 53rem #FFF, 27.5rem 59.3rem #FFF, 30rem 55rem #FFF,
35.9rem 49.8rem #FFF, 38rem 45rem #FFF, 43.8rem 31.7rem #FFF, 46rem 35rem #FFF,
52.7rem 41.9rem #FFF, 55rem 40rem #FFF, 62.5rem 25rem #FFF, 65rem 28rem #FFF,
73.5rem 15.2rem #FFF, 77rem 17rem #FFF, 82.5rem 52.7rem #FFF, 85rem 55rem #FFF,
91.7rem 31.8rem #FFF, 94rem 35rem #FFF, 13.5rem 30.5rem #FFF, 16rem 35rem #FFF,
21.6rem 61.7rem #FFF, 24rem 65rem #FFF, 30.1rem 52.5rem #FFF, 32rem 55rem #FFF,
40.5rem 41.8rem #FFF, 43rem 45rem #FFF, 50.3rem 21.9rem #FFF, 53rem 25rem #FFF,
61.7rem 77.5rem #FFF, 64rem 80rem #FFF, 71.9rem 42.5rem #FFF, 75rem 45rem #FFF,
81.3rem 65.3rem #FFF, 83rem 62rem #FFF, 90.5rem 85.7rem #FFF, 93rem 89rem #FFF,
111.3rem 95.9rem #FFF, 115rem 99rem #FFF, 120.5rem 40.7rem #FFF, 124rem 45rem #FFF,
130.7rem 85.3rem #FFF, 134rem 90rem #FFF, 140.5rem 105.8rem #FFF, 145rem 110rem #FFF;
animation: animateCandleInfoPageStars 30s ease-in-out infinite;
border-radius: 50%;
}
.candle-info-page-stars2::after {
content: " ";
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 0.12rem;
height: 0.12rem;
background: transparent;
box-shadow:
3.1rem 9.5rem #FFF, 6.3rem 18.9rem #FFF, 9.3rem 26.6rem #FFF, 12.4rem 32rem #FFF,
14.8rem 32.1rem #FFF, 17.4rem 40.4rem #FFF, 21.9rem 42.7rem #FFF, 25.6rem 50.1rem #FFF,
29.8rem 56.3rem #FFF, 32.6rem 58.2rem #FFF, 37.5rem 61.5rem #FFF, 40rem 57rem #FFF,
46.2rem 65.7rem #FFF, 50rem 60rem #FFF, 56.2rem 52.3rem #FFF, 60rem 50rem #FFF,
64.7rem 31.8rem #FFF, 68rem 36rem #FFF, 73.9rem 66.3rem #FFF, 77rem 60rem #FFF,
83.6rem 75.8rem #FFF, 87rem 72rem #FFF, 93.5rem 81.3rem #FFF, 96.5rem 78rem #FFF,
6.3rem 22.9rem #FFF, 8.2rem 25rem #FFF, 12.5rem 32.5rem #FFF, 14.6rem 35rem #FFF,
20.8rem 49.6rem #FFF, 23rem 53rem #FFF, 27.5rem 59.3rem #FFF, 30rem 55rem #FFF,
35.9rem 49.8rem #FFF, 38rem 45rem #FFF, 43.8rem 31.7rem #FFF, 46rem 35rem #FFF,
52.7rem 41.9rem #FFF, 55rem 40rem #FFF, 62.5rem 25rem #FFF, 65rem 28rem #FFF,
73.5rem 15.2rem #FFF, 77rem 17rem #FFF, 82.5rem 52.7rem #FFF, 85rem 55rem #FFF,
91.7rem 31.8rem #FFF, 94rem 35rem #FFF, 13.5rem 30.5rem #FFF, 16rem 35rem #FFF,
21.6rem 61.7rem #FFF, 24rem 65rem #FFF, 30.1rem 52.5rem #FFF, 32rem 55rem #FFF,
40.5rem 41.8rem #FFF, 43rem 45rem #FFF, 50.3rem 21.9rem #FFF, 53rem 25rem #FFF,
61.7rem 77.5rem #FFF, 64rem 80rem #FFF, 71.9rem 42.5rem #FFF, 75rem 45rem #FFF,
81.3rem 65.3rem #FFF, 83rem 62rem #FFF, 90.5rem 85.7rem #FFF, 93rem 89rem #FFF,
111.3rem 95.9rem #FFF, 115rem 99rem #FFF, 120.5rem 40.7rem #FFF, 124rem 45rem #FFF,
130.7rem 85.3rem #FFF, 134rem 90rem #FFF, 140.5rem 105.8rem #FFF, 145rem 110rem #FFF;
border-radius: 50%;
}
.candle-info-page-stars3 {
width: 0.18rem;
height: 0.18rem;
background: transparent;
box-shadow:
6.3rem 18.9rem #FFF, 12.6rem 37.7rem #FFF, 18.75rem 28.9rem #FFF, 25.4rem 46.3rem #FFF,
31.9rem 56.2rem #FFF, 36.9rem 56.6rem #FFF, 42.7rem 38.1rem #FFF, 49.2rem 50.7rem #FFF,
54.8rem 52.3rem #FFF, 61.3rem 43.9rem #FFF, 66.8rem 46.5rem #FFF, 73.4rem 56.8rem #FFF,
78.4rem 52rem #FFF, 85.2rem 68.4rem #FFF, 90rem 64rem #FFF, 9.1rem 19.7rem #FFF,
15rem 29rem #FFF, 22.6rem 41.3rem #FFF, 28rem 50rem #FFF, 30.5rem 67.2rem #FFF,
34rem 60rem #FFF, 37.3rem 86.7rem #FFF, 40rem 80rem #FFF, 44.2rem 62.8rem #FFF,
48rem 55rem #FFF, 52.9rem 37.1rem #FFF, 56rem 32rem #FFF, 60.2rem 48.6rem #FFF,
64rem 55rem #FFF, 70.7rem 62.3rem #FFF, 73rem 56rem #FFF, 82.5rem 57.2rem #FFF,
86rem 61rem #FFF, 91.3rem 56.7rem #FFF, 95rem 53rem #FFF, 18.2rem 24.5rem #FFF,
22rem 30rem #FFF, 33.4rem 43.3rem #FFF, 36rem 48rem #FFF, 50.6rem 31.9rem #FFF,
54rem 36rem #FFF, 70.7rem 38.2rem #FFF, 74rem 42rem #FFF, 85.2rem 31.9rem #FFF,
89rem 35rem #FFF, 97.6rem 69.5rem #FFF, 100rem 74rem #FFF, 25.6rem 9.2rem #FFF,
28rem 13rem #FFF, 37.2rem 18.9rem #FFF, 41rem 24rem #FFF, 55.8rem 31.6rem #FFF,
58rem 34rem #FFF, 70.7rem 44.6rem #FFF, 73rem 48rem #FFF, 18.3rem 62.1rem #FFF,
21rem 65rem #FFF, 28.6rem 52.3rem #FFF, 32rem 55rem #FFF, 45.1rem 20.7rem #FFF,
48rem 25rem #FFF, 64.2rem 58.9rem #FFF, 67rem 62rem #FFF, 7.1rem 73.6rem #FFF,
10rem 78rem #FFF, 50.3rem 16.9rem #FFF, 53rem 20rem #FFF, 19.7rem 62.8rem #FFF,
22rem 65rem #FFF, 73.9rem 30.3rem #FFF, 76rem 33rem #FFF, 51.3rem 20.9rem #FFF,
55rem 24rem #FFF, 96.2rem 36.8rem #FFF, 100rem 40rem #FFF, 58.3rem 83.5rem #FFF,
61rem 86rem #FFF, 79.2rem 40.3rem #FFF, 82rem 44rem #FFF, 95.6rem 71.3rem #FFF,
99rem 75rem #FFF, 115.3rem 91.7rem #FFF, 120rem 95rem #FFF, 49.2rem 36.8rem #FFF,
52rem 40rem #FFF, 64.6rem 62.3rem #FFF, 68rem 65rem #FFF, 82.9rem 95.1rem #FFF,
86rem 98rem #FFF, 105.7rem 54.8rem #FFF, 110rem 58rem #FFF;
animation: animateCandleInfoPageStars 31.5s ease-in-out infinite;
border-radius: 50%;
}
.candle-info-page-stars3::after {
content: " ";
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 0.18rem;
height: 0.18rem;
background: transparent;
box-shadow:
6.3rem 18.9rem #FFF, 12.6rem 37.7rem #FFF, 18.75rem 28.9rem #FFF, 25.4rem 46.3rem #FFF,
31.9rem 56.2rem #FFF, 36.9rem 56.6rem #FFF, 42.7rem 38.1rem #FFF, 49.2rem 50.7rem #FFF,
54.8rem 52.3rem #FFF, 61.3rem 43.9rem #FFF, 66.8rem 46.5rem #FFF, 73.4rem 56.8rem #FFF,
78.4rem 52rem #FFF, 85.2rem 68.4rem #FFF, 90rem 64rem #FFF, 9.1rem 19.7rem #FFF,
15rem 29rem #FFF, 22.6rem 41.3rem #FFF, 28rem 50rem #FFF, 30.5rem 67.2rem #FFF,
34rem 60rem #FFF, 37.3rem 86.7rem #FFF, 40rem 80rem #FFF, 44.2rem 62.8rem #FFF,
48rem 55rem #FFF, 52.9rem 37.1rem #FFF, 56rem 32rem #FFF, 60.2rem 48.6rem #FFF,
64rem 55rem #FFF, 70.7rem 62.3rem #FFF, 73rem 56rem #FFF, 82.5rem 57.2rem #FFF,
86rem 61rem #FFF, 91.3rem 56.7rem #FFF, 95rem 53rem #FFF, 18.2rem 24.5rem #FFF,
22rem 30rem #FFF, 33.4rem 43.3rem #FFF, 36rem 48rem #FFF, 50.6rem 31.9rem #FFF,
54rem 36rem #FFF, 70.7rem 38.2rem #FFF, 74rem 42rem #FFF, 85.2rem 31.9rem #FFF,
89rem 35rem #FFF, 97.6rem 69.5rem #FFF, 100rem 74rem #FFF, 25.6rem 9.2rem #FFF,
28rem 13rem #FFF, 37.2rem 18.9rem #FFF, 41rem 24rem #FFF, 55.8rem 31.6rem #FFF,
58rem 34rem #FFF, 70.7rem 44.6rem #FFF, 73rem 48rem #FFF, 18.3rem 62.1rem #FFF,
21rem 65rem #FFF, 28.6rem 52.3rem #FFF, 32rem 55rem #FFF, 45.1rem 20.7rem #FFF,
48rem 25rem #FFF, 64.2rem 58.9rem #FFF, 67rem 62rem #FFF, 7.1rem 73.6rem #FFF,
10rem 78rem #FFF, 50.3rem 16.9rem #FFF, 53rem 20rem #FFF, 19.7rem 62.8rem #FFF,
22rem 65rem #FFF, 73.9rem 30.3rem #FFF, 76rem 33rem #FFF, 51.3rem 20.9rem #FFF,
55rem 24rem #FFF, 96.2rem 36.8rem #FFF, 100rem 40rem #FFF, 58.3rem 83.5rem #FFF,
61rem 86rem #FFF, 79.2rem 40.3rem #FFF, 82rem 44rem #FFF, 95.6rem 71.3rem #FFF,
99rem 75rem #FFF, 115.3rem 91.7rem #FFF, 120rem 95rem #FFF, 49.2rem 36.8rem #FFF,
52rem 40rem #FFF, 64.6rem 62.3rem #FFF, 68rem 65rem #FFF, 82.9rem 95.1rem #FFF,
86rem 98rem #FFF, 105.7rem 54.8rem #FFF, 110rem 58rem #FFF;
border-radius: 50%;
}
@keyframes animateCandleInfoPageStars {
0% {
-webkit-transform: rotate3d(-1, 1, 0, 0deg);
-ms-transform: rotate3d(-1, 1, 0, 0deg);
-o-transform: rotate3d(-1, 1, 0, 0deg);
transform: rotate3d(-1, 1, 0, 0deg);
}
25% {
-webkit-transform: rotate3d(-1, 1, 0, 30deg);
-ms-transform: rotate3d(-1, 1, 0, 30deg);
-o-transform: rotate3d(-1, 1, 0, 30deg);
transform: rotate3d(-1, 1, 0, 30deg);
}
50% {
-webkit-transform: rotate3d(-1, 1, 0, 0deg);
-ms-transform: rotate3d(-1, 1, 0, 0deg);
-o-transform: rotate3d(-1, 1, 0, 0deg);
transform: rotate3d(-1, 1, 0, 0deg);
}
75% {
-webkit-transform: rotate3d(-1, 1, 0, -30deg);
-ms-transform: rotate3d(-1, 1, 0, -30deg);
-o-transform: rotate3d(-1, 1, 0, -30deg);
transform: rotate3d(-1, 1, 0, -30deg);
}
100% {
-webkit-transform: rotate3d(-1, 1, 0, 0deg);
-ms-transform: rotate3d(-1, 1, 0, 0deg);
-o-transform: rotate3d(-1, 1, 0, 0deg);
transform: rotate3d(-1, 1, 0, 0deg);
}
}
/*BACKGROUND STARS END*/
.candle-info-page-grid {
display: flex;
flex-direction: column;
width: min(calc(100% - 2rem), 50rem);
align-items: center;
z-index: 1;
}
.candle-info-page-box {
display: flex;
flex-direction: column;
width: calc(100% - 2rem);
padding: 1rem;
margin-top: 2rem;
background: linear-gradient(to right, rgb(48, 79, 85), rgb(51, 74, 132), rgb(78, 55, 87), rgb(94, 39, 57));
background-size: 300%;
background-position: 0%;
animation: moving-background-1-anim 6s ease-in-out infinite alternate;
border-radius: 1rem;
}
.candle-info-page-box.designer-magical-comment-holder {
background: linear-gradient(to right, rgb(48, 79, 85), rgb(51, 74, 132), rgb(78, 55, 87), rgb(94, 39, 57));
background-size: 300%;
background-position: 0%;
}
.candle-info-page-box.description-holder {
background: linear-gradient(to right, rgb(48, 85, 57), rgb(92, 120, 46), rgb(87, 73, 55));
background-size: 300%;
background-position: 0%;
}
.candle-info-page-box .designer-magical-comment {
margin: 0;
font-family: Raleway;
}
.candle-info-page-box .designer-magical-comment-label {
margin: 0;
font-family: Raleway;
opacity: 0.7;
font-weight: 700;
font-style: italic;
margin-bottom: 0.3rem;
}
.candle-info-page-grid .color-category-item {
padding: 1rem;
width: calc(100% - 2rem);
align-items: unset;
margin-top: 2rem;
}
.candle-info-page-grid .color-category-item-header, .candle-info-page-grid .color-category-item-info {
width: 100%;
max-width: unset;
}
.candle-info-page-grid .color-category-item-info {
width: calc(100% - 2rem);
max-width: unset;
}
.hover-context-child {
user-select: none;
pointer-events: none;
opacity: 0;
display: flex;
position: absolute;
right: 0;
bottom: 0;
transform: translateX(-100%);
padding: min(0.25rem, 1.25vw);
border: rgb(147, 147, 147) 0.1rem solid;
font-size: min(0.7rem, 3.5vw);
background-color: rgb(69, 69, 69);
}
.hover-context-parent:hover .hover-context-child {
opacity: 1;
}
.powered-fortune-category-icon {
position: absolute;
right: max(-1rem, -4vw);
top: min(0.5rem, 2vw);
transform: translateX(-100%);
opacity: 0.6;
}
.powered-fortune-category-icon img {
aspect-ratio: 1;
width: min(1.25rem, 5vw);
}
.fortune-summary-text-box {
min-height: 5rem;
background: linear-gradient(
130deg,
rgb(68, 203, 163) 0%,
rgb(60, 171, 219) 50%,
rgb(115, 82, 222) 100%
);
background-size: 300% 100%;
}
.fortune-summary-text-box:nth-child(5n+1) {
animation: fortune-summary-text-box-background infinite 10s ease-in-out alternate;
}
.fortune-summary-text-box:nth-child(5n+2) {
animation: fortune-summary-text-box-background infinite 10s ease-in-out alternate 2s;
}
.fortune-summary-text-box:nth-child(5n+3) {
animation: fortune-summary-text-box-background infinite 10s ease-in-out alternate 4s;
}
.fortune-summary-text-box:nth-child(5n+4) {
animation: fortune-summary-text-box-background infinite 10s ease-in-out alternate 6s;
}
.fortune-summary-text-box:nth-child(5n) {
animation: fortune-summary-text-box-background infinite 10s ease-in-out alternate 8s;
}
.fortune-summary-text-box.fortune-summary-text-box-waiting {
min-height: 5rem;
background: linear-gradient(
130deg,
rgb(70,240,190) 0%,
rgb(60, 171, 219) 50%,
rgb(140,80,240) 100%
);
background-size: 300% 100%;
animation: fortune-summary-text-box-background infinite 2s ease-in-out alternate;
}
@keyframes fortune-summary-text-box-background {
from {
background-position: 0% center;
}
to {
background-position: 100% center;
}
}
.fortune-summary-text-box-waiting-div-bars-holder {
display: grid;
grid-template-columns: repeat(10, minmax(0.1rem, 1rem));
column-gap: 0.2rem;
padding: 0.5rem 1rem;
height: 6rem;
align-items: flex-start;
justify-content: center;
}
.fortune-summary-text-box-waiting-div-bar {
border-radius: 1rem;
background-color: rgba(255,255,255,0.5);
}
@keyframes fortune-summary-text-box-waiting-div-bar-anim {
from {
height: 6rem;
}
to {
height: 1rem;
}
}
.fortune-summary-text-box-waiting-div-bar:nth-child(1) {
animation: fortune-summary-text-box-waiting-div-bar-anim 1s infinite ease-in-out alternate;
}
.fortune-summary-text-box-waiting-div-bar:nth-child(2) {
animation: fortune-summary-text-box-waiting-div-bar-anim 1.05s infinite ease-in-out alternate 0.1s;
}
.fortune-summary-text-box-waiting-div-bar:nth-child(3) {
animation: fortune-summary-text-box-waiting-div-bar-anim 0.95s infinite ease-in-out alternate 1.1s;
}
.fortune-summary-text-box-waiting-div-bar:nth-child(4) {
animation: fortune-summary-text-box-waiting-div-bar-anim 0.98s infinite ease-in-out alternate 0.6s;
}
.fortune-summary-text-box-waiting-div-bar:nth-child(5) {
animation: fortune-summary-text-box-waiting-div-bar-anim 1.02s infinite ease-in-out alternate 0.1s;
}
.fortune-summary-text-box-waiting-div-bar:nth-child(6) {
animation: fortune-summary-text-box-waiting-div-bar-anim 1.07s infinite ease-in-out alternate 0.3s;
}
.fortune-summary-text-box-waiting-div-bar:nth-child(7) {
animation: fortune-summary-text-box-waiting-div-bar-anim 0.94s infinite ease-in-out alternate 0.8s;
}
.fortune-summary-text-box-waiting-div-bar:nth-child(8) {
animation: fortune-summary-text-box-waiting-div-bar-anim 0.96s infinite ease-in-out alternate 0.3s;
}
.fortune-summary-text-box-waiting-div-bar:nth-child(9) {
animation: fortune-summary-text-box-waiting-div-bar-anim 1.04s infinite ease-in-out alternate 0.7s;
}
.fortune-summary-text-box-waiting-div-bar:nth-child(10) {
animation: fortune-summary-text-box-waiting-div-bar-anim 1.03s infinite ease-in-out alternate 1.2s;
}
#fortune-summary-loaded-warning-box {
display: flex;
position: fixed;
top: 1rem;
right: 1rem;
background-color: rgb(80,80,240);
z-index: 6;
padding: 0.5rem;
border-radius: 0.5rem;
user-select: none;
border: 0.2rem solid rgb(240,240,240);
}
#fortune-summary-loaded-warning-box p {
margin: 0;
}
.type1list {
display: flex;
flex-wrap: wrap;
flex-direction: row;
width: calc(100% - 4rem);
max-width: 122rem;
padding: 1rem;
margin: 1rem;
margin-bottom: 0rem;
border-radius: 1rem;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: linear-gradient(
120deg,
rgb(56, 56, 56) 0%,
rgb(83, 58, 88) 50%,
rgb(38, 67, 78) 100%
);
background-size: 300%;
background-position: 0%;
animation: quick-apps-and-games-background 12s infinite alternate ease-in-out;
}
@keyframes quick-apps-and-games-background {
from {
background-position: 0%;
}
to {
background-position: 100%;
}
}
.type1list.type1list-background2 {
background: linear-gradient(
120deg,
rgb(26, 76, 66) 0%,
rgb(63, 78, 98) 50%,
rgb(18, 87, 88) 100%
);
background-size: 300%;
background-position: 0%;
}
.type1list.type1list-background3 {
background: linear-gradient(
120deg,
rgb(86, 76, 26) 0%,
rgb(103, 78, 48) 50%,
rgb(58, 67, 48) 100%
);
background-size: 300%;
background-position: 0%;
}
.type1list.type2list {
padding: 0.3rem 0.6rem;
margin: 0.4rem 1rem;
width: calc(100% - 3.2rem);
}
.type1list-header {
margin: 0.5rem;
margin-right: 1rem;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
border-radius: 1rem;
padding: 1rem;
}
.type1list.type2list .type1list-header {
margin: 0.2rem 0.5rem;
padding: 0.5rem 1rem;
padding-right: 0.5rem;
background-color: rgb(80,100,110);
border: 2px rgb(150,150,150) dashed;
}
.type1list-item {
background-color: rgba(0, 0, 0, 0.563);
border-radius: 1rem;
padding: 1rem;
margin: 0.5rem;
display: flex;
justify-content: center;
align-items: center;
}
.type1list.type2list .type1list-item {
padding: 0.5rem 1rem;
margin: 0.3rem;
}
.type1list.type2list .type1list-item .checkbox-rect {
padding: 0.2rem 0.5rem !important;
}
.type1list-itemsarray {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
}
.type1list-itemsarray h3 {
background-color: rgba(0, 0, 0, 0.563);
border-radius: 1rem;
padding: 1rem;
margin: 0.5rem;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
align-self: stretch;
}
.type1list.type2list .type1list-itemsarray h3 {
padding: 0.5rem 1rem;
margin: 0.3rem;
}
.type1list-itemsarray h3.type1list-item-choosen {
background-color: rgba(5, 0, 15, 0.9);
box-shadow: 0px 0px 10px 10px rgba(230,200,255,0.4);
}
.type1list-itemsarray h3:hover {
background-color: rgba(0, 0, 0, 0.737);
}
.type1list-itemsarray h3:active {
background-color: rgba(0, 0, 0, 0.597);
opacity: 0.8;
}
.squarearrow {
width: 6vw;
filter: invert(0.85);
}
.admin-pages-back-buttons-holder, .profile-pages-back-buttons-holder {
display: flex;
width: 100%;
position: relative;
height: 0rem;
justify-content: flex-start;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.admin-pages-back-buttons-div, .profile-pages-back-buttons-div {
display: flex;
width: 100%;
position: absolute;
bottom: 0rem;
justify-content: flex-start;
}
.admin-pages-back-button, .profile-pages-back-button {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
background-color: rgba(0,0,0,0.7);
border-radius: min(1rem, 3vw);
padding: min(0.75rem, 2.25vw) min(1rem, 3vw);
cursor: pointer;
}
.admin-pages-back-button:hover, .profile-pages-back-button:hover {
background-color: rgba(0,0,0,1);
}
.admin-pages-back-button:active, .profile-pages-back-button:active {
background-color: rgba(10,10,10,1);
color: #d3d3d3;
box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.6);
}
.admin-pages-back-button, .profile-pages-back-button h3 {
font-size: min(1.2rem, 3.6vw);
}
.gallery-slide-arrow-buttons-holder {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
z-index: 1;
}
.gallery-slide-arrow-button {
display: flex;
padding: 0.5rem;
background-color: rgb(0,0,0);
opacity: 0.6;
border-radius: 10rem;
cursor: pointer;
}
.gallery-slide-arrow-button:hover {
opacity: 1;
}
.gallery-slide-arrow-button img {
display: flex;
width: min(2rem, 5vw);
filter: brightness(5);
aspect-ratio: 1;
opacity: 0.8;
}
@media (max-aspect-ratio: 4/5) {
.gallery-slide-arrow-buttons-holder {
display: none;
}
}
.marquee {
--row-height: 20rem; /* image height */
--gap: 1rem; /* space between images */
--duration: 30s; /* how long it takes to slide one full set */
}
.marquee-background {
background-color: rgb(60, 51, 79);
display: flex;
position: absolute;
height: 100%;
width: calc(100% + 2rem);
top: 0;
left: -1rem;
overflow: visible;
}
.marquee {
width: 100%;
max-width: 100%;
position: relative;
padding-top: 1rem;
padding-bottom: 1rem;
height: min(20rem, 40vw);
}
.marquee__track {
display: flex;
align-items: center;
gap: var(--gap);
height: var(--row-height);
position: absolute;
top: 1rem;
left: 0;
height: min(20rem, 40vw);
/* Make the track as wide as its content so % transforms are exact */
width: max-content;
will-change: transform;
/* Move left by exactly one set (50% of this doubled track) */
animation: marquee-scroll var(--duration) linear infinite;
}
.marquee__track img {
height: min(20rem, 40vw);
width: auto; /* varying widths are fine */
flex: 0 0 auto; /* don’t shrink */
display: flex;
z-index: 2;
}
.marquee__track img:hover {
box-shadow: 0 0 1rem 1rem rgba(255,255,255,0.3);
z-index: 3;
}
.marquee__track img:active {
box-shadow: 0 0 1rem 1rem rgba(0,0,0,0.6);
z-index: 3;
opacity: 0.75;
}
.marquee-track-film-grain-background {
display: flex;
position: absolute;
top: -1rem;
left: -1rem;
height: calc(100% + 2rem);
width: calc(100% + 2rem);
/*background-color: rgb(255,240,0);*/
background-image: url("/needs/film-grain-overlay-texture.webp");
background-repeat: repeat-x;
opacity: 0.7;
}
@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Optional: pause on hover (comment out if you don’t want it) */
.marquee:active .marquee__track { animation-play-state: paused; }
/* Optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.marquee__track { animation: none; }
}
#image-fullscreen-view {
display: flex;
z-index: 5;
position: fixed;
top: 0;
left: 0;
/*transform: translateX(-50%) translateY(-50%);*/
width: min(100%, 100vw);
height: 100vh;
background-color: #000;
justify-self: center;
align-items: center;
flex-direction: column;
}
#image-fullscreen-view .image-fullscreen-view-image {
height: 90%;
width: 90%;
object-fit: contain;
display: flex;
justify-self: center;
align-self: center;
margin: auto;
}
.main-flow {
display: flex;
flex-direction: column;
width: min(40rem, calc(100% - 1.5rem));
padding: 1rem 0.75rem;
row-gap: 1rem;
}
.new-post-box {
display: flex;
flex-direction: column;
border-radius: 0.75rem;
border: 0.2rem solid #000;
width: calc(100% - 2.4rem);
padding: 1rem;
margin-bottom: 0.5rem;
background-color: rgba(255,255,255,0.7);
}
.new-post-box textarea, #new-post-text-area {
border: 0.1rem solid rgb(30,30,30);
background-color: #fff;
border-radius: 0.25rem;
/*width: calc(100% - 1.7rem);*/
resize: none;
overflow: hidden;
min-height: 2rem;
padding: 0.75rem;
white-space: pre-line;
}
.flow-post-box {
width: calc(100% - 0.2rem);
display: flex;
flex-direction: column;
border: 0.1rem solid rgba(30,30,30,0.3);
min-height: 1rem;
border-radius: 0.5rem;
padding-bottom: 0.25rem;
transition: background-color 0.05s ease-in-out;
cursor: pointer;
background-color: rgba(255,255,255,0.7);
position: relative;
}
.flow-post-box.new-post-flash {
border-bottom: rgb(234, 210, 104) solid 0.5rem;
animation: flow-post-box-new-post-flash 3s;
}
.post-comment.new-post-flash {
border-bottom: rgb(234, 210, 104) solid 0.5rem;
animation: flow-post-box-new-post-flash 3s;
margin-bottom: 0.2rem;
}
.flow-post-box.custom-active {
background-color: rgba(235, 235, 235, 0.8);
}
@keyframes flow-post-box-new-post-flash {
from {
background-color: rgba(234, 210, 104, 1);
}
to {
background-color: rgba(255,255,255,0.7);
}
}
.flow-post-box.clicked-comment-flash {
animation: flow-post-box-clicked-comment-flash 2s;
border-color: rgba(45, 69, 73, 0.6);
border-bottom-width: 0.2rem;
}
@keyframes flow-post-box-clicked-comment-flash {
from {
background-color: rgb(141, 203, 214);
}
to {
background-color: rgba(255,255,255,0.7);
}
}
.post-profile-info {
display: flex;
flex-direction: row;
width: calc(100% - 1rem);
padding: 0.5rem;
padding-bottom: 0.3rem;
}
.post-profile-info-profile-image-div img {
aspect-ratio: 1;
border-radius: 50rem;
height: 2.5rem;
margin-right: 0.3rem;
}
.post-profile-info-profile-name-div {
display: flex;
flex-direction: column;
}
.post-profile-info-visible-name {
font-weight: 600;
}
.post-profile-info-username {
font-weight: 400;
font-size: 0.8rem;
color: rgba(30,30,30,0.7);
}
.post-message {
display: flex;
flex-direction: column;
width: calc(100% - 1.5rem);
padding: 0rem 0.75rem 0.5rem 0.75rem;
word-break: break-word;
white-space: pre-line;
}
.post-message p {
margin: 0;
white-space: pre-line;
}
.post-stats {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 0.5rem;
user-select: none;
align-items: center;
padding-left: 0.5rem;
}
.post-stats-like-count-div, .post-stats-comment-count-div {
display: flex;
flex-direction: row;
align-items: center;
column-gap: 0.25rem;
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
cursor: pointer;
transition: all 0.05s ease-in-out;
}
.post-stats-like-count-div .like-icon, .post-stats-comment-count-div .comment-icon {
width: 1.25rem;
height: 1.25rem;
object-fit: contain;
filter: invert(1);
opacity: 0.9;
transition: all 0.05s ease-in-out;
}
.post-stats-like-count-div .like-count, .post-stats-comment-count-div .comment-count {
margin: 0;
font-weight: 700;
font-size: 0.9rem;
opacity: 0.9;
transition: all 0.05s ease-in-out;
}
.post-stats-like-count-div:hover, .post-stats-comment-count-div:hover {
background-color: rgba(30,30,30,0.3);
}
.post-stats-like-count-div:active, .post-stats-comment-count-div:active {
background-color: rgba(30,30,30,0.6);
color: #fff;
}
.post-stats-comment-count-div:active .comment-icon {
filter: none;
}
.post-stats-like-count-div:active .like-icon {
scale: 5;
filter: brightness(0) saturate(100%) invert(20%) sepia(66%) saturate(5809%) hue-rotate(321deg) brightness(101%) contrast(96%);
transform: translateX(0.2rem) translateY(-0.8rem);
content:url("/needs/heart_filled_icon.png");
}
.post-comment .post-stats-like-count-div:active .like-icon {
transform: translateX(-0.1rem) translateY(-0.8rem);
}
.post-stats-like-count-div.liked:active .like-icon {
scale: 3;
filter: brightness(0) saturate(80%) invert(41%) sepia(15%) saturate(4652%) hue-rotate(302deg) brightness(74%) contrast(89%);
transform: translateX(0.25rem) translateY(-1rem) rotate(30deg);
content:url("/needs/heart_empty_icon.png");
}
.post-stats-like-count-div.liked .like-icon {
filter: brightness(0) saturate(100%) invert(20%) sepia(66%) saturate(5809%) hue-rotate(321deg) brightness(101%) contrast(96%);
opacity: 1;
content:url("/needs/heart_filled_icon.png");
}
.post-stats-like-count-div.liked .like-count {
color: rgb(249, 24, 128);
opacity: 1;
}
.post-image-grid {
display: grid;
width: 100%;
column-gap: 0.5rem;
row-gap: 0.5rem;
grid-template-columns: 1fr 1fr;
margin-bottom: 0.2rem;
overflow: hidden;
}
.post-image-grid[image-count="1"] {
grid-template-columns: 1fr;
max-height: min(60vh, 50rem);
}
.post-image-grid[image-count="1"] .post-image {
aspect-ratio: unset;
height: auto;
min-height: 60%;
max-height: min(60vh, 50rem);
}
.post-image-grid[image-count="2"] .post-image {
aspect-ratio: 0.66;
}
.post-image-grid[image-count="3"] {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
}
.post-image-grid[image-count="3"] .post-image:first-child {
grid-column: span 2;
aspect-ratio: 2;
}
.post-image {
width: 100%;
object-fit: cover;
overflow: hidden;
aspect-ratio: 1;
height: 100%;
max-height: 60vh;
cursor: pointer;
}
.post-image:hover {
filter: brightness(1.1);
}
.post-image:active {
filter: brightness(0.9);
}
.show-uploaded-images {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch;
justify-content: flex-start;
padding: 1rem 0;
row-gap: 0.5rem;
column-gap: 0.5rem;
margin-bottom: 1rem;
}
.show-uploaded-images-image-div {
position: relative;
display: flex;
flex-direction: column;
padding: 0.5rem;
border-radius: 0.5rem;
background-color: rgba(0, 0, 0, 0.4);
}
.preview-image {
height: 6rem;
max-width: 12rem;
object-fit: cover;
border-radius: 0.2rem;
}
.show-uploaded-images-image-div .close-icon {
background-color: rgba(255,255,255,0.3);
}
.close-icon {
position: absolute;
height: calc(100% - 2px);
width: calc(100% - 2px);
border: 2px solid rgba(232, 232, 232, 0);
border-width: 100%;
border-radius: 20%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
opacity: 0.9;
transition: 0.2s ease;
}
.close-icon:hover {
opacity: 1;
border-color: rgba(232, 232, 232, 1);
background-color: rgba(0, 0, 0, 0.1);
}
.close-icon:active {
transition: 0s ease;
opacity: 1;
border-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
#image-fullscreen-view-gallery {
display: flex;
z-index: 5;
position: fixed;
top: 0;
left: 0;
width: min(100%, 100vw);
height: 100vh;
background-color: #000;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
#image-fullscreen-view-gallery .close-button {
position: absolute;
width: 3.2rem;
height: 3.2rem;
z-index: 11;
top: 0.5rem;
right: min(0.5rem, 1.5vw);
}
#image-fullscreen-view-gallery .gallery-track {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.3s ease-out;
}
#image-fullscreen-view-gallery .gallery-image {
flex: 0 0 100%;
height: 100%;
width: 100%;
object-fit: contain;
transform-origin: center center;
}
.gallery-slide-arrow-buttons-holder {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
z-index: 1;
}
.gallery-slide-arrow-button {
display: flex;
padding: 0.5rem;
background-color: rgb(0,0,0);
opacity: 0.6;
border-radius: 10rem;
cursor: pointer;
}
.gallery-slide-arrow-button:hover {
opacity: 1;
}
.gallery-slide-arrow-button img {
display: flex;
width: min(2rem, 5vw);
filter: brightness(5);
aspect-ratio: 1;
opacity: 0.8;
}
@media (max-aspect-ratio: 4/5) {
.gallery-slide-arrow-buttons-holder {
display: none;
}
}
.animated-loader-17 {
width: 48px;
height: 48px;
margin: auto;
position: relative;
}
.animated-loader-17:before {
content: '';
width: 48px;
height: 5px;
background: #000;
opacity: 0.25;
position: absolute;
top: 60px;
left: 0;
border-radius: 50%;
animation: shadow 0.5s linear infinite;
}
.animated-loader-17:after {
content: '';
width: 100%;
height: 100%;
background: #303030;
animation: bxSpin 0.5s linear infinite;
position: absolute;
top: 0;
left: 0;
border-radius: 4px;
}
@keyframes bxSpin {
17% {
border-bottom-right-radius: 3px;
}
25% {
transform: translateY(9px) rotate(22.5deg);
}
50% {
transform: translateY(18px) scale(1, .9) rotate(45deg);
border-bottom-right-radius: 40px;
}
75% {
transform: translateY(9px) rotate(67.5deg);
}
100% {
transform: translateY(0) rotate(90deg);
}
}
@keyframes shadow {
0%, 100% {
transform: scale(1, 1);
}
50% {
transform: scale(1.2, 1);
}
}
#main-flow-you-are-not-seeing-the-latest-posts, #post-flow-you-are-not-seeing-the-latest-replies {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: calc(100% - 0.2rem);
border: 0.1rem solid rgba(174, 174, 127, 0.4);
min-height: 6rem;
border-radius: 0.5rem;
user-select: none;
cursor: pointer;
}
#main-flow-you-are-not-seeing-the-latest-posts p, #post-flow-you-are-not-seeing-the-latest-replies p {
font-family: Raleway, 'sans-serif';
font-weight: 700;
margin: 0;
text-align: center;
font-size: 1.2rem;
padding: 0 1rem;
}
#main-flow-you-are-not-seeing-the-latest-posts:hover, #post-flow-you-are-not-seeing-the-latest-replies:hover {
background-color: rgba(20,20,20,0.2);
}
#main-flow-you-are-not-seeing-the-latest-posts:active, #post-flow-you-are-not-seeing-the-latest-replies:active {
background-color: rgba(0, 0, 0, 0.6);
color: white;
}
#main-flow-loading-box, .loading-box-holder {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: calc(100% - 0.2rem);
border: 0.1rem solid rgba(174, 174, 127, 0.4);
min-height: 12rem;
border-radius: 0.5rem;
user-select: none;
}
#main-flow-loading-posts-div, #post-page-loading-comments-div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 1rem;
padding-bottom: 0.5rem;
width: 100%;
min-height: 10.5rem;
}
#main-flow-loading-posts-div p, #post-page-loading-comments-div p {
font-family: Raleway, 'sans-serif';
font-weight: 500;
margin-top: 2rem;
margin-bottom: 0;
text-align: center;
padding: 0 1rem;
}
.loading-box-type-1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
cursor: pointer;
width: 100%;
min-height: 11rem;
border-radius: 0.5rem;
transition: all 0.07s ease-in-out;
}
.loading-box-type-1 img {
width: 6rem;
height: 6rem;
object-fit: contain;
filter: invert(0.9);
transition: all 0.07s ease-in-out;
}
.loading-box-type-1 p {
font-family: Raleway, 'sans-serif';
font-weight: 700;
margin-top: 0.5rem;
margin-bottom: 0;
text-align: center;
font-size: 1.2rem;
padding: 0 1rem;
}
.loading-box-type-1:hover {
background-color: rgba(20,20,20,0.2);
}
.loading-box-type-1:active {
background-color: rgba(0, 0, 0, 0.6);
color: white;
}
.loading-box-type-1:active img {
filter: none;
}
.post-comment-maker {
display: flex;
flex-direction: column;
width: calc(100% - 2rem);
padding: 0.2rem 1rem;
}
.post-comment-maker-top-div {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
}
.post-comment-maker-top-div img {
width: 1.5rem;
height: 1.5rem;
object-fit: contain;
border-radius: 50rem;
}
.post-comment-maker-bottom-div {
display: flex;
flex-direction: row;
justify-content: end;
margin-top: 0.2rem;
column-gap: 0.3rem;
}
.post-comment-maker textarea {
border: 0.1rem solid rgb(30,30,30);
border-radius: 0.25rem;
resize: none;
overflow: hidden;
min-height: 2rem;
padding: 0.75rem;
white-space: pre-line;
width: 100%;
margin-left: 0.2rem;
}
.post-comments-short-flow {
display: flex;
flex-direction: column;
width: 100%;
row-gap: 0.2rem;
}
.post-comments-top-hr {
width: calc(100% - 1rem);
border-width: 0.15rem;
border-radius: 10rem;
opacity: 0.3;
border-style: solid;
margin: 0.1rem 0;
justify-self: center;
align-self: center;
margin-bottom: 0.3rem;
}
.post-comment {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
position: relative;
}
.post-comment-left-div {
user-select: none;
flex-grow: 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
margin-top: 0.1rem;
}
.post-comment-content-div {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.post-comment-content-div .commenter-name-div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
column-gap: 0.2rem;
}
.post-comment-content-div .commenter-name {
font-size: 0.8rem;
font-weight: 600;
opacity: 0.8;
margin: 0;
}
.post-comment-content-div .comment-published-time {
font-size: 0.65rem;
font-weight: 300;
opacity: 0.6;
color: rgb(30,30,30);
margin: 0;
}
.post-comment-content-div .comment-text {
font-size: 0.85rem;
margin: 0.12rem 0;
}
.post-comment-left-div img {
width: 1.5rem;
height: 1.5rem;
object-fit: contain;
border-radius: 50rem;
margin-right: 0.2rem;
}
.left-connect-curve {
width: 0.5rem;
height: 0.75rem;
display: flex;
border-left: solid 0.1rem rgba(30,30,30,0.4);
border-bottom: solid 0.1rem rgba(30,30,30,0.4);
border-bottom-left-radius: 0.5rem;
margin-left: 0.75rem;
margin-right: 0.2rem;
}
.post-comment-right-div {
user-select: none;
flex-grow: 0;
display: flex;
flex-direction: column;
}
.comment-more-replies-button {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
margin: 0.2rem 0 0.2rem 0.5rem;
}
.comment-more-replies-button img {
width: 1rem;
height: 1rem;
object-fit: contain;
opacity: 0.5;
rotate: 90deg;
transform: translateX(-0.07rem);
}
.comment-more-replies-button p {
margin: 0;
font-size: 0.8rem;
color: rgba(136,136,136);
}
.comment-reply-button {
display: flex;
flex-direction: row;
}
.comment-reply-button p {
margin: 0;
font-size: 0.7rem;
font-weight: 700;
color: rgb(136, 136, 136);
}
#post-page-view {
display: flex;
flex-direction: column;
width: 100%;
position: relative;
top: 0;
left: 0;
align-items: center;
}
.top-ticker {
position: absolute;
top: -1rem;
left: -1rem;
width: 100%;
height: 200px; /* curve height */
overflow: visible;
user-select: none;
}
.top-ticker span {
font-size: 3rem;
font-weight: bold;
color: black;
position: absolute;
/*offset-path: path("M 0,150 Q 50,0 300,150 T 5000,150");*/
offset-path: path("M 0,150 Q 250,0 500,150 T 1000,150 T 1500,150 T 2000,150 T 2500,150 T 3000,150 T 3500,150 T 4000,150 T 4500,150 T 5000,150");
offset-rotate: auto;
animation: top-ticker-move 60s linear infinite;
}
.top-ticker.top-ticker-2 span {
offset-path: path("M 0,150 Q 300,50 600,150 Q 900,250 1200,150 Q 1500,50 1800,150 Q 2100,250 2400,150 Q 2700,50 3000,150 Q 3300,250 3600,150 Q 3900,50 4200,150 Q 4500,250 4800,150 L 5000,150");
}
@keyframes top-ticker-move {
from { offset-distance: 0%; }
to { offset-distance: 100%; }
}
.text-read-more {
color: rgb(29, 155, 240);
font-weight: 900;
display: flex;
cursor: pointer;
}
.text-read-more p {
margin: 0;
}
.post-comment .text-read-more {
display: inline;
color: rgb(136 136 136);
}
.text-read-more:active {
text-decoration: underline;
}
.load-more-replies-wide-button {
color: rgb(29, 155, 240);
font-size: 1rem;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
column-gap: 0.5rem;
border-top: solid 0.1rem rgba(140,140,140,1);
width: calc(100% - 1rem);
padding: 0.5rem;
cursor: pointer;
user-select: none;
}
.load-more-replies-wide-button .load-more, .load-more-replies-wide-button .loading-wait {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
}
.load-more-replies-wide-button:hover {
background-color: rgba(0,0,0,0.05);
}
.load-more-replies-wide-button:active {
background-color: rgba(0,0,0,0.15);
}
.load-more-replies-wide-button img {
rotate: 90deg;
width: 1.2rem;
height: 1.2rem;
object-fit: contain;
transform: translateX(-0.1rem);
filter: brightness(0) saturate(100%) invert(53%) sepia(28%) saturate(6018%) hue-rotate(179deg) brightness(100%) contrast(89%);
}
.load-more-replies-wide-button p {
margin: 0;
text-align: center;
}
.flow-post-box-options-button {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
right: 0;
padding: 0.3rem;
cursor: pointer;
border-top-right-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
user-select: none;
}
.flow-post-box-options-button img {
width: 1.2rem;
height: 1.2rem;
object-fit: contain;
}
.flow-post-box-options-button:hover {
background-color: rgba(60,60,60,0.1);
}
.flow-post-box-options-button:active {
background-color: rgba(60,60,60,0.3);
}
.post-comment .flow-post-box-options-button {
right: unset;
border-radius: 50rem;
top: 0.8rem;
left: 0.2rem;
}
.post-message-span-link {
color: rgb(29, 155, 240);
font-weight: 700;
text-decoration: underline;
}
.post-message-span-header-1, .post-message-span-header-2, .post-message-span-header-3 {
display: block;
font-weight: bold;
margin: 0.2rem 0;
}
.post-message-hr {
border: none;
border-top: 0.1rem solid #ccc;
margin:0.75rem 0;
}