html, body {
    margin:0;
    padding:0;
    height:100vh;
}

body {
    color: #eeeeee;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;

    background: linear-gradient(#121212, black);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: black;
}

img {
    object-fit: contain;
}

/***** COMMON *****/

.aspect-wrapper {
    position: relative;
    width: 100%;
}

.ratio-16-by-9 {
    padding-bottom: 56.25%;
}

.ratio-1-by-1 {
    padding-bottom: 100%;
}

.ratio-4-by-3 {
    padding-bottom: 75%;
}

.match-parent-abs {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;  bottom: 0;  left: 0;  right: 0;
}

.match-parent {
    height: 100%;
    width: 100%;
}

.enable-vert-align:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0;
}

.ellipsize {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/***** APP *****/

.app {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: none; /* change to block to make visible */
}

/***** MESSAGE *****/

.message {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    display: none; /* change to flex to make visible */
    justify-content: center;
    align-items: center;
    font-size: 5vh;
}


/***** PROGRESS *****/

.loading {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: none; /* change to flex to make visible */
    justify-content: center;
    align-items: center;
}

.loader {
    border: 0.5vh solid transparent;
    border-radius: 50%;
    border-top: 0.5vh solid #ff0052;
    border-bottom: 0.5vh solid #ff0052;
    background-color: transparent;
    width: 6vh;
    height: 6vh;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/***** CODE ENTRY *****/

.code-entry {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: none; /* change to flex to make visible */
    justify-content: center;
    align-items: center;
}

.form-group { 
    position:relative; 
    width: 40vw;
}

.code-input {
    font-size: 7vw;
    letter-spacing: 4vw;
    text-align: center;
    display: block;
    width: 100%;
    border: none;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    outline: none;
    border-bottom: 1px solid #eeeeee;
    box-sizing: border-box;
    background-color: transparent;
    color: #eeeeee;
}

.code-input:focus {
    outline:none;
}

.code-input-hint {
    color:#eeeeee; 
    font-size:5vw;
    position:absolute;
    pointer-events:none;
    letter-spacing: 0.7vw;
    width: 100%;
    text-align: center;
    top: 1vw;
    text-transform: uppercase;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}

.code-input:focus ~ .code-input-hint, .code-input:valid ~ .code-input-hint {
    top:-3.5vw;
    font-size:2.5vw;
    letter-spacing: 2vw;
}

.code-input-error {
    width: 100%;
    position:absolute;
    top: 9vw;
    text-align: center;
    font-size: 3vw;
    font-weight: 700;
    letter-spacing: 0.2vw;
    color: #ff6156;
    display: none;
}

.code-input-bar {
    position: relative;
    display: block;
    width: 100%;
}

.code-input-bar:before, .code-input-bar:after {
    content: '';
    height: 2px; 
    width: 0;
    bottom: 0; 
    position: absolute;
    background: #ff0052; 
    transition: 0.2s ease all; 
    -moz-transition: 0.2s ease all; 
    -webkit-transition: 0.2s ease all;
}

.code-input-bar:before {
    left: 50%;
}

.code-input-bar:after {
    right: 50%; 
}

/* active state */
.code-input:focus ~ .code-input-bar:before, .code-input:focus ~ .code-input-bar:after {
    width: 50%;
}


/***** HEADER *****/

.header {
    margin: 0% 1%;
    padding-top: 1.5vh;
    width: 98%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.header img {
    margin: 0% 1%;
    max-height: 50%;
    max-width: 30%;
}

.title-text {
    font-size: 4vh;
    font-weight: 700;
    white-space: nowrap;
    margin: 0 2%;
}

.code {
    position: relative;
}

.code-hint {
    position: absolute;
    width: 100%;
    left: 0;
    top: -0.6em;
}

.code-hint-text {
    width: 100%;
    height: 100%;
    display: flex;
    font-size: 2vh;
    justify-content: space-around;
}

.code-hint-line {
    width: 100%;
    height: 1px;
    background-color: #ddd;
}

.code-value {
    letter-spacing: 0.5vw;
}

/***** FOOTER *****/

.footer {
    margin: 0% 1%;
    width: 98%;
    height: 7%;
    display: flex;
    align-items: center;
}

.footer-box {
    margin: 0;
    padding: 0;
    width: 33%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-box a {
    height: 100%;
}

.footer-box a img {
    padding: 0;
    height: 100%;
    width: 100%;
}

.footer-box a.textlink {
    color: #ff0052;
    font-weight: 700;
    text-decoration: none;
    font-size: 2.5vh;
    text-align: center;
    height: auto;
}

.footer-box a:hover {
    color: #eeeeee;
}

/***** CONTENT *****/

.content {
    //background-color: darkgray;
    height: 83%;
    margin: 0% 1%;
    display: flex;
}

.content-column {
    height: 100%;
    border-bottom: 1px solid #eeeeee;
    border-top: 1px solid #eeeeee;
    box-sizing: border-box;
}

/***** INFO AREA *****/

.info-area {
    //background-color: darkred;
    width: 48%;
    margin: 0% 1%;
    display: flex;
    flex-direction: column;
}

.info-header {
    //background-color: aqua;
    width: 100%;
    height: 10%;
    border-bottom: 1px solid #666666;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.info-text {
    font-size: 3vh;
    font-weight: 700;
    margin-left: 3%;
}

.live-indicator {
    height: 3vh;
    width: auto;
    border-radius: 50%;
    background-color: #EF5350;
}

.live-indicator img {
  height: 100%;
  width: auto;
}

.now-playing {
    //background-color: azure;
    width: 100%;
    height: 90%;
    display: flex;
    flex-direction: column;
}

.now-playing-cover {
    //background-color: antiquewhite;
    width: 100%;
    height: 66%;
    padding-top: 1%;
    padding-bottom: 1%;
    box-sizing: border-box;
}

.now-playing-song {
    //background-color: #fab;
    width: 100%;
    height: 34%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.song-info {
    display: flex;
    margin: 3%;
    align-items: center;
    justify-content: space-between;
}

.song-titles {
    overflow: hidden;
    margin-right: 3%
}

.song-name {
    height:auto;
    font-size:4.5vh;
    margin-bottom: 0.5em;
}

.song-artist {
    font-size:2.5vh;
    font-weight:700;
    color:#ff0052;
    text-transform:uppercase;
}

.song-time {
    white-space: nowrap;
    width:auto;
    font-size:4.5vh;
    text-align:right;
}

.progress {
    background-color: white;
    height: 5%;
    margin: 3%;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background-color: #ff0052;
}

.event-stopped-cover {
    display: none; /* change to block to make visible */
    color:#ff0052;
    background-image: radial-gradient(#000000ee 10%, #000000aa 90%, transparent);
    font-size:5vw;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}

/***** SONG QUEUE *****/

.song-queue {
    //background-color: darkorange;
    width: 48%;
    margin: 0% 1%;
    display: inline-block;
}

.song-queue-item {
    width: 100%;
    height: 20%;
    display: flex;
    flex-direction: row;
    padding: 0.5vh 0;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    border-image: linear-gradient(to right, black, black, #777777, #777777, #777777, #777777) 100% 1;
    border-top-width: 0px;
}

.song-queue-item-cover {
    flex-shrink: 0;
    height: 100%;
}

.song-queue-item-cover img {
    object-fit: cover;
    width: auto;
}

.song-queue-item-song {
    display: flex;
    flex-grow: 1;
    height: 100%;
    padding-left: 3%;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    min-width: 0;
}

.queued-song-titles {
    overflow: hidden;
    margin-right: 3%;
}

.queued-song-name {
    height:auto;
    font-size:4vh;
    margin-bottom: 0.5em;
}

.queued-song-artist {
    font-size:2.2vh;
    font-weight:700;
    color:#ff0052;
    text-transform:uppercase;
}

.queued-song-points {
    white-space: nowrap;
    width:auto;
    font-size:5vh;
    font-weight: bold;
    color: #ff0052;
    text-align: right;
}

.qs-last {
    border-bottom: 0 solid #eeeeee;
}

/* mobile */

/* portrait mode -> height > width */
@media screen and (max-aspect-ratio: 1/1) {

    .content {
        flex-direction: column;
    }

    .info-area {
        height: 25%;
        width: 98%;
        display: block;
    }

    .info-header {
        height: 20%;
    }

    .song-queue {
        height: 75%;
        width: 98%;
        display: block;
        border-top: 0px solid #eee;
    }

    .now-playing {
        height: 80%;
        flex-direction: row;
    }

    .now-playing-cover {
        width: 30%;
        height: 100%;
    }

    .now-playing-song {
        width: 70%;
        height: 100%;
    }


    .song-name {
        font-size:3vh;
    }

    .song-artist {
        font-size:1.5vh;
    }

    .song-time {
        font-size:3vh;
    }

    .info-text {
        font-size: 2vh;
        font-weight: 700;
        margin-left: 3%;
    }

    .live-indicator {
        height: 2vh;
    }

    .queued-song-name {
        font-size:3.2vh;
        margin-bottom: 0.5em;
    }

    .queued-song-artist {
        font-size:1.7vh;
    }

    .queued-song-points {
        font-size:4vh;
    }

}

@media screen and (max-width: 480px) {

    .footer-box a.textlink {
        font-size: 1.5vh;
    }

}

/* narrow portrait mode -> height > 2 * width */
@media screen and (max-aspect-ratio: 1/2) {

    .footer-box a.textlink {
        font-size: 1.5vh;
    }

    .title-text {
        font-size: 2.5vh;
    }

    .code-hint-text {
        font-size: 1.25vh;
    }

}
