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

$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;

body {
    height: 100vh;
    width: 100vw;
    margin: 0px;
    padding: 0px;
    outline: 0px;
    font-family: Tahoma, sans-serif;
}

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

.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;
}