@font-face 
{
    font-family: Agharti;
    src: url('../../resources/fonts/Agharti-BoldCondensed.ttf');
}

@font-face 
{
    font-family: porschav3cond;
    src: url('../../resources/fonts/911porschav3cond.ttf');
}

body
{
    margin: 0px;
    padding: 0px;
}

.parentcontainer
{
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 34fr 21fr 13fr 8fr 5fr 3fr 2fr 1fr;
    background-color: rgb(19, 12, 13);
}

.child
{
    overflow: hidden;
}

.special-1
{
    grid-column: 1 / 4;
    grid-row: 1 / 3;
    fill: rgb(137, 59, 91);
    font-family: "Agharti";
}

.special-2
{
    grid-column: 3 / 6;
    grid-row: 2 / 3;
    fill: rgb(105, 124, 185);
    font-family: "porschav3cond";
}

.special-3-1
{
    grid-column: 2 / 3;
    grid-row: 3 / 5;
    fill: rgb(138, 118, 85);
    font-family: "Agharti";
}

.special-3-2
{
    grid-column: 5 / 7;
    grid-row: 3 / 6;
    fill: rgb(243, 211, 7);
    font-family: "Agharti";
}

.special-3-3
{
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    fill: rgb(138, 118, 85);
    font-family: "Agharti";
}

.special-4-1
{
    grid-column: 1 / 4;
    grid-row: 5 / 9;
    fill: rgb(217, 54, 51);
    font-family: "porschav3cond";
}

.special-4-2
{
    grid-column: 3 / 4;
    grid-row: 4 / 5;
    fill: rgb(31, 122, 98);
    font-family: "porschav3cond";
}

.special-5-1
{
    grid-column: 4 / 5;
    grid-row: 4 / 6;
    fill: rgb(31, 122, 98);
    font-family: "porschav3cond";
}

.special-5-2
{
    grid-column: 5 / 6;
    grid-row: 6 / 8;
    fill: rgb(105, 124, 185);
    font-family: "porschav3cond";
}

.special-6-1
{
    grid-column: 1 / 3;
    grid-row: 6 / 7;
    fill: rgb(138, 118, 85);
}

.special-6-2
{
    grid-column: 4 / 5;
    grid-row: 5 / 9;
    fill: rgb(137, 59, 91);
    font-family: "Agharti";
}

.special-7-1
{
    grid-column: 3 / 5;
    grid-row: 6 / 8;
    fill: rgb(243, 211, 7);
    font-family: "Agharti";
}

svg
{
    width: 100%;
    height: 100%;
}