body{    
    font-family: 'Source Code Pro', monospace;
        /* background-image: url(/background2.png); */
        background-color: #f649e3 ;
        background-size:cover;
        background-repeat:no-repeat;
        background-attachment:scroll;
    
    
    }
    
.nav,.navbar-brand,.navbar, .navbar-default, .navbar-collapse, .collapse, .navbar-header {
     font-family: 'Source Code Pro', monospace;
    background-color:white;
}    


.navbar-brand {
    max-width: 400px;
}

ul {background-color:white;}
li {
    background-color:white; 
    padding-left:10px;
    padding-right:10px; 
    
}




.sm_icon {
    padding-left:0px;
    padding-right:0px;
    
}

  .heading {
    color:#cce0ed;
    font-family: 'IBM Plex Mono', monospace;
    text-decoration: underline;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:17px;
    line-height:150%;
    animation-name:fadein_headings;
    animation-duration:3s;
    animation-fill-mode: forwards;
}


.subheading {
    color:#cce0ed;
    font-family: 'IBM Plex Mono', monospace;
    font-size:14px;
    animation-name:fadein_headings;
    animation-duration:3s;
    animation-fill-mode: forwards;
}

.subheading-2 {
    color:#cce0ed;
    font-family: 'IBM Plex Mono', monospace;
    font-size:12px;
    animation-name:fadein_headings;
    animation-duration:3s;
    animation-fill-mode: forwards;
}

mark {
    background-color:#cce0ed;
    color:white;
}



@keyframes fadein_headings {
    0% {color:rgba(255,255,255,0);}
    100% {color:rgba(204,224,237, 1);}
}



#logo {
    font-size: 35px;
    
}

.social {
    width:15px;
    height:15px;
   object-fit: contain;
}

.nav_text{
    object-fit:contain;
    margin: auto;
}

p {
    overflow:scroll;
    color:white;
    font-size:15px;
    font-family: 'IBM Plex Mono', monospace;
    background-color: rgba(0,0,1,.25);
    padding: 5px;
}


.center-text{
    text-align:center;
    margin-right:5%;
}

/* #spotify-embed-text {
    margin-top:-150px;
} */

@media only screen and (min-width: 768px){
     [class="center-text"] {
    text-align:left;
    margin-left:5%;
  }
  
  [class="subheading-2"] {
    font-size:14px;
}
  }
  
  @media only screen and (max-width:767px){
      
        [id="spotify-embed-text"] {
      margin-top:-150px;
  }
  }

h1 {
    color:#cce0ed;
    font-family: 'IBM Plex Mono', monospace;
}

.heading {
    color:#cce0ed;
    font-family: 'IBM Plex Mono', monospace;
    text-decoration: underline;
    font-weight:bold;
}
    


a:link {
  color: white;
}

/* visited link */
a:visited {
  color: white;
}

/* mouse over link */
a:hover {
  color: red;
}

/* selected link */
a:active {
  color: black;
}

hr{
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 5%;
  margin-right: 5%;
  border-style: inset;
  border-width: 1px;
}

.tel{
    color:black;
}

.textbox {
    color:rgba(255,255,255,1);
    background-color: rgba(0,0,0,.75);
    animation-name:fadein_txt;
    animation-duration:3s;
    animation-fill-mode: forwards;
    
}

.album_art {
    position:absolute;
    width:100%;
    height:100%;
    z-index:1;
    animation-name:fadein;
    animation-duration:5s;
    animation-fill-mode:forwards;
    animation-delay:2s;
    
    
}

.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 5;
}




@keyframes fadein_txt {
    0% {color:rgba(255,255,255,0); background-color: rgba(0,0,0,0);}
    100% {color:rgba(255,255,255,1); background-color: rgba(0,0,0,.75);}
}

@keyframes fadein {
    0% {background-color: rgba(0,0,0,1); z-index:1;}
    99% {background-color: rgba(255,255,255,.25); z-index:1;}
    100% {background-color: rgba(255,255,255,.25); z-index:0;}
}

@keyframes fadein_headings {
    0% {color:rgba(255,255,255,0);}
    100% {color:rgba(204,224,237, 1);}
}