@font-face {
    font-family: 'Zilla Slab';
    src: url('fonts/ZillaSlab-SemiBold.ttf') format("truetype");
    font-weight: 600;
    font-display: swap;
}

.topBar {
    color: #ffffff;
    order: 0;
    flex: 0 1 auto;
    align-self: stretch;
    display: flex;
    padding: 10px;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
    border-bottom: 1px solid;
}

.topLeftMenu {
    order: 0;
    display: flex;
    flex: 1 1 auto;
    align-self: stretch;
}

.topLeftMenu>button {
    cursor: pointer;
    border: none;
    background: transparent;
}

.topName {
    order: 0;
    flex: 1 1 auto;
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: end;
    font-family: 'Zilla Slab', serif;
    font-weight: 600;
    font-size: 37px;
    line-height: 1;
}

.topRightMenu {
    order: 0;
    flex: 1 1 auto;
    align-self: stretch;
    display: flex;
    justify-content: right;
}

.topRightMenu>button {
    cursor: pointer;
    background: transparent;
    border: none;
}

.animated-icon {
    animation: sizeChange 2s ease-in-out infinite;
}

@keyframes sizeChange {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}