/* ---------- Variables ---------- */

@font-face {  
    font-family: order;
    src: url("../assets/policies/order.otf"); 
}

@font-face {  
    font-family: inter;
    src: url("../assets/policies/inter.ttf");
}

@font-face {  
    font-family: medium;
    src: url("../assets/policies/medium.ttf");
}

:root {
    --p-white: #f5f5f7;
    --p-black: #000000;
    --p-grey: #86868b;
    --p-light-grey: #dddddd;
    --p-blue: #2997ff;
    --p-light-blue: #c2def9;
    --p-green: #00d959;
    --p-red: #ff0000;
    --p-purple: #ac39ff;
    --p-yellow: #fbbc04;
    --p-giga-large: 96px;
    --p-mega-large: 72px;
    --p-extra-extra-large: 48px;
    --p-extra-large: 40px;
    --p-large: 32px;
    --p-medium: 24px;
    --p-light: 20px;
    --p-extra-light: 16px;
    --p-extra-extra-light: 14px;
    --p-mega-light: 12px;
    --p-giga-light: 10px;
}

/* ---------- Body ---------- */

body {
    width: 100%;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background-color: var(--p-white);
}

/* ---------- No script ---------- */

#no_script {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--p-black);
}

#no_script_title {
    position: absolute;
    left: 50%;
    top: 45%;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--p-white);
    font-family: order;
    font-size: var(--p-extra-extra-large);
    text-align: center;
    transform: translate(-50%,-50%);
}

#no_script_text {
    position: absolute;
    top: 55%;
    left: 50%;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--p-white);
    font-family: inter;
    font-size: var(--p-light);
    text-align: center;
    transform: translate(-50%,-50%);
}

/* ---------- Scroll to top ---------- */

#scroll_to_top {
    position: fixed;
    z-index: 8;
    bottom: 30px;
    left: 30px;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    outline-offset: -6px;
    outline: solid 7px var(--p-white);
    border: none;
    border-radius: 500px;
    background-color: var(--p-black);
    fill: var(--p-white);
    cursor: pointer;
    transition-duration: 500ms;
    transform: translateY(100px);
    box-shadow: rgba(60, 64, 67, 0.6) 0px 1px 2px 0px, rgba(60, 64, 67, 0.3) 0px 2px 6px 2px;
}

/* ---------- Setup ---------- */

h1, h2 {
    font-weight: normal;
}

a {
    text-decoration: none;
}

.text_color {
    color: var(--p-blue);
    font-family: medium;
}