@font-face {
    font-family: SpaceFrigate;
    src: url(spacefr.ttf);
  }




path{
    transition: fill 1s ease;
}

.f1{
    fill:rgba(176,197,179,255);
}
.f2{
    fill:rgba(134,176,165,255);
}
.f3{
    fill:rgba(111,164,158,255);
}
.f4{
    fill:rgba(79,148,147,255);
}
.f5{
    fill:rgba(32,119,127,255);
}
.f6{
    fill:rgba(47,106,115,255);
}
.f7{
    fill:rgba(53,99,109,255);
}
.f8{
    fill:rgba(60,88,100,255);
}
.f0{
    fill: rgb(255, 255, 255)
}


svg{
    width: 100px;
    height: 100px;
    display: block;
}

svg g{
    fill: rgb(255, 255, 255);
}

#container{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


#container > div {
    font-size: 3rem;
    margin: 2rem;
    font-family: "SpaceFrigate";
    text-align: center;
}

body{
    margin: 0;
    background-image: url(Meteor.svg);
    background-repeat: no-repeat;
    background-size: cover;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

}