@font-face {
	font-family: 'Mulish'; font-style: normal; font-weight: 500; /* Medium weight */
	src: url('/fonts/Mulish-Medium.ttf') format('truetype');
	font-display: swap; /* Ensures text is visible during font loading */
}
@font-face {
	font-family: 'Mulish'; font-style: normal; font-weight: 900; /* Black weight */
	src: url('/fonts/Mulish-Black.ttf') format('truetype');
	font-display: swap; /* Ensures text is visible during font loading */
}
@font-face {
	font-family: 'Crimson Pro'; font-style: normal; font-weight: 400; /* Regular weight */
	src: url('/fonts/CrimsonPro-Regular.ttf') format('truetype');
	font-display: swap; /* Ensures text is visible during font loading */
}
@font-face {
	font-family: 'Crimson Pro'; font-style: normal; font-weight: 600; /* SemiBold weight */
	src: url('/fonts/CrimsonPro-SemiBold.ttf') format('truetype');
	font-display: swap; /* Ensures text is visible during font loading */
}

body, html { margin: 0; padding: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }

#background-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; }
#background-container img { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 4s ease-in-out; }

#top-right-image { position: absolute; top: 0; right: 1.3rem; z-index: 9999; width: auto; height: 5rem; opacity: 0.6; }

.instructions-banner { position:absolute; z-index: 1; width: 17.5rem; height: auto; top: 0.5rem; left:0.5rem; }
.instructions-banner-back-home { float: left; width: 2.1rem; height: 1.2rem; display: flex; justify-content: center; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; background-color: rgba(0,0,125,0.7); }
.instructions-banner-back-home img { width: 1.2rem; height: 1.2rem; }
.instructions-banner-ordis { float: left; width: 4.7rem; height: 1.2rem; display: flex; justify-content: center; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; background-color: rgba(0,0,125,0.7); }
.instructions-banner-ordis span { cursor:default; font-family: 'Crimson Pro', serif; font-weight: 500; font-size: 1rem; text-decoration: none; color: rgba(255,255,255,1); }
.instructions-banner-mobiles { float: left; width: 4.7rem; height: 1.2rem; text-align: center; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; background-color: rgba(0,0,125,0.3); }
.instructions-banner-mobiles span { font-family: 'Crimson Pro', serif; font-weight: 500; font-size: 1rem; text-decoration: none; color: rgba(255,255,255,0.5); }
.instructions-banner-3d-2d { float: left; width: 2rem; height: 1.2rem; text-align: center; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; background-color: rgba(0,0,125,0.3); }
.instructions-banner-3d-2d span { font-family: 'Crimson Pro', serif; font-weight: 500; font-size: 1rem; text-decoration: none; color: rgba(255,255,255,0.5); }
.instructions-banner-reload { float: left; width: 2rem; height: 1.2rem; display: flex; justify-content: center; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; background-color: rgba(0,0,125,0.7); }
.instructions-banner-reload img { width: 1rem; height: 1rem; margin: 0.1rem 0 0.1rem 0; }
.instructions-banner-show-hide { float: left; width: 2rem; height: 1.2rem; display: flex; justify-content: center; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; background-color: rgba(0,0,125,0.7); }
.instructions-banner-show-hide img { width: 1.2rem; height: 1.2rem; }

.instructions-wrapper{ position:absolute; z-index: 1; width: 15.5rem; height: auto; top: 1.7rem; left:0.5rem; padding: 1rem; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; background-color: rgba(0,0,125,0.7); }
.instructions-hidden { display: none; }

.instructions-action { float:left; height: 3.7rem; width: 8rem; margin: 0; display: flex; align-items: center; justify-content: center; }
.instructions-action img { height: 3.3rem; width: auto; margin: auto; }
.instructions-equal { float:left; height: 3.7rem; width: 2.3rem; margin: 0; display: flex; align-items: center; justify-content: center; font-family: 'Mulish', sans-serif; font-style: 500; font-size: 2rem; color: rgba(200,200,255,0.6); }
.instructions-result { float: left; height: 3.7rem;  width: 5.2rem; margin: 0; display: flex; align-items: center; justify-content: center; }
.instructions-result img { height: 3.3rem; width: auto; margin: auto; }

.instructions-mouse-title { display: flex; justify-content: center; align-items: center; width: 100%; height: auto; position: relative; }
.instructions-mouse-title img { height: 45px; width: auto; z-index: 10; }
.instructions-mouse-title::before { content: ""; position: absolute; top: 22px; left: 0; width: 100%; height: 4px; background-color: rgba(255, 255, 255, 0.3); transform: translateY(50%); z-index: 1; }

.instructions-keyboard-title { display: flex; justify-content: center; align-items: center; width: 100%; height: auto; margin: 1rem auto 1rem auto; position: relative; }
.instructions-keyboard-title img { height: 45px; width: auto; z-index: 10; }
.instructions-keyboard-title::before { content: ""; position: absolute; bottom: 50%; left: 0; width: 100%; height: 4px; background-color: rgba(255, 255, 255, 0.3); transform: translateY(50%); z-index: 1; }

.instructions-spacing { float: left; width: 100%; height: 1rem; }

.instructions-separator { float: left; width: 100%; height:4px; margin: 1rem 0 1rem 0; background-color: rgba(255,255,255,0.3); }
.instructions-commander { float: left; width: 100%; height: auto; font-family: 'Mulish', sans-serif; font-weight: 500; font-size: 0.8rem; color: #fff; letter-spacing: 0.1em; line-height: 2rem; text-align: center; background-color: rgb(0,0,125); }
.instructions-commander a { color: #fff; text-decoration: underline; }

iframe { width: 100%; height: 100%; border: none; background: transparent; z-index: 0; visibility: hidden; }

#loading-placeholder { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-family: Arial, sans-serif; color: #333; display: flex; flex-direction: column; align-items: center; z-index: 1; }