/**
 *
 */

 @font-face {
    font-family: DancingScript;
    src: url(/public/fonts/DancingScript-VariableFont_wght.ttf);
    font-display: swap;
}

@font-face {
    font-family: TrenchThin;
    src: url(/public/fonts/trenchThin.otf);
    font-display: swap;
}

@font-face {
    font-family: Lato;
    src: url(/public/fonts/Lato-Light.ttf);
    font-display: swap;
}

@font-face {
    font-family: Lato;
    font-style: normal;
    font-weight: bold;
    src: url(/public/fonts/Lato-Bold.ttf);
}

@font-face {
    font-family: Lato;
    font-style: italic;
    font-weight: bold;
    src: url(/public/fonts/Lato-BoldItalic.ttf);
}

@font-face {
    font-family: Lato;
    font-style: italic;
    font-weight: normal;
    src: url(/public/fonts/Lato-LightItalic.ttf);
}

/**
 *
 */

* {
    box-sizing: border-box;
    position: relative;
}

a:not([href]), div[href=""]
{
    color: gray !important;
}

:root,
body,
#platform {
    height: 100%;
    width: 100%;
    scroll-behavior: smooth;
    /** TODO soon on chrome fix https://www.alsacreations.com/astuce/lire/1831-corriger-le-probleme-de-hauteur-100vh-sur-mobile.html */
}

:root {
    color: white;
    font-family: Lato;
    font-size: 14px;

    background-size: 200%;
    background-image: linear-gradient(128deg, #06324b, #05061c);

    /** failsafe for a edge-case : On Android Chrome, when streching the screen to a border, a flickering effect (overlapping of background-image and background-color) happens. this property prevents that. */
    /*
    animation: wavingBg 10s ease infinite;
    will-change: transform;
    */
}

/** https://stackoverflow.com/questions/25298443/force-address-bar-to-show-in-mobile-chrome-app */
html {
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

li {
    text-align: left;
}

title {
    display: none;
}

a {
    color: white;
}

body {
    margin: 0;
    overflow: hidden;
    position: fixed; /** fixes chrome android toolbar, prevent issue */
}

ul {
    padding-left: 1em;
}

li:not(:last-child) {
    margin-bottom: .5em;
}

body div,
body form,
#team {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}


#platform {
    display: block;
    overflow-x: hidden;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

[data-bud]::before {
    content: attr(data-bud);
    display: inline-block;
    position: absolute;
    left: 25%;
    top: 0;
    font-size: .25em;
    font-weight: bold;
    font-family: DancingScript;
  }

/* Hide scrollbar for Chrome, Safari and Opera */
#platform::-webkit-scrollbar {
    display: none;
}

#platform > .floatin .bg {
    display: block;
    height: max(1000px, 200vh);
    top: -50vh;
    opacity: 0;
}

.bg {
    position: absolute;
    pointer-events: none;
    z-index: -1 /* always below */;
}

.page {
    justify-content: space-between;
    flex: 1;
    width: 100%;
    will-change: opacity; /** fade-in + fade-out on scroll */ 
}

@media only screen and (hover: none) and (pointer: coarse) {
    .page:first-child { padding-top: 2.5vh !important; }
}

.page:first-child { padding-top: 5vh; }

/** 
 *
 */

#adblocked {
    z-index: 2; /** over everything else */
    opacity: 0;
    box-shadow: 0px 0px 20px 0px #09090a;
    right: 1rem;
    top: 1rem;
    position: absolute;
    align-self: flex-end;
    background-image: linear-gradient(130deg, #9d9500 0%, #62021e 20%, #1b2039 50%);
    width: 12rem;
    text-align: center;
    margin: .3rem;
    padding: 1.5rem;
    color: #c9c9c9;
    gap: .5rem;
    cursor: pointer;
    pointer-events: none;
    border-radius: 5px;
    transition: opacity .3s;
}

#adblocked .content * {
    position: unset; /** allows normal layout */
}

#adblocked.showed {
    pointer-events: all;
}

#adblocked.showed:hover {
    opacity: 1 !important;
}

#adblocked i {
    font-size: 1.5rem;
    margin-bottom: .5em;
}

#adblocked::after {
    color: white;
    content: "x";
    position: absolute;
    right: 0.5rem;
    top: 0;
}

#please-scroll {
    z-index: -1;
    font-size: max(1rem, 1.5vmin);
    transform: perspective(10px);
    height: 0;
}

#please-scroll .content {
    opacity: 0;
}

#please-scroll .content div {
    color: gray;
}

/* */

.vscroll {
    display: inline-flex;
    overflow-y: hidden;
    /*align-items: flex-start;*/
    justify-content: flex-start;
    height: 1.2em;
}

.vscroll > * {
    display: inline-flex;
    flex-direction: row;
    gap: .2em;
    align-items: baseline;
}

.vscroll > * span:first-child {
    font-size: .5em;
}

/* */
.explain {
    flex-direction: row;
    padding: 1rem;
    width: 100%;
    gap: max(5vmax, 1rem);
    font-size: max(1vmax, 1rem);
}

.explain > * {
    max-width: 50%;
}

.explain > *.solo {
    max-width: 80%;
}

.explain.reverse {
    flex-direction: row-reverse;
}

.explain b.title {
    font-size: max(1.7em, 3vmax);
}

.page .explain > * {
    opacity: 0;
}

.page .explain > :nth-child(2), .page .explain > *.solo {
    font-size: max(1.1rem, 1.2vmax);
}

.explain .sub {
    color: #c8c8c8;
    margin-bottom: .25em;
}

.x-translate {
    will-change: translateX, opacity; /** 1time pop-in on scroll */ 
}

.become-tester {
    color: #fff1a6;
    -webkit-text-stroke: 0.5px gold;
}

hr {
    width: 100%; 
    border: 1px solid #ffffff4d;
    margin: 2em;
}

.easy-link {
    align-items: center; display: flex; justify-content: space-between;

    background-color: white;
    border-radius: 5px;
    padding: .25em .5em;
    display: flex;
    gap: .5em;
    align-items: center;
    box-shadow: 0px 0px 7px #00000059;
    color: #fff4ba !important;
    background-color: #263b3d;
    transition: opacity .3s ease;
}

.easy-link i:first-child {
    font-size: 1.3em;
}

.easy-link::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f08e";
    font-size: .5em;
}

.easy-link:hover {
    opacity: .85;
}