body {
    background-image: url('/Stream/images/AS_CarbonFiber8c.jpg');
    background-repeat: repeat;
    background-color: #777787;
}
#player-container{
    list-style: none;
}
#player-container li a{
    color:black;
    text-decoration: none;
    color:#000000;
}
#player-container .current-song a{
    color:#aaaaaa;
}
#player-container .current-song span{
    color:#aaaaaa;
}
ul, ol {
        position: auto; /* for Top to work */
        padding: 20px; /* left side  */
        margin: 10px; /* between containers */
        /* top: 10px;  */
        /* border: 3px solid #73AD21; */ 
        list-style-type: none; /* Removes bullets/numbers */
}
a {
  text-decoration: none; /* Removes the standard underline */
  border-bottom: 1px dotted blue; /* Adds a custom dotted blue line */

    vertical-align: baseline;
    color:#000000;
}

a:hover {
  /* Changes the line to solid red on hover */
  border-bottom: 1px solid blue;
  font-weight: bold;
}

span[onclick]{
    cursor:pointer;
}

span[onclick]:hover {
  /* Changes the line to solid red on hover */
  border-bottom: 1px solid blue;
  font-weight: bold;
}

.ASLOGO {
    color:#aaaaaa;
    font-size: 50px;
}    
.images {
    /* object-fit: cover; */
    object-fit: contain; 
    /* object-fit: fill; skews */
    width: 100%;
}
        
.mySlides {display:none;}
        
        
@media screen and (orientation: portrait) {
    table {
        width: 100%;
    }
    html {
        font-size: 50px;
    }
    audio {
        width: 100%;
        /*transform: scale(2); /* Scales the whole player up */
    }
    audio::-webkit-media-controls-play-button {
        transform: scale(2, 2); /* Makes the button twice as big */
    }
    .player-container {
        background: #555555;
        min-width: 500px;
        /* min_width: 95%; */
        min-height: 250px;
        margin: 10px;
        white-space: nowrap;
        text-align: justify;
    }
    .multiplaylist {
        background: #444444;
        min-width: 500px;
        min-height: 250px;
        margin: 10px;
    }
    .images {
        object-fit: cover;
        width: 100%;
        max-width: 100%;
        height:auto;
        min-height: 600px;
        /* position: relative; */   
        /*position: cover;    */
        /* float: left; */
        align-items: left;
        left: 10px;
        top: 10px;
        background: #000000;

                /* min-width: 95%; */
                /* min-height: 400px; */
                /*min-width: 1400px; */
                /*min-width: 700px; */
                /*min-height: 1100px; */
                /*max-width: 98%; */
                /*max-width: 1400px; */
                /*max-width: 700px; */
                /*max-height: 100%; */
        margin: 10px;
    }
   .images img {
        object-fit: contain;
        width: 100%;
        height: 100%;
    }

    .artists {
        margin: 10px; /* between containers */
        background: #353535;
        min-width: 500px;
        min-height: 250px;
        
    }
    .advertising {
        color:#aaaaaa;
        margin: 10px; /* between containers */
        background: #000000;
        min-width: 500px;
        min-height: 250px;
        text-align: center; /* Centers text horizontally */
        display: flex;
        justify-content: center; /* Centers horizontally */
        align-items: center;     /* Centers vertically */
    }
}
            
@media screen and (orientation: landscape) {    
    table {
        width: 350px;
    }
    html {
        font-size: 20px; 
    }
    audio {
        /* width: 350px; */
        width: 22%;
        }
    .player-container {
        margin: 10px; /* between containers */
        background: #555555;
        /* width: 350px; */
        width: 22%;
        min-height: 250px;
        white-space: nowrap
        text-align: justify;
        white-space: nowrap;
        text-align: justify;
    }
    .multiplaylist {
        margin: 10px; /* between containers */
        background: #444444;
        /* width: 350px;  */
        width: 22%;
        min-height: 250px;
    }
    .artists {
        margin: 10px; /* between containers */
        background: #353535;
        /* width: 350px;  */
        width: 22%;
        min-height: 250px;
    }
    .advertising {
        color:#aaaaaa;
        margin: 10px; /* between containers */
        background: #000000;
        /* width: 350px;  */
        width: 22%;
        min-height: 250px;
        text-align: center; /* Centers text horizontally */
        display: flex;
        justify-content: center; /* Centers horizontally */
        align-items: center;     /* Centers vertically */
    }
            
    .images {
        position: fixed; /* absolute; relative;  */ 
        width: 73%; 
        /* left: 370px; */
        left: 24%;
        top: 25px;
        background: #000000;

        margin: 10px; /* between containers */
    }
    .images img {
        object-fit: contain;
        width: 100%;
        height: 100%;
    }
}