#aligner {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    width: 100%;
}

#aligner * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#aligner h1{
    display: none
}

#aligner.on-way{
    display: none;
    background: transparent;
}


#board {
    position: relative;
    flex: none;
    width: 100%;
    background-color: transparent;
    cursor:cell;
    overflow: hidden;
    display: flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    align-content:space-between;
    height: 100%;
}

.holder {
    display: inline-block;
    height:  calc(100vw / 20);
    width: calc(100vw / 20);
    border-left:#eee solid 1px;
    border-top:#eee solid 1px;
}
.holder:hover{
    box-shadow: 0 0 20px rgba(0,255,0,.5);
}




.note {
    background-color: transparent;
    border-radius: 2px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
   font-size: 0rem;
    opacity: 0;
}

.note dd{
    display: flex;
    padding: 10px;
    align-items: center;
    justify-content: center;
}

.note img{
    width: 100%;
    height: auto;
}

.note.active {
    box-shadow: 0 0 10px rgba(0,255,0,.2);
    opacity: 1;
    font-size: 3rem;
}


#file-controls {
    position: fixed;
    background: rgba(255, 255, 255, 0.1);
    top: 0;
    right: 0;
}



#audio rect {
    display: inline-block;
}
#audio.mute rect {
    display: none;
}


.note.active.huzzar {
    opacity: 0;
    transition: all 0.3s;
}

.forward .holder {
    -webkit-animation: line 3s linear infinite;
    animation: line 3s linear infinite;
}
.forward .holder:nth-child(16n + 0) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.forward .holder:nth-child(16n + 1) {
    -webkit-animation-delay: 0.1875s;
    animation-delay: 0.1875s;
}
.forward .holder:nth-child(16n + 2) {
    -webkit-animation-delay: 0.375s;
    animation-delay: 0.375s;
}
.forward .holder:nth-child(16n + 3) {
    -webkit-animation-delay: 0.5625s;
    animation-delay: 0.5625s;
}
.forward .holder:nth-child(16n + 4) {
    -webkit-animation-delay: 0.75s;
    animation-delay: 0.75s;
}
.forward .holder:nth-child(16n + 5) {
    -webkit-animation-delay: 0.9375s;
    animation-delay: 0.9375s;
}
.forward .holder:nth-child(16n + 6) {
    -webkit-animation-delay: 1.125s;
    animation-delay: 1.125s;
}
.forward .holder:nth-child(16n + 7) {
    -webkit-animation-delay: 1.3125s;
    animation-delay: 1.3125s;
}
.forward .holder:nth-child(16n + 8) {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}
.forward .holder:nth-child(16n + 9) {
    -webkit-animation-delay: 1.6875s;
    animation-delay: 1.6875s;
}
.forward .holder:nth-child(16n + 10) {
    -webkit-animation-delay: 1.875s;
    animation-delay: 1.875s;
}
.forward .holder:nth-child(16n + 11) {
    -webkit-animation-delay: 2.0625s;
    animation-delay: 2.0625s;
}
.forward .holder:nth-child(16n + 12) {
    -webkit-animation-delay: 2.25s;
    animation-delay: 2.25s;
}
.forward .holder:nth-child(16n + 13) {
    -webkit-animation-delay: 2.4375s;
    animation-delay: 2.4375s;
}
.forward .holder:nth-child(16n + 14) {
    -webkit-animation-delay: 2.625s;
    animation-delay: 2.625s;
}
.forward .holder:nth-child(16n + 15) {
    -webkit-animation-delay: 2.8125s;
    animation-delay: 2.8125s;
}
.forward .holder:nth-child(16n + 16) {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}


@-webkit-keyframes line {

}

@keyframes line {

}


@-webkit-keyframes linea {
    0% {
        left: 0;
    }
    10%{
        left: 10%;
    }
    20%{
        left: 20%;
    }
    30%{
        left: 30%;
    }
    40%{
        left: 40%;
    }
    50%{
        left: 50%;
    }
    60%{
        left: 60%;
    }
    70%{
        left: 70%;
    }
    80%{
        left: 80%;
    }
    90%{
        left: 90%;
    }
    100%{
        left: 100%;
    }

}

@keyframes linea {
    0% {
        left: 0;
    }
    10%{
        left: 10%;
    }
    20%{
        left: 20%;
    }
    30%{
        left: 30%;
    }
    40%{
        left: 40%;
    }
    50%{
        left: 50%;
    }
    60%{
        left: 60%;
    }
    70%{
        left: 70%;
    }
    80%{
        left: 80%;
    }
    90%{
        left: 90%;
    }
    100%{
        left: 100%;
    }
}
@-webkit-keyframes pulse {
    40% {
        background: #000;
    }
}
@keyframes pulse {
    40% {
        background: #fff;
    }
}

.button{
    position: absolute;
    right: 0;
    height:  calc(100vw / 20);
    width: calc(100vw / 20);
    text-align: center;
    line-height:calc(100vw / 20);
    z-index: 10;
    cursor: pointer;
    font-size: 3rem;
}

.button svg{
    transform: scale(.5);
}

.button .img{
    padding: 10px;
    display: block;
}
.button img{
    width: 100%;
}



#audio.button{
    top:calc((100vw / 20)*5);
}
#reset.button{
    top:calc((100vw / 20)*6);
}
#audio.button.mute{
    opacity: .2;
}