* {
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 300;
}

@font-face {
    font-family: "EXEPixelPerfect";
    src: local("EXEPixelPerfect"),
     url("./fonts/EXEPixelPerfect.ttf") format("truetype");
}

.app {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

h1 {  font-size: 30px; }
h2 {  font-size: 21px; font-weight: 300; }
h3 { font-size: 20px; }

@media (min-width: 450px) {
    h1 { font-size: 60px; }
    h2 { font-size: 40px; }
    h3 { font-size: 25px; }
    p { font-size: 20px; }
    a { font-size: 25px; }
}

// ---------- START stars logic
@function create-stars($n) {
    $value: "50px 30px white";
    @for $i from 2 through $n {
        $value: "#{$value} , #{$i * random(100)}px #{$i * random(50)}px white";
        $value: "#{$value} , #{$i * random(80)}px #{$i * random(10)}px white";
        $value: "#{$value} , #{$i * random(60)}px #{$i * random(50)}px white";
    }

    @return unquote($value);
}

.stars-big {
    border-radius: 50%;
    animation: anim-stars 20s linear infinite;
    box-shadow: create-stars(50);
    width: 3px;
    height: 3px;
}

.stars-small {
    border-radius: 50%;
    animation: anim-stars 20s linear infinite;
    box-shadow: create-stars(50);
    width: 1px;
    height: 1px;
}
// ---------- END stars logic
