$font-size: 100vh * 0.01;
$icon-size: $font-size * 2;

// TODO: To remove once the design updated.
$border-style: thin solid #BED6E0;

$greyscale-90: #1B1B1B;
$greyscale-80: #303030;
$greyscale-70: #474747;
$greyscale-60: #5E5E5E;
$greyscale-50: #777777;
$greyscale-40: #919191;
$greyscale-30: #ABABAB;
$greyscale-20: #C6C6C6;
$greyscale-10: #E2E2E2;
$greyscale-0: #FFFFFF;

$color-primary-150: #E2F2F7;
$color-primary-140: #C4E5EE;
$color-primary-130: #A5D7E6;
$color-primary-120: #83CADE;
$color-primary-110: #5CBDD5;
$color-primary-100: #1DB2CF;
$color-primary-90: #0092AF;
$color-primary-80: #007691;
$color-primary-70: #005A75;
$color-primary-60: #004059;
$color-primary-50: #002740;

$color-secondary-150: #EAE5F3;
$color-secondary-140: #D5CCE7;
$color-secondary-130: #BFB3DB;
$color-secondary-120: #AA9BCF;
$color-secondary-110: #9583C3;
$color-secondary-100: #7E6BB6;
$color-secondary-90: #6957A0;
$color-secondary-80: #53448A;
$color-secondary-70: #3E3174;
$color-secondary-60: #281F5F;
$color-secondary-50: #110E4B;

$color-ternary-150: #FCE0E9;
$color-ternary-140: #F7C1D4;
$color-ternary-130: #F1A1BF;
$color-ternary-120: #E981AA;
$color-ternary-110: #E05F96;
$color-ternary-100: #D53583;
$color-ternary-90: #BC106D;
$color-ternary-80: #A30059;
$color-ternary-70: #8B0046;
$color-ternary-60: #720033;
$color-ternary-50: #5A0022;

$form-max-height: 1024px;
$form-aspect-ratio: 1/1.618;

$border-radius: 16px;

$geist-font-path: "../fonts/Geist";

@font-face {
    src: url("#{$geist-font-path}/Geist-Bold.woff2") format("woff2");
    font-family: "Geist";
    font-weight: bold;
}

* {
    font-family: "Geist";
}

body {
    height: 100vh;
    width: 100vw;
    margin: 0px;
    padding: 0px;
    outline: 0px;
}

#main {
    height: 100%;
    width: 100%;
}

// TODO: To remove once the design updated.
.aeroButton {
    height: 50%;
    min-height: 16px;
    aspect-ratio: 1;
    background-color: transparent;
    border: 2px solid transparent;
    background-size: contain !important;
    margin-right: 1%;
}
.aeroButton:hover {
    border-image: url(./images/aerobutton_border.png) 2 round;
}
.aeroButton:active {
    border-image: url(./images/aerobutton_border_down.png) 2 round;
}

.button {
    height: 50%;
    min-height: 16px;
    aspect-ratio: 1;
    background-color: transparent;
    border: 2px solid transparent;
    background-size: contain !important;
    margin-right: 1%;
}
.button:hover {
    border-image: url(./images/button_border.png) 2 round;
}
.button:active {
    border-image: url(./images/button_border_down.png) 2 round;
}