/* -------------------------------------------- */
/* FONTS */
@font-face {
    font-family: "SegoeUI";
    font-weight: 300;
    src: url("./assets/fonts/SegoeUIVariableStatic-12c0000-a8000.woff2") format("woff2");
}
@font-face {
    font-family: "SegoeUI";
    font-weight: 300;
    src: url("./assets/fonts/SegoeUIVariableStatic-12c0000-a8000.woff2") format("woff2");
}
@font-face {
    font-family: "SegoeUI";
    font-weight: normal;
    src: url("./assets/fonts/SegoeUIVariableStatic-11080000-a8000.woff2") format("woff2");
}
@font-face {
    font-family: "SegoeUI";
    font-weight: 600;
    src: url("./assets/fonts/SegoeUIVariableStatic-2580000-a8000.woff2") format("woff2");
}
@font-face {
    font-family: "SegoeUI-Mono";
    font-weight: normal;
    src: url("./assets/fonts/segoe-ui-mono.woff2") format("woff2");
}

/* -------------------------------------------- */
/* RESET */
*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
* {
    margin: 0;
}
body {
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizelegibility;
    width: 100%;
}
input, button, textarea, select {
    font: inherit;
}
button, input, a {
    outline: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    border: none;
    background: none;
}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    color: inherit;
    margin: 0;
}
ul li {
    list-style: none;
}
fieldset, button, input, select, textarea, hr {
    -webkit-appearance: none;
}
img, picture, video, canvas, svg {
    max-width: 100%;
}
video, canvas {
    display: block;
    width: 100%;
}
video {
    height: auto;
}
a { 
    text-decoration: none;
    color: inherit; 
}


/* -------------------------------------------- */
/* VARIABLES */
:root {
    /* Media Queries*/
    /* --media-t:     screen and (max-width: 1024px); */
    /* --media-m:     screen and (max-width: 1023px); */
    --media-m:    screen and (max-width: 600px) and (orientation: portrait);

    /* FontFamily */
    --alias-main:   'SegoeUI', sans-serif;
    --alias-alt:    'SegoeUI-Mono', sans-serif;

    /* Colors */
    --alias-red: #ff583c;

    /* 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);
    --alias-easeOutSnap: cubic-bezier(0.835, 0.085, 0.005, 1);
    --alias-easeOutUnspun: cubic-bezier( 0.745, 0.065, 0.170, 1.000);
    --alias-easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    
    /* Units*/
    --unit-fx:  calc( var(--vw) / 1920 );
    --unit-fy:  calc( var(--vh) / 1080 );
    --unit-vr:  calc(12 * var(--unit-fx));/* vertical rythtm */
    --unit-vhfix:  calc( var( --vhfix ) / 100 );
    --vhfix: 100vh;
    --vw: 100vw;
    --vh: 100vh;
    --unit-vw:  calc( var( --vw ) / 100 );
    --unit-vh:  calc( var( --vh ) / 100 );
    --unit-vhfix:  calc( var( --vhfix ) / 100 );
}

body {
    font-family: var( --alias-main );
}




/* Mobile First */
body { font-size: 14px;  line-height: calc(29/16) }
.font-h1 { font-size: 50px; line-height: 1.2;  }
.font-h2 { font-size: 44px; line-height: 1.2;  }
.font-h3 { font-size: 32px; line-height: 1.2;  }
.font-h4 { font-size: 26px; line-height: 1.2;  }
.font-h5 { font-size: 20px;  }
.font-h6 { font-size: 18px;  }
.font-t0 { font-size: 24px; line-height: 1.4;  }
.font-t1 { font-size: 18px; line-height: 1.5;  }
.font-t2 { font-size: 16px; line-height: 1.5;  }
.font-t3 { font-size: 16px; line-height: 1.2;  }
.font-t4 { font-size: 15px;  }
.font-t5 { font-size: 14px;  }
.font-t6 { font-size: 12px;  }
.font-t7 { font-size: 10px;  }

@media (min-width: 600px) {
    .font-h1 { font-size: calc(50px + (78 - 50) * (100vw - 600px) / (1920 - 768));  line-height: calc(92/75); }
    .font-h2 { font-size: calc(44px + (76 - 44) * (100vw - 600px) / (1920 - 768));  line-height: calc(92/75); }
    .font-h3 { font-size: calc(32px + (64 - 32) * (100vw - 600px) / (1920 - 768));  line-height: calc(85/64); }
    .font-h4 { font-size: calc(26px + (34 - 26) * (100vw - 600px) / (1920 - 768));  line-height: calc(46/34); }
    .font-h5 { font-size: calc(20px + (32 - 20) * (100vw - 600px) / (1920 - 768));  line-height: calc(40/32); }
    .font-h6 { font-size: calc(18px + (24 - 18) * (100vw - 600px) / (1920 - 768));  line-height: calc(36/24); }
    .font-t0 { font-size: calc(24px + (30 - 24) * (100vw - 600px) / (1920 - 768));  line-height: 1.6;         }
    .font-t1 { font-size: calc(18px + (26 - 18) * (100vw - 600px) / (1920 - 768));  line-height: calc(37/26); }
    .font-t2 { font-size: calc(16px + (22 - 16) * (100vw - 600px) / (1920 - 768));  line-height: calc(35/22); }
    .font-t3 { font-size: calc(16px + (20 - 16) * (100vw - 600px) / (1920 - 768));  line-height: calc(25/20); }
    .font-t4 { font-size: calc(15px + (18 - 15) * (100vw - 600px) / (1920 - 768));  line-height: calc(28/18); }
    .font-t5 { font-size: calc(14px + (16 - 14) * (100vw - 600px) / (1920 - 768));  line-height: calc(29/16); }
    .font-t6 { font-size: calc(12px + (14 - 12) * (100vw - 600px) / (1920 - 768));  line-height: calc(18/14); }
    .font-t7 { font-size: calc(10px + (13 - 10) * (100vw - 600px) / (1920 - 768));  line-height: calc(16/13); }
}

@media (min-width: 1920px) {
    .font-h1 { font-size: 78px; }
    .font-h2 { font-size: 76px; } 
    .font-h3 { font-size: 64px; } 
    .font-h4 { font-size: 34px; } 
    .font-h5 { font-size: 32px; } 
    .font-h6 { font-size: 24px; } 
    .font-t0 { font-size: 30px; } 
    .font-t1 { font-size: 26px; } 
    .font-t2 { font-size: 22px; } 
    .font-t3 { font-size: 20px; } 
    .font-t4 { font-size: 18px; } 
    .font-t5 { font-size: 16px; } 
    .font-t6 { font-size: 14px; } 
    .font-t7 { font-size: 13px; } 
}