@font-face{
    font-family: "Helonik Black";
    src: url("e95dc59988cf96e0c17519c1303217d3.eot");
    src: url("e95dc59988cf96e0c17519c1303217d3.eot?#iefix")format("embedded-opentype"),
        url("e95dc59988cf96e0c17519c1303217d3.woff")format("woff"),
        url("e95dc59988cf96e0c17519c1303217d3.woff2")format("woff2"),
        url("e95dc59988cf96e0c17519c1303217d3.ttf")format("truetype"),
        url("e95dc59988cf96e0c17519c1303217d3.svg#Helonik Black")format("svg");
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}

@font-face{
    font-family: "Helonik Bold";
    src: url("4c2a1c9a6d19a590e34307c9488aa96a.eot");
    src: url("4c2a1c9a6d19a590e34307c9488aa96a.eot?#iefix")format("embedded-opentype"),
        url("4c2a1c9a6d19a590e34307c9488aa96a.woff")format("woff"),
        url("4c2a1c9a6d19a590e34307c9488aa96a.woff2")format("woff2"),
        url("4c2a1c9a6d19a590e34307c9488aa96a.ttf")format("truetype"),
        url("4c2a1c9a6d19a590e34307c9488aa96a.svg#Helonik Bold")format("svg");
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}

body {
    font-family: "Helonik Bold";
    margin: 0;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}


#nav-parent {
display: grid;
justify-items: center;
align-items: center;
grid-template-columns: 1fr 3fr 5fr 3fr 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
background-color: darkgray;
width:100%;
height:calc(var(--nav-height)*1px);
} 

#nav-parent > div {
    width: 100%;
    height: 100%;
    display: grid;
    align-items: center;
}

#nav-parent > div > span {
    padding: 3px;
}

.nav-item {
    font-size: 14px;
    align-self: center;
}

#nav-main-items {
    display: grid;
    justify-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    width:100%;
    height:100%;

}

#body-container {
    padding-left: 20%; 
    padding-right: 20%; 
    padding-top:50px;
    background-image: url("./assets/bg2.png");

    background-color: #7092be;
}

#main-body {
    width:100%;
    height: fit-content;
    padding: 15px;
    background-color: lightgrey;
}

.centred {
    display: flex;
    justify-content: center; 
    align-items: center;
}

:root {
    --nav-height: 32;
    --sprite-height: calc(var(--nav-height) - 5);
    --actual-sprite-height: 200;
    --actual-sprite-width:400;
    --actual-spritesheet-height: 2600;
    --actual-spritesheet-width: 1600;
    --sprites-in-col: 13;
    --sprite-scale-factor: calc(var(--sprite-height) / var(--actual-sprite-height));
    --spritesheet-height: calc(var(--sprites-in-col) * var(--sprite-height));
    --spritesheet-width: calc(var(--spritesheet-height) * var(--actual-spritesheet-width) / var(--actual-spritesheet-height));
    --sprite-width: calc(var(--actual-sprite-width) * var(--sprite-scale-factor));
}


#cat-animation {
    width: calc(var(--sprite-width)*1px);
    height: calc(var(--sprite-height)*1px);
    background-image: url("./assets/cat-animation.png");
    background-size: calc(var(--spritesheet-width)*1px);
    position: absolute;
}

.mirror-H {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1) translateY(5px);
    filter: FlipH;
    -ms-filter: "FlipH";
}