:root { 
--font-size: clamp(18px, 1.44vw, 1.44vw);
--font-size-iframe: clamp(18px, 2.016vw, 2.016vw); 
--1px: clamp(1px, 0.052vw, 0.052vw);
--2px: clamp(2px, 0.104vw, 0.104vw);

--3px: clamp(3px, 0.156vw, 0.156vw);
--4px: clamp(4px, 0.208vw, 0.208vw);
--5px: clamp(5px, 0.260vw, 0.260vw);
--6px: clamp(6px, 0.312vw, 0.312vw);
--8px: clamp(8px, 0.416vw, 0.416vw);
--10px: clamp(10px, 0.520vw, 0.520vw);
--12px: clamp(12px, 0.625vw, 0.625vw);
--16px: clamp(16px, 0.833vw, 0.833vw);
--20px: clamp(20px, 1.041vw, 1.041vw);

--30px: clamp(30px, 1.562vw, 1.562vw);
--50px: clamp(50px, 2.604vw, 2.604vw);

--1px-iframe: clamp(1px, 0.13vw, 0.13vw);
--2px-iframe: clamp(2px, 0.26vw, 0.26vw);
--6px-iframe: clamp(6px, 0.78vw, 0.78vw);
--12px-iframe: clamp(12px, 1.5625vw, 1.5625vw);
--25px-iframe: clamp(25px, 3.255vw, 3.255vw);

--78px: clamp(78.35px, 5.104vw, 5.104vw);

--legohead: clamp(25.6px, 1.667vw, 1.667vw);
}

* { box-sizing: border-box; padding: 0; margin: 0; cursor: url('img/cursor.png'), auto; }

html { text-align: center; font-size: var(--font-size); font-family: arial; line-height: 1.2; background: url('img/lego-universe-bg.jpg') no-repeat fixed center/auto 100% content-box black; }

main { margin: auto; background: #232323; border: clamp(15px, 0.79vw, 0.79vw) ridge #aaaaaa; }

.autoWidth { 
	width: clamp(600px, 40vw, 40vw); 
	@media (max-width: 768px) { width: 100vw; } 
}

p, ul { margin: 0 2% 2% 2%; color: #C4C4C4;  }
/* button > h3 { color: #51361A; } */

h3, h2 { color: white; } /* #E0E0E0 */
h2 { font-size: 117%; }

.shadow { box-shadow: 0 var(--10px) var(--16px) 0 rgba(0,0,0,0.2), 0 var(--6px) var(--20px) 0 rgba(0,0,0,0.19); }

img, video { width: 100%; height: auto; display: block; }
/* .imgCenter { display: block; margin: 0 auto 0 auto; width: 50%; } */

.topBanner { height: 100vh; width: 100%; position: relative; }
.logo { width: 25%; position: absolute; margin: auto; top: 0; right: 0; left: 0; z-index: 1; }
.bannerVideo { aspect-ratio: 1920/1334; width: 72%; margin: auto; }
@media (max-width: 768px) { 
	.topBanner { height: auto; }
	.logo { width: 75%; position: relative; }
	.bannerVideo { display: none; }
}

input, button, select, textarea { width: 100%; font-size: inherit; }
button, input[type=button], input[type=submit], .button { background: linear-gradient(rgb(255, 228, 119), rgb(255, 204, 0), rgb(255, 204, 0)); border: var(--4px) solid rgb(181, 112, 2); box-shadow: rgb(255, 247, 215) 0 var(--2px) 0 0 inset; padding: var(--6px); color: #51361A; font-weight: bold; }
input, button, textarea, select, a.button { margin: var(--2px) auto var(--2px) auto; }
textarea { display: block; font-family: inherit; }
button:hover, input[type=button]:hover, input[type=submit]:hover, .button:hover, button.active, a.button.active, input[type=submit]:disabled { background: linear-gradient(rgb(255, 204, 0), rgb(255, 204, 0), rgb(255, 228, 119)); box-shadow: none; }
/*::placeholder, label { color: #757575; }*/
input::placeholder, textarea::placeholder  { color: #4A4A4A; }

:focus { outline: none; }

/*
@keyframes flash-input {
	0%, 100% { background-color: white; }
	50% { background-color: #FFE477; }
}
.flash-input { animation: flash-input 1s 2; }
*/
 
table, form { width: 99%; border-collapse: collapse; table-layout: fixed; margin: auto; }
form, summary { margin: 0.5% auto 0.5% auto; }
td, th, .border, input { border: var(--1px) solid #969696; }
th { text-align: center; color: white; }
td { color: #C4C4C4; }
.cWhite { color: white;  }
input, td, option, th, textarea, caption { padding: var(--4px); }
input:hover, option:hover, .hover td:hover, textarea:hover { background: #efefef; }

.fRight { float: right; }
.fLeft { float: left; }
.c5 { width: 5%; margin: auto; }
.c10 { width: 10%; margin: auto; }
.c15 { width: 15%; margin: auto; }
.c20 { width: 20%; margin: auto; }
.c25 { width: 25%; margin: auto; }
.c30 { width: 30%; margin: auto; }
.c35 { width: 35%; margin: auto; }
.c40 { width: 40%; margin: auto; }
.c50 { width: 50%; margin: auto; }
.c70 { width: 70%; margin: auto; }
.shopBonus { display: inline; height: 1em; width: auto; vertical-align: text-top; }

a { text-decoration: none; font-weight: bold; }
a:hover { text-decoration: underline; }

.shimmer { -webkit-mask:linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/400% 100%; animation: shimmer 4s 1; }
@keyframes shimmer { 100% { -webkit-mask-position: left; } }

.sparkles {
	z-index: 2;
	position: absolute;
	width: 4%; 
	height: auto;
	pointer-events: none;
	transform: scale(0);
	animation: sparkle var(--duration) var(--delay) infinite ease-in-out;
}
@keyframes sparkle {
	0%, 50%, 100% { transform: scale(0); }
	70% { transform: scale(-1, 0); }
	80% { transform: scale(1); }
}

/* .space { height: 5vh; } */

/* .space { display: block; height: 5vh; } */

.mTop1 { margin-top: 1% !important; }
.mTop5 { margin-top: 5% !important; }
.mTop10 { margin-top: 10% !important; }

.rounded { border-radius: 2vw; }

.hide { display: none; }

a.button { display: inline-block; }
a.button:hover { text-decoration: none; }

::-webkit-scrollbar { width: var(--20px); background: #fcfcfc; }
::-webkit-scrollbar-track { border: none; }
::-webkit-scrollbar-thumb { background: linear-gradient(rgb(255, 228, 119), rgb(255, 204, 0), rgb(255, 204, 0)); border: var(--2px) solid rgb(181, 112, 2); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(rgb(255, 204, 0), rgb(255, 204, 0), rgb(255, 228, 119)); }

.floatFix { overflow: auto; }
.floatFix video { width: 40%; margin: 1%; }

nav { 
	margin: auto; width: 50vw; z-index: 3;
	@media (min-width: 768px) { position: fixed; left: 0; bottom: 0; width: 16vw; } 
	button, a.button { text-align: left; display: flex; align-items: center; padding-left: 0; margin: 1% 0 0 0; border: var(--4px) solid rgb(181, 112, 2); } 
	img { width: 14%; margin: 0 2% 0 2%; }
} 

.imgDiv { position: relative; }
.imgDiv > div { position: absolute; top: 2%; right: 2%; width: 60%; text-align: right; font-size: 80%; }
.imgDiv * { color: white; }

.inlineImg { display: inline; vertical-align: middle; padding: 0 !important; }

.textBorder { background: linear-gradient(#ffb71c, #ea6c15, #e2672b); padding: 1% 5% 1% 5%; border-radius: var(--10px); width: min-content; white-space: nowrap; color: white !important; margin: 1% auto 0 auto; font-size: 130%; }

.numbered { display: flex; text-align: left; }
.numbered * { align-self: flex-start; padding: 0 !important; }
.numbered img { margin: 0 1% 0 1%; }

.gettingstartedBg { background: url('img/lego-universe-getting-started.jpg') no-repeat fixed center/auto 100% content-box; }
.gettingstarted p { color: #EDEDED; }
.gettingstarted figcaption { color: #EDEDED; font-style: italic; }
.gettingstarted h3 { color: white; }
.gettingstarted img { padding: 1.5%; }

.gettingstarted table * { color: white; }
.gettingstarted th { background: black; }
.gettingstarted .caption { background: #ea6c15; color: white; }
.gettingstarted caption { background: black; font-weight: bold; }
.gettingstarted tr:nth-child(even) { background-color: #767575; }
.gettingstarted tr:nth-child(odd) { background-color: #585757; }
.gettingstarted td:first-child { font-weight: bold; }

.note { background: #504b4c; border: var(--8px) solid #aaaaaa; border-radius: var(--50px); margin: 1%; }
.note p { color: white; }

.circle { color: black;
	min-width: var(--30px);
	min-height: var(--30px);
	background-color: #ffcd21;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	margin-right: 1%;
}

summary { display: block; } summary::-webkit-details-marker { display: none; }

#musicPlayer li:hover { text-decoration: underline; }
#musicPlayer li.playing { font-weight: bold; color: white; }

/* .verticalAlignBottom { vertical-align: bottom; } */

.chat::before {  
	background-image: url('img/lego-universe-lego-head.png');
	background-size: var(--legohead) var(--legohead);
	display: inline-block;
	width: var(--legohead);
	height: var(--legohead);
	content:'';
	vertical-align: -25%;
	margin-right: 0.75%;
}

#chatbox {
	height: 40vh;
	overflow-y: scroll;
	/*background: url('img/chatbg.webp') no-repeat scroll center/cover content-box;*/
	background: url('img/lego-universe-starsbg.gif') repeat center/65% auto content-box;
}

#toast-container { position: fixed; z-index: 2; margin: auto; top: 0; left: 50%; transform: translateX(-50%); width: inherit; } /* pointer-events: none;  */
.toast { position: relative; background-color: rgba(0, 0, 0, 0.8); color: white; padding: var(--12px); margin-bottom: var(--4px); }

/*
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}
.marquee-container { white-space: nowrap; overflow: hidden; }
.marquee-content:hover { animation-play-state: paused; }
.marquee-content {
    display: inline-block;
    animation: marquee 10s linear infinite;
    padding-left: 100%;
    
    img { display: inline-block; height: 5vw; width: auto; }
}
*/

.adFixed { position: fixed; top: 0.5vw; right: 0.5vw; z-index: 2; width: 14vw; background: white; }
.close-button { color:white; position: absolute; top: 0; right: 0.3vw; user-select: none; z-index: 2; }
.close-button:hover { color: red; }

.emoji { user-select: none; transition: transform 0.2s; display: inline-block; }
.emoji:hover { transform: scale(1.5); }