@font-face {
font-family: "Pristina";
src: url("fonts/pristina.ttf") format("truetype");
}

@font-face {
font-family: "Helvetica Rounded LT Bold";
src: url("fonts/Helvetica Rounded LT Bold.otf") format("opentype");
font-weight: normal;
font-style: normal;
font-color: white;
}

*{
box-sizing: border-box;
}

html,
body{
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}

.page{
position: relative;
width: 100vw;
height: 100vh;
}

/* Background */

.bg{
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
object-fit: cover;
z-index: -10;
}

/* Main Box */

.box-wrapper{
position: absolute;
top: 48%;
left: 50%;

width: min(1000px, 85vw);

transform: translate(-50%, -50%);
}

.box{
width: 100%;
height: auto;
display: block;
}

/* Content Layer */

.box-content{
position: absolute;

top: 50%;
left: 50%;

width: 70%;

transform: translate(-50%, -50%);

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

/* Logo */

.logo{
position: absolute;

width: 150px;
max-width: 90%;
height: auto;

top: -260px;
}

/* Text */

.coming-title{
position: absolute;

top: 160px;
left: 50%;

transform: translateX(-50%);

margin: 0;

font-family: "Pristina", cursive;
font-size: 40px;
font-weight: normal;
line-height: 0.9;
text-align: center;

color: #ffffff;

white-space: nowrap;
}

/* Pixie Dust */

.pixiedust{
position: absolute;

width: 550px;
height: auto;

display: block;

top: -110px;
left: 50%;

transform: translateX(-50%);

pointer-events: none;

z-index: 2;
}

/* Tink */

.tink-image{
position: absolute;

width: 900px;
max-width: 90%;
height: auto;

display: block;

top: -140px;
}

/* Footer */

.footer{
position: absolute;
left: 0;
bottom: 24px;

width: 100%;

display: grid;
place-items: center;

z-index: 5;
}

.disclaimer{
width: min(900px, 88vw);

margin: 0;

text-align: center;

font-size: 11px;
line-height: 1.2;

color: rgba(255,255,255,0.86);

font-family: "Helvetica Rounded LT Bold",
"Arial Rounded MT Bold",
Arial,
sans-serif;

font-weight: normal;
letter-spacing: 0.02em;
}