@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap');

:root {
    --grass-colour: #a6e2a6;
    --forest-colour: green;
    --mountain-colour: brown;
    --water-colour: blue;
    --pipe-colour: rgb(221, 169, 24);
    --town-colour: rgb(186, 189, 44);
    --player-colour: rgb(15, 15, 15);
    --money-colour: rgb(6, 243, 17);
    --background-colour: rgb(49, 39, 39);
    --unknown-colour: rgb(116, 47, 106);
    
}

rect.grass {
    fill: var(--grass-colour);
}

rect.forest {
    fill: var(--forest-colour);
}

rect.mountain {
    fill: var(--mountain-colour);
}

rect.water {
    fill: var(--water-colour);
}

rect.pipe {
    fill: var(--pipe-colour);
}
rect.town {
    fill: var(--town-colour);
}
rect.player {
    fill: var(--player-colour);
}
rect.money {
    fill: var(--money-colour);
    stroke:none;
    stroke-width: 0px;
}

rect.unknown {
    fill: var(--unknown-colour);
    stroke:none;
    stroke-width: 0px;
}

.map {
    filter: grayscale();
}

svg#world {
    background-color: black;
}

rect.background {
    fill: var(--background-colour);
}

symbol > rect {
    stroke: none;
    stroke-width: 0;
}

.out-of-sight {
    filter: saturate(50%);
}

.hidden {
    display: none;
    transition: 4s;
}

text.heading {
    fill:rgb(255, 255, 255);
    font-family: 'Amatic SC', cursive;
    font-size: 180px;
}

text.button {
    fill:rgb(255, 255, 255);
    font-family: 'Amatic SC', cursive;
    font-size: 70px;
}

rect.button {
    fill:rgb(116, 47, 106)
}

rect.button:hover {
    fill:rgb(151, 79, 140)
}

svg#tiles {
    display:none;
}

rect.popupBackground {
    fill:rgb(29, 31, 29);
}

text#levelNumber {
    font-size: 100px;
    fill: white;
    font-family: 'Amatic SC', cursive;
}