body{
    background-color: #b6a8c9;
    background-image: linear-gradient(to bottom right, #18221e ,#1f2e36,#42534d,#1d2a2e);
    color: white;
    background-repeat: no-repeat;
    background-size: cover;
}

a { color:white} Globally

/* Each state */

a:visited { text-decoration: none; color:rgb(28, 147, 151); }
a:hover { text-decoration: none; color:rgb(100, 194, 237); }
a:focus { text-decoration: none; color:rgb(14, 68, 216); }
a:active { text-decoration: none; color:rgb(25, 161, 148) }

/* roboto-mono-100 - latin */
@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 100;
    src: url('./fonts/roboto-mono-v21-latin-100.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('./fonts/roboto-mono-v21-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./fonts/roboto-mono-v21-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
         url('./fonts/roboto-mono-v21-latin-100.woff') format('woff'), /* Modern Browsers */
         url('./fonts/roboto-mono-v21-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
         url('./fonts/roboto-mono-v21-latin-100.svg#RobotoMono') format('svg'); /* Legacy iOS */
  }
  /* roboto-mono-200 - latin */
  @font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 200;
    src: url('./fonts/roboto-mono-v21-latin-200.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('./fonts/roboto-mono-v21-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./fonts/roboto-mono-v21-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
         url('./fonts/roboto-mono-v21-latin-200.woff') format('woff'), /* Modern Browsers */
         url('./fonts/roboto-mono-v21-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
         url('./fonts/roboto-mono-v21-latin-200.svg#RobotoMono') format('svg'); /* Legacy iOS */
  }

  /* roboto-mono-300 - latin */
  @font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 300;
    src: url('./fonts/roboto-mono-v21-latin-300.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('./fonts/roboto-mono-v21-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./fonts/roboto-mono-v21-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
         url('./fonts/roboto-mono-v21-latin-300.woff') format('woff'), /* Modern Browsers */
         url('./fonts/roboto-mono-v21-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
         url('./fonts/roboto-mono-v21-latin-300.svg#RobotoMono') format('svg'); /* Legacy iOS */
  }
  /* roboto-mono-regular - latin */
  @font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/roboto-mono-v21-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('./fonts/roboto-mono-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('./fonts/roboto-mono-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('./fonts/roboto-mono-v21-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('./fonts/roboto-mono-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('./fonts/roboto-mono-v21-latin-regular.svg#RobotoMono') format('svg'); /* Legacy iOS */
  }


#header
{
    font-size: 25;
    font-weight: 300;
    margin-left: 30px;
}

#threeoptext
{
    font-weight: 100;
    font-size: 40;
}

.reldiv,.viddiv {
    margin: 7px;
    display: inline-block;
}

.rel-categories {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.bc_players
{
    border: 1;
    width: 340px;
    height: 340px;

}
.video_players_yt
{
    border: 0;
    width: 708px;
    height: 400px;
}
.video_players_bc
{
    border: 0;
    width: 454px;
    height: 350px;
}

.rel-list {
    display: flex;
    flex-direction: column;
}

.releaseListItem
{
    letter-spacing: 1px;
    font-weight: 100;
    font-style: normal;
    font-size: 18;
    margin-bottom: 15px;
    width: 40rem;
    word-wrap: break-word;
}

.collapsible
{
    cursor: pointer;
}

#otherLogo
{
    width:15em;  
}

#svgdiv
{
    width:20%;
    margin:auto;    
}
#topLogo
{
    position:relative;
    width:15em;             	
}

#description
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 22;
    font-family: "Roboto Mono", sans-serif, monospace;
    font-weight: 100;
    letter-spacing: 3px;
}

#codediv
{
    position:relative;
    color: gray;
    font-size: 11;
    font-family: "Roboto Mono", sans-serif, monospace;
    font-weight: 100;
    letter-spacing: 3px;
    max-width: 60rem;
}

#bige
{
    font-size:34;
}

#releases,#artists,#videos
{
    display:inline-block;
    position: relative; 
    font-size:26;
    font-family: "Roboto Mono", sans-serif, monospace;
    font-weight: 300;
    letter-spacing: 1px;
}

.floaty{
    float: left;
}

#artistlist
{
    font-size:20;
    font-style: normal;
    font-weight: 100;
    letter-spacing: 5px;
}

#oscimg
{
    position: fixed;
    width: 700px;
    height: 467px;
    bottom: 20em;
    right: 60em;
}

#modLogo
{
    position:relative;
    width:3em; 	
}

.copyright
{
    position:relative;
    font-family: "Roboto Mono", monospace;
    font-size:20;
    font-weight: 200;
    font-style: normal;
    letter-spacing: 0px;
}

.social-links
{
    position:relative;
    font-size:30;
    font-family: "Roboto Mono", monospace;
    font-weight: 100;
    font-style: normal;
    letter-spacing: 4px;
    word-spacing: 20px;
}

.fade-container {
  position: relative;
  width: 200px; 
  height: 150px; 
  overflow: hidden;
}

.fade-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 56%, rgba(0, 0, 0, 0) 60%);
}


/* ------------------------------------------- */
/* PIVOTED MONITOR MODE */
/* ------------------------------------------- */
@media (max-width:80em)
{ 
    #svgdiv
    {
        width:30%;
        margin:auto;    
    }
}
/* ------------------------------------------- */
/* MOBILE MODE */
/* ------------------------------------------- */

@media (max-width:40em)
{ 	
    #header
    {
        font-size: 45;
        font-family: "Roboto Mono", sans-serif, monospace;
        font-weight: 400;
    }
    .video_players_yt
    {
        border: 0;
        width: 302px;
        height: 170px;
    }

    .bc_players
    {
        border: 0;
        width: 300px;
        height: 402px;
    }

    .video_players_bc
    {
        border: 0;
        width: 300px;
        height: 231px;
    }
    #bige
    {
        font-size:25;
    }

    #otherLogo
    {
        position:relative;
        width:7em;             	
    }

    #svgdiv
    {
        width:70%;
        margin:auto;    
    }

    #description
    {
        position:relative;
        color: white;
        font-size: 17;
        font-family: "Roboto Mono", sans-serif, monospace;
        font-weight: 300;
        letter-spacing: 3px;
    }

    #releases,#artists,#videos
    {
        color: white;
        font-size:22;
        font-family: "Roboto Mono", sans-serif, monospace;
        font-weight: 300;
        letter-spacing: 2px;
        word-wrap: normal;
    } 
               
    #artistlist
    {
        font-size:20;
        font-style: normal;
        font-weight: 100;
        letter-spacing: 4px;
    }

    #modLogo
    {
        position:relative;
        width:2em; 	
    }

    #copyright
    {
        position:relative;
        font-size:18;
        font-family: "Roboto Mono", sans-serif, monospace;
        font-weight: 200;
        font-style: normal;                
    }
    .releaseListItem
    {
        width: 15rem;
    }

    .rel-categories{
        margin-left: 1rem;
    }
    .social-links {
        margin-top: 1rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
}