@font-face {
    font-family: 'Raleway';
    src: url('fonts/Raleway-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    text-rendering: geometricPrecision;
}

@font-face {
    font-family: 'Raleway';
    src: url('fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
    text-rendering: geometricPrecision;
}

@font-face {
    font-family: 'Lilita One';
    src: url('fonts/LilitaOne-Regular.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    text-rendering: geometricPrecision;
}


html{ -webkit-user-select: none; -ms-user-select: none; user-select: none; background:#000;}
body {overflow: hidden; font-family: 'Raleway', Arial, sans-serif;}


* {
    font-family: 'Raleway', Arial, sans-serif !important;
}

#mainLoader{position:absolute;z-index:5; display:none; font-size:80px; line-height:50px; color:#FFF; text-align:center; width:100%; font-family:'Raleway', sans-serif;}
 
#mainHolder{position:absolute; width:100%;height:100%;}
 
#notSupportHolder{ width:90%; margin:5% auto; position:relative; color:#FFF; text-align:center; font-size:40px; font-family:'Raleway', sans-serif; display:none;}
.notSupport{margin-top:200px;}
 
#rotateHolder{position:absolute;width:100%;height:100%;background-color:#111;z-index:1000; display:none;}
.mobileRotate{width:200px;height:auto;position:absolute;text-align:center;}
.rotateImg{-webkit-animation:spin .5s linear infinite; -moz-animation:spin .5s linear infinite; animation:spin .5s linear infinite; margin-bottom:10px;}
.rotateDesc{color:#fff; font-size:25px; line-height:25px; font-family:'Raleway', sans-serif;}

@-moz-keyframes spin { 50% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(0deg); } }
@-webkit-keyframes spin { 50% { -webkit-transform: rotate(90deg); } 100% { -webkit-transform: rotate(0deg); } }
@keyframes spin { 50% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } 100% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } }


/*-- Register Input Fields -- */
#registerInputs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.register-input {
    position: absolute;
    background: transparent;
    border: none;
    outline: none;
    color: #333;
    font-size: 16px;
    font-family: 'Raleway', Arial, sans-serif;
    padding: 10px 15px;
    pointer-events: auto;
    box-sizing: border-box;
    /* Safari-specific fixes */
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: text;
    user-select: text;
}

.register-input::placeholder {
    color: black;
}

.register-input:focus {
    background: rgba(255, 255, 255, 0.1);
}

/* Safari-compatible positioning using absolute with calculated positions */
#signInLink {
    top: 68%;
    left: 48%;
    width: 200px;
    margin-left: -80px;
    pointer-events: auto;
}

#registerName {
    top: 37%;
    left: 48%;
    width: 200px;
    margin-left: -100px;
}

#registerEmail {
    top: 45%;
    left: 48%;
    width: 200px;
    margin-left: -100px;
}

#registerBirthday {
    top: 53%;
    left: 48%;
    width: 200px;
    margin-left: -100px;
}

#registerPhone {
    top: 61%;
    left: 48%;
    width: 200px;
    margin-left: -100px;
}

/*-- Login Input Fields -- */
#loginInputs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.login-input {
    position: absolute;
    background: transparent;
    border: none;
    outline: none;
    color: #333;
    font-size: 16px;
    font-family: 'Raleway', Arial, sans-serif;
    padding: 10px 15px;
    pointer-events: auto;
    box-sizing: border-box;
    /* Safari-specific fixes */
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: text;
    user-select: text;
}

.login-input::placeholder {
    color: black;
}

.login-input:focus {
    background: rgba(255, 255, 255, 0.1);
}

/* Login page positioning */
#registerHereLink {
    top: 68%;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    pointer-events: auto;
}

#loginMobile {
    top: 50%;
    left: 50%;
    width: 200px;
    margin-left: -100px;
}

/*-- OTP Input Fields -- */
#otpInputs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.otp-input {
    position: absolute;
    background: transparent;
    border: none;
    outline: none;
    color: #333;
    font-size: 16px;
    font-family: 'Raleway', Arial, sans-serif;
    padding: 10px 15px;
    pointer-events: auto;
    box-sizing: border-box;
    text-align: center;
    /* Safari-specific fixes */
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: text;
    user-select: text;
}

.otp-input::placeholder {
    color: black;
}

.otp-input:focus {
    background: rgba(255, 255, 255, 0.1);
}

/* OTP page positioning */
#otpCode {
    top: 50%;
    left: 50%;
    width: 200px;
    margin-left: -100px;
}

/*-- Consent Privacy Link -- */
#consentInputs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.privacy-link {
    position: absolute;
    background: transparent;
    border: none;
    outline: none;
    color: #333;
    font-size: 16px;
    font-family: 'Raleway', Arial, sans-serif;
    text-decoration: underline;
    pointer-events: auto;
    cursor: pointer;
}

.privacy-link:hover {
    color: #555;
}

/* Privacy link positioning */
#privacyNoticeLink {
    top: 70%;
    left: 50%;
    width: 250px;
    margin-left: -125px;
}

/*-- Canvas Wrapper -- */
#canvasHolder{ display:none; width:100%; max-width:1024px; height:100%; margin:auto; position:relative;}
canvas{ position:fixed;}