* {
  box-sizing:border-box;
}

/* h1{ */
/*   font-size: 4em; */
/*   line-height: 70%; */
/*  } */

/* ============================================ */
/* define my colors */
/* ============================================ */
:root {
    /* --bg0: rgb(221,217,195); */
    --bg0: rgb(230,220,220);
    --bg1: rgb(247, 241, 234);
    --bg11: rgb(245, 245, 245);
    --bg2: rgb(83, 96, 65);
    --txt0: rgb(0,0,0);
    --txt1: rgb(23,55,94);
    --txt2: rgb(200, 0, 0);
    /* --blocks: rgba(255, 255, 255, .5); */
    --blocks: rgba(120, 50, 40, .2);
    --playing: rgba(200, 100, 80, 1)

}

/* ============================================ */
/* define headers */
/* ============================================ */

h2{
  color:var(--txt1);
  font-size:25px;
  margin-top: 12.5px;
  margin-bottom: 12.5px;
 }
h3{
  color: var(--txt2);
  font-size:22px;
  height:20%;
  margin-top: 11px;
  margin-bottom: 11px;
 }
h5{
  color: var(--txt1);
  font-size:16px;
  margin-top: 8px;
  margin-bottom: 8px;
 }
a{color : var(--txt1)}

body {
width: 800px;
/* height:auto; */
margin:auto;
/* min-height: 800px; */
font-family: 'Arial', sans-serif;
/* font-size: 14px; */
background-color: var(--bg2);
/* text-align:left; */
/* overflow-y:scroll; */
 }

#header_container {
    float:left;
    left:0px;
    height: auto;
    width: 100%;
    background-color: green/* var(--bg0); */
}

#header_container img {
  display: block;
}
#header_left {
    float:left;
    padding-top:15px;
    padding-left:10px;
    padding-right:10px;
    height:auto;
    width:25%;
    background-color:var(--bg0); 
}


#header_text_block {
    float:left;
    /* height: 140px; */
    height: 100%;
    /* margin-top:50px; */
    /* border-top:10px solid; */
    /* border-bottom:10px solid; */
    /* border-left:10px solid; */
    /* border-right:20px solid; */
    width: 75%;
    background-color:var(--bg0);
    /* border-style: solid; */
    /* border-color: blue; */
    font-size:4em;
}

#header_text {
    color:rgb(23,55,94);
    text-align:left;
    display:block;
    font-style:italic;
}

/*======================================all under header========*/
#columns_and_footer_container {
    float: left;
    /* min-height: 600px; */
    height: auto; 
    width: 100%;
    background-color:var(--bg1);
}

#columns_container {
    float: left;
    /* min-height: 600px; */
    height: auto; 
    width: 100%;
    /* background-color:var(--bg0); */
}

/*=======================================left (menu)=======*/
nav ul {
    list-style-type: none; /* Remove bullets */
    padding: 0;           /* Remove default padding */
    margin: 0;            /* Remove default margin */
}
#column1_container {
    float:left;
    height: auto;
    width: 25%;
    /* width:100%; */
    /* background-color:var(--bg0); */
    opacity:1;
}

#menu_text_container {
    float:left;
    left:0px;
    height: auto;
    width: 185px;
    margin: 10px 5px 10px 10px;
    /* border-top:0px solid; */
    /* border-bottom:0px solid; */
    /* border-left:5px solid; */
    /* border-right:5px solid; */
    /* border-color:var(--bg11); */
    /* margin-left :20px; */
    /* margin-right :10px; */
    padding:10px;
    background-color: var(--blocks);
    color:black;
}

#menu_text_container a {
    text-decoration: none; 
    cursor: pointer;
    color:black;
    opacity:1;
}

#menu_text_container a:hover,a:active {
    color: rgba(200, 0, 0, 1); 
    cursor: pointer;
    background-color:#999999
}

#contact_text_container {
    float:left;
    left:0px;
    height: auto;
    width: 185px;
    margin: 10px 5px 10px 10px;
    /* border-top:5px solid; */
    /* border-bottom:5px solid; */
    /* border-left:5px solid; */
    /* border-right :5px solid; */
    /* border-color:var(--bg11); */
    padding:10px;
    background-color: var(--blocks);
    text-color:var(--txt1);
    opacity:1;
    line-height:100%;
}
.contact {
    color: black; /* Change link color to black */
}
/*=======================================main=======*/

#column2_container {
    float: left;
    height:auto;
    /* min-height:600px; */
    width:75%;
    /* border-left:5px solid; */
    /* border-right:10px solid; */
    /* border-color:var(--bg11); */
    opacity:.92;
}


#main_text_container {
    float: left;
    height: auto;
    width: 585px;
    margin: 10px 10px 10px 5px;
    /* border-top: 10px solid; */
    /* border-color:var(--bg11); */
    /* border-bottom: 10px solid; */
    /* border-left: 10px solid; */
    /* border-right: 20px solid; */
    padding:10px;
    background-color: var(--blocks);
}

#pic_container {
    float: left;
    height: auto;
    min-height: 100px;
    width: 585px;
    margin: 10px 10px 10px 5px;
    /* border-top: 10px solid; */
    /* border-color:var(--bg11); */
    /* border-bottom: 10px solid; */
    /* border-left: 10px solid; */
    /* border-right: 20px solid; */
    padding:10px;
    background-color: var(--blocks);
    text-align: center;
    font-size:70%;
    opacity:1;
}
#main_pic {
    width: 60%;
    height: auto;
}
p.pic{
    opacity: 1;
}

/*=======================================footer=======*/
#footer_container {
    float:left;
    clear:both;
    left:0px;
    height: 160px;
    width: 100%;
    background-color: var(--blocks);
    padding:10px;
    opacity:0.5;
}

/*=======================================responsiveness=======*/
@media only screen and (max-width:800px) {
  /* For mobile phones: */
  body {
      width:100%;
      max-width:800px;
  }
  #columns_and_footer_container {
      width:100%;
  }
  #columns_container {
      width:100%;
  }
  #column1_container {
      width:100%;
  }
  #menu_text_container{
      width:48%;
      margin:1%;
  }
  #contact_text_container{
      width:48%;
      /* border-left:5px solid; */
      /* border-right:10px solid; */
      /* border-color:var(--bg11); */
      margin:1%;
  }
  #column2_container{
      width:100%;
      /* border-left:10px solid; */
      /* border-color:var(--bg11); */
  }
  #main_text_container{
      width:98%;
      margin:1%;
      margin-bottom: 5px;
  }
  #pic_container{
      width:98%;
      margin:1%;
      margin-bottom: 5px;	    
  }
  #header_text_block {
      font-size:1vw;
      
  }
}

/*======================================= Player ======*/
/* styles.css */
.playlist ul {
    list-style-type: none;
    padding: 0;
}

.playlist ul li {
    margin-bottom: 0px;
}

.playlist ul li a {
    text-decoration: none;
    color: var(--bg2);/* var(--txt1); */
}

.playlist ul li a:hover {
    color: var(--txt1);
    /* background-color: var(--txt0); */
    background-color:#999999
}

/* styles.css */
.current-song {
    background-color:var(--playing); /* Change this to your desired highlight color */
    font-weight: bold;
    font-style: italic;
}

.skipbutton {
    border: none;
    color: black; var(--txt0);
    padding: 0px 0px;
    text-align: center;
    text-decoration: none;
    /* display: inline-block; */
    font-size: 2px;
    margin: 0px 0px;
    cursor: pointer;}