/* -------------------------------------------- */
/* FONTS */

@font-face {
    font-family: "PPNeueMontreal";
    src: url("./assets/fonts/PPNeueMontreal-Book.woff2") format("woff2");
    font-weight: normal;
}

@font-face {
    font-family: "PPNeueMontreal";
    src: url("./assets/fonts/PPNeueMontreal-Regular.woff2") format("woff2");
    font-weight: bold;
}

@font-face {
    font-family: "PPFraktionMono";
    src: url("./assets/fonts/PPFraktionMono-Regular.woff2") format("woff2");
}/* -------------------------------------------- */
/* Reset */

*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

* {
    margin: 0;
}

html {
    height: 100%;
    width: 100%;
    overflow: scroll;
}

body {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizelegibility;
    font-family: var(--alias-main);
    background: #000;
}

input, button, textarea, select {
    font: inherit;
}

button, input, a {
    outline: none;
    cursor: pointer;
    font:inherit
}

h1,h2,h3,h4,h4,h5,h6 {
    font-weight: normal;
    color: inherit;
    margin: 0;
}

fieldset, button, input, select, textarea, hr {
    -webkit-appearance: none;
}

img, picture, video, canvas, svg {
    max-width: 100%;
}
video, canvas {
    display: block;
    width: 100%;
}

a { 
    text-decoration: none;
    color: inherit; 
}


ul {
    list-style: none;
    padding: 0;
}:root {
    
    --minSize:    320;
    --maxSize:    1440;

    /* Media Queries*/

    --media-m:     screen and (max-width: 896px) and (orientation: landscape), screen and (max-width: 500px) and (orientation: portrait);
    
    /* FontFamily */
    --alias-main:  'PPNeueMontreal', sans-serif;
    --alias-alt:   'PPFraktionMono', sans-serif;

    /* Colors */
    --alias-theme: #000;
    --alias-dark-theme: #000;
    
    --alias-dark: #000;
    --alias-light: #fff;
    --alias-lightGrad: linear-gradient(0deg, white, transparent);
    --alias-gradPurple: linear-gradient(129deg,#dc79ff,#256bfa);
    --alias-gradBlackRed: radial-gradient(199.03% 275.89% at 68.16% 190.4%, #FF5757 36.19%, #A51F24 46.6%, #272727 61.65%);
    --alias-gradWhiteTrans: linear-gradient(180deg, #EFF8FF 0%, rgba(239, 245, 255, 0.76) 18.75%, rgba(239, 248, 255, 0) 50%);
    
    
    --alias-grey75: rgba(38,38,38,0.75);
    --alias-white10: rgba(255,255,255,0.1);
    --alias-white20: rgba(255,255,255,0.2);
    --alias-white30: rgba(255,255,255,0.3);
    --alias-white40: rgba(255,255,255,0.4);
    --alias-white50: rgba(255,255,255,0.5);
    --alias-white60: rgba(255,255,255,0.6);
    --alias-white70: rgba(255,255,255,0.6);
    --alias-white80: rgba(255,255,255,0.6);
    --alias-white90: rgba(255,255,255,0.6);
    --alias-black10: rgba(0,0,0,0.1);
    --alias-black20: rgba(0,0,0,0.2);
    --alias-black30: rgba(0,0,0,0.3);
    --alias-black40: rgba(0,0,0,0.4);
    --alias-black50: rgba(0,0,0,0.5);
    --alias-black60: rgba(0,0,0,0.6);
    --alias-black70: rgba(0,0,0,0.6);
    --alias-black80: rgba(0,0,0,0.6);
    --alias-black90: rgba(0,0,0,0.6);

    /* Easings */
    --alias-easeOut: cubic-bezier(0.430, 0.195, 0.020, 1.000);
    --alias-easeIn: cubic-bezier(0.98, 0.0, 0.57, 0);
    --alias-easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
    --alias-easeOut2: cubic-bezier(0.9, 0.1, 0.15, 1.05);
    --alias-easeOut3: cubic-bezier(0.630, 0.195, 0.010, 1.000);
    --alias-easeOutSlow: cubic-bezier(.43,.195,.02,1);

    /* Units*/
    --unit-fx:  calc( var(--vw) / 1440 );
    --unit-fy:  calc( var(--vh) / 900 );
    --unit-vhfix:  calc( var( --vhfix ) / 100 );
    
    --vhfix: 100vh;
    --vw: 100vw;
    --vh: 100vh;
    --unit-vw:  calc( var( --vw ) / 100 );
    --unit-vhfix:  calc( var( --vhfix ) / 100 );
}



@media screen and (max-width: 896px) and (orientation: landscape) {
    :root {
        --unit-fx:  calc( var(--vw) / 896 );
        --unit-fy:  calc( var(--vh) / 375 );
    }
}
@media screen and (max-width: 500px) and (orientation: portrait) {
    :root {
        --unit-fx:  calc( var(--vw) / 375 );
        --unit-fy:  calc( var(--vh) / 667 );
    }
}@keyframes slideUp {
    0% {
        transform-origin: 0% 0%;
        opacity: 0;
        transform: translateX(10vw);
    }
    100% {
        transform-origin: 0% 0%;
        opacity: 1;
       transform: translateX(0%) ;
    }
}