#nav > ul > li {
  display: inline;
  padding: 0px;
  margin: 0.4em
}

/*
html, body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

*, ::before, ::after {
    box-sizing: inherit;
}

.flex {
    display: flex;
    align-items: stretch;
}

.flex > * {
    align-items: center;
    justify-content: center;
}

.flex > * + .flex * {
    margin-left: 2%;
}

.flex > .grow {
    flex-grow: 1;
}

#ticker {
    margin: 2% 0;
    padding: 2%;
    border: 1px solid black;
}

#ticker > .team, #time {
    text-align: center;
}

#time {
    
}

@keyframes goal {
    0% { color: red ;}
    25% { font-weight: bold; }
    50% { color: green; background-color: lightgreen; }
    75% { font-weight: normal; background-color: white; }
    100% { color: black; }
}

.goal {
    animation: goal linear 5s;
}

#events {
    display: table;
}

#events > .event {
    display: table-row;
}

#events > .event > * {
    display: table-cell;
    height: 1.3em;
    line-height: 100%;
    vertical-align: middle; 
    padding: 0.2em;
}

#events > .event img {
    height: 100%;
}
*/


/**
 * Trigger Animation (works multiple times!)
 * $('#score > [team="1"]').classList.add('goal'); setTimeout(() => $('#score > [team="1"]').classList.remove('goal'), 6000)
 */