:root {
    --primary-color: #c0392b;
    --background-color: #000;
    --text-color: #fff;
    --light-text-color: #fff;
    --panel-bg-color: #fff;
    --button-secondary-bg: #eee;
    --button-secondary-hover-bg: #ddd;
    --modal-overlay-bg: rgba(0, 0, 0, 0.7);

    --border-radius-large: 15px;
    --border-radius-round: 50px;

    --shadow-light: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.2);
    --shadow-colored: 0 8px 15px rgba(192, 57, 43, 0.4);
    --shadow-filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.2));
}

body, html { min-height: 720px; min-width: 360px; }
body { background: #1a275b; display: flex; justify-content: center; background-color: var(--background-color); margin: 0; color: var(--text-color); }

#container { /* width: 100%; */ max-width: 1280px; min-width: inherit; height: 100%; padding: 1rem; display: flex; z-index: 1; flex-direction: column; justify-content: space-evenly; align-items: center; overflow: hidden; }

#blank {max-height: 52.5%;
    height: inherit;
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;}

#messages { margin-bottom: 20px; }

header { max-height: 27.5%;
    width: 100%;
    aspect-ratio: 2.544732;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: -5%;}
#wheel-section { max-height: 52.5%; width: 100%; display: flex; justify-content: center; position: relative; }
#newsletter {width: 100%; height: 7.5%; display: flex; justify-content: center; align-items: center; padding: 0 1rem; /* height: auto; min-height: fit-content; */}

.popupOnTop {z-index: 6000!important;}

.newsletter-registration {max-width: 100%; height: 150%; object-fit: contain; cursor: pointer;}
.newsletter-registration.long {display: block;}
.newsletter-registration.short {display: none;}

.popup .newsletter-registration {margin-top: 1rem}

@media (max-width: 560px) {
  .newsletter-registration.long {display: none;}
  .newsletter-registration.short {display: block;}
}

footer { min-height: 10%; display: flex; align-items: center; height: auto; /* min-height: fit-content; */ flex-direction: column; z-index: 1; padding-top: 1rem;}

header img {height: 100%;
    width: 100%;
    object-fit: contain;}

.button {text-decoration: none; font-weight: normal; display: inline-block;}
.default .window .content {font-size: 1.5rem; text-align: center;}
.default .window .content strong {font-weight: bold; color: #fd0;}
.alerter .window .content {font-size: 1.5rem; text-align: center;}

.messages.off {display: none}

.socialBlock { display: flex; align-items: center; justify-content: center;  padding: 0.66rem; border-radius: 0.33rem; gap: 0.5rem; flex-wrap: wrap; gap: 0.5rem;}

.popup.default .window {background: radial-gradient(ellipse at top, #ff00ff, #b3019f, #4f0163, #00000036 50%) center 0, radial-gradient(ellipse at bottom, #5100cd, #180075, #000000 60%) center bottom;
    background-size: 200% 100%;
    background-repeat: no-repeat;}
    .popup.default.purple .window {background: radial-gradient(ellipse at top, #ff00ff, #b3019f, #4f0163, #00000036 50%) center 0, radial-gradient(ellipse at bottom, #5100cd, #180075, #000000 60%) center bottom;
    background-size: 200% 100%;
    background-repeat: no-repeat;}
.button { box-shadow: 0 5px 20px #0008; }

.emojied { list-style: none; padding-left: 0; text-align: left; }
.emojied li { position: relative; padding-left: 1.75rem; margin-bottom: 1rem; }

.emojied li::before {
  content: '🔸';
  font-size: 1.2rem;
  position: absolute;
  left: 0;
  top: 0;
}

[data-copytoclipboard] { color: #4f0; font-weight: bold; }

h4 { background: linear-gradient(180deg, #bb0088, #770077 66%, #8800aa); display: inline-block; padding: 0.5rem 1rem; margin: 0 0 0.5rem 0; border-radius: 0.5rem; color: #edff00; }

/*
.kaleidoscope.preview { background: url('../gfx/bg_preview_001.jpg') center center; background-size: cover; filter: blur(20px); }
.kaleidoscope{ width: 100vw; height: 100vh; position: fixed; left: 0; top: 0; z-index: -100; }
.kaleidoscope.container { opacity: 0; transition: opacity ease-in-out; }
.kaleidoscope.container.is-visible { opacity: 1; }
*/

#bg { background: url('../gfx/bg_001.jpg') center; background-size: cover; position: fixed!important; width: 100vw; height: 100vh; z-index: -1; filter: blur(5px); }
#emitter { position: fixed!important; width: 100vw; height: 100vh; z-index: -1; }


strong.yellow {color: #ff0 !important; padding: 0.25rem 0.75rem; border-radius: 0.25rem; position: relative; display: inline-block; overflow: hidden;}
strong.yellow:after {content: '';
  animation: yellow 10s infinite linear;
  /* background-image: radial-gradient(black, transparent 10%), conic-gradient(black, white, black, white, black, white, black, white, black, white, black, white, black, white, black, white, black, white, black, white, black); */
  background-image: conic-gradient( #f80f, #f800, #f80f, #f800, #f80f, #f800, #f80f, #f800, #f80f, #f800, #f80f, #f800, #f80f, #f800, #f80f, #f800, #f80f, #f800, #f80f);
  background-color: #903;
  position: absolute;
  min-width: 150%;
  min-height: 150%;
  aspect-ratio: 1;
  left: 0;
  top: 50%;
  margin-top: -75%;
  margin-left: -25.5%;
  z-index: -1;
}

@keyframes yellow {
  0% {transform: rotate(0deg)}
  100% {transform: rotate(360deg)}
}