@import url(/fonts/nexa/stylesheet.css);
@import url(/fonts/questrial/stylesheet.css);

.distrho-info{{{cns}}} {
    background-image:url(/resources/box.png{{{ns}}});
    background-position:center center;
    background-repeat:no-repeat;
    background-size:600px 300px;
    width:600px;
    height:300px;
/*     position:absolute; */
    border-radius: 21px;
/*     font-size: 2rem !important; */
}

.distrho-info{{{cns}}} .mod-pedal-input.mono,
.distrho-info{{{cns}}} .mod-pedal-output.mono {
    top: 60px !important;
}

.distrho-info{{{cns}}} .mod-pedal-input.stereo,
.distrho-info{{{cns}}} .mod-pedal-output.stereo {
    top: 15px !important;
}

.distrho-info{{{cns}}} .mod-logo {
    background: url(/img/watermark.png) 42px 146px no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

@keyframes mod-magic{{{cns}}} {
    0% {
        opacity: 0.1;
    }
    100% {
        opacity: 0.75;
    }
}

.distrho-info{{{cns}}} .mod-magic {
    background: url(/img/social/favicon.png) no-repeat;
    width: 118px;
    height: 118px;
    position: absolute;
    top: 158px;
    left: 52px;
    background-size: cover;
    opacity: 0;
    cursor: pointer;
    z-index: 21;
    animation: mod-magic{{{cns}}} 5s infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in;
}

.distrho-info{{{cns}}} .tables {
    display: flex;
    flex-direction: row;
    height: 100%;
    padding: 21px;
    font-family: monospace;
    font-size: 1.8rem;
    font-weight: bold;
}

.distrho-info{{{cns}}} .table-left,
.distrho-info{{{cns}}} .table-right {
    width: 50%;
}
.distrho-info{{{cns}}} .table-left {
    padding-left: 36px;
}

.distrho-info{{{cns}}} table {
    border-collapse: separate;
    border-spacing: 6px 1px;
}

.distrho-info{{{cns}}} tr > td:first-child {
    text-align: right;
}
.distrho-info{{{cns}}} tr > td:last-child {
    font-weight: lighter;
}