#mainFight {
    width: 100%;
    min-height: 300px;
    border: 2px solid black;
    position: relative;
    /*makes it an anchor for newFight*/
}

#centred {
    position: absolute;
    text-align: center;
    width: 100%;
}

#clock {
    margin-top: 5px;
}

#selfDemon {
    margin-top: 30px;
}

#selfDemon>.fightParticipant {
    margin-inline: 0;
}


#score {
    position: absolute;
    top: 200px;
    left: 50%;
    translate: -50% 0;
}

#actions {
    width: 100%;
    padding-left: 1px;
    padding-right: 1px
}

body {
    background: #DFBF50
}

.act {
    background-color: lightgrey;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 2px 4px;
    cursor: pointer;
}

.act:hover:not(.selected) {
    background-color: darkgrey;
}

.tempSelected {
    background-color: grey;
}

.selected {
    background-color: lightgreen;
}

.actionCol {
    float: left;
    width: 174px;
    margin-right: -4px;
}

#invitations {
    width: calc(100% - 170px - 170px);
    min-width: 170px;
}

.actionColInner {
    border-left: 4px solid black;
    border-right: 4px solid black;
}

.fight {
    width: 100%;
    height: 100%;
}

.fightSide {
    /*border: 1px solid red;*/
    height: 100%;
    text-align: end;
    width: 40%;
    display: inline-block;
    vertical-align: top;
}

.fightSideLeft {
    direction: rtl
}

.noMansLand {
    display: inline-block;
    width: 20%;
}

#invitations .fightSide {
    width: 45%
}

#invitations .noMansLand {
    width: 10%;
}

/*Mark where the front of a side is*/
#mainFight .fightSide::before {
    content: "";
    margin-inline-start:-80px
}

.fightSideLeft.fightParticipant {
    float: left
}

.fightSideRight.fightParticipant {
    float: right
}

.fightParticipant {
    display: inline-block;
    width: 60px;
    overflow: hidden;
    /*background: #FFF8;*/
    margin-inline-end: 20px;
}

#mainfight .fightParticipant {
    /*transform: translate(-90%);
  transition-property: transform;
  transition-duration: 9s;
  transition-timing-function: linear;*/
}

.demonPower {
    font-weight: bold;
    color: red;
}

.human {
    background: lightyellow;
}

.you {
    filter: drop-shadow(0px 0px 10px #0af)drop-shadow(0px 0px 20px #0af)
        /*background: lightblue;*/
}

.highlight {
    filter: drop-shadow(0px 0px 10px #0f0)drop-shadow(0px 0px 20px #0f0)
        /*background: lightgreen;*/
}

.hidden {
    display: none;
}
#lengthFinder{
position:absolute
}
.demonName{
    transform-origin:left;
}
.fightSideLeft .demonName{
    transform-origin:right;
}
.invisible {
    visibility: hidden;
}

.summonCount {
    display: inline-block;
}

#log {
    overflow: scroll;
    height: 4em;
    background: burlywood;
}


@keyframes changeFight {
    0% {
        scale: 0%;
        opacity: 0%;
    }

    100% {
        opacity: 100%;
        scale: 100%;
    }
}

.newFight {
    animation: changeFight 2s;
    display: inline-block;
}

.fight+.newFight {
    margin-left: -100%;
}

#mainFight>.fight:not(.newFight) {
    display: inline-block;
}

@keyframes vanish {
    0% {
        opacity: 100%;
    }

    100% {
        opacity: 0%;
    }
}

.vanishing {
    animation: vanish 1s 1s forwards;
}

@keyframes grow {
    0% {
        /*scale:0% 100%;*/
        opacity: 0%;
        margin-inline-end: -30px;
        margin-inline-start: -30px;
    }

    50% {
        /*scale: 100% 100%;*/
        opacity: 100%;
        margin-inline-end: -30px;
        margin-inline-start: -30px;
        /*margin-inline-start:20px*/
    }
}

.arriving {
    animation: grow 2s;
}

@keyframes shrink {
    100% {
        opacity: 0%;
        margin-inline-end: -30px;
        margin-inline-start: -30px;
        /*margin-inline-start:20px*/
    }
}

.leaving {
    animation: shrink 1s 1s forwards;
}

@keyframes growCircle {
    0% {
        opacity: 0%;
    }

    100% {
        opacity: 100%;
    }
}

@keyframes shrinkCircle {
    100% {
        opacity: 0%;
    }
}

.arrivingCircle {
    animation: growCircle 1s 1s both;
    margin-inline-start: -80px;
    /*margin-inline-end: 20px;*/
}

.leavingCircle {
    animation: shrinkCircle 1s 1s forwards;
}

.fireball {
    position: absolute;
    background: orangered;
    width: 10px;
    height: 10px;
    transition: left 1s, top 1s;
    animation: shrinkCircle 1s 1s both;
}

@keyframes dyingLeft{
    100% {rotate: 90deg;}
}
@keyframes dyingRight{
    100% {rotate: -90deg;}
}
.fightSideLeft .dead .demonImg{
    animation: dyingLeft 1s forwards;
    transform-origin: 50% 70%;
}
.fightSideRight .dead .demonImg{
    animation: dyingRight 1s forwards;
    transform-origin: 50% 70%;
}