@use '@/assets/variables';
@use 'sass:list';

body {
    color: variables.$text-color;
    font-size: variables.$normal-text-size;
    font-family: variables.$text-font;
    background-color: variables.$background-color;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    min-height: 100vh;
    margin: 0;
}

main {
    width: 100%;
}

#app {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
}

* {
    stroke-width: 0;
    box-sizing: border-box;
}

polyline {
    stroke-width: 1px;
}

@for $i from 1 through list.length(variables.$colors) {
    .indexed-color.color-#{$i - 1} {
        #{--indexed-color}: list.nth(variables.$colors, $i);
    }
}

a,
a:visited,
a:hover,
a:active {
    text-decoration: inherit;
    color: inherit;
}