/*Font Imports*/
@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Cousine:ital,wght@0,400;0,700;1,400;1,700&family=Cutive+Mono&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Fira+Code:wght@300;400;500;600;700&family=Fira+Mono:wght@400;500;700&family=Inconsolata:wght@200;300;400;500;600;700;800;900&family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Major+Mono+Display&family=Nanum+Gothic+Coding:wght@400;700&family=Oxygen+Mono&family=PT+Mono&family=Red+Hat+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Share+Tech+Mono&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Syne+Mono&family=VT323&display=swap');

/*Fonts
font-family: 'Anonymous Pro', monospace;
font-family: 'Courier Prime', monospace;
font-family: 'Cousine', monospace;
font-family: 'Cutive Mono', monospace;
font-family: 'DM Mono', monospace;
font-family: 'Inconsolata', monospace;
font-family: 'Major Mono Display', monospace;
font-family: 'Nanum Gothic Coding', monospace;
font-family: 'Roboto Mono', monospace;
font-family: 'Space Mono', monospace;
font-family: 'Syne Mono', monospace;
font-family: 'VT323', monospace;
*/

*{box-sizing: border-box;margin:0;padding:0;}

@media screen {   
  /* Generic pane rules */
  *{box-sizing: border-box;margin:0;}
  .row, .col { overflow: hidden; position: absolute; }
  .row { left: 0; right: 0; }
  .col { top: 0; bottom: 0; }
  .scroll-x { overflow-x: auto; }
  .scroll-y { overflow-y: auto; }

  .header.row { height: 75px; top: 0; }
  .body.row { top: 75px; bottom: 50px; }
  .footer.row { height: 50px; bottom: 0; }
  
  /* end of screen rules. */ 
}

/*Tab Background Colors */
#Home {background-color: #059AD2;}
#Music {background-color: #0C0926;}
#Videos {background-color: #673B9C;}
#Projects {background-color: #04134F;}

/* Style tab links */
.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: .8rem 1rem;
  font-size: 1rem;
  width: 25%;
}

.tablink:hover {
  background-color: #777;
}

/* Style the tab content */
.tabcontent {
  color: white;
  display: none;
  padding: 3em 1em;
  height: fill;
  text-align: center;
}

/*this gets overwritten but lets have it anyway*/
body, html {
  margin: 0;
  font-family: 'Anonymous Pro', monospace;
  background-color: black;
  color:#D8E5F1;
}

/* IMG styles */
img{
    max-width: 100%;
    max-height: 100%;
    border-radius: 1rem;
    border: 1px solid black;
}

.imgbox {
  display: grid;
  height: 100%;
}
.center-fit {
  max-width: 100%;
  max-height: 80vh;
  margin: auto;
}

/*iframe*/
iframe{
  padding:0.1rem;
  border-radius: 1rem;
}

/*Typography*/
h1,h2,h3{padding:0.2rem;font-family: 'Inconsolata', monospace;}
h1{font-size:2.5rem;margin:.2em;}
h2{font-size:2rem;margin:.2em;}
h3{font-size:1.5rem;margin:.2em;}
p{font-size: 1rem;line-height: 1.25;}
a{
  color:#F840F5;
}
a:hover{
  color:#FDC4FC;
}
.accentText{
  color:#103F85;
  font-size: 3rem;
}

nav li{display:inline-block;}

nav ul{line-height: 1.6;text-align: center;}

/* Home Page Styles */
.homePanel{
  background-color:#C8A590;
  width:100%;
  padding: 1rem;
  margin: 0;
  border-radius: 2rem;
  border: 2px solid black;
}

.homePanel ul{
  list-style: none;
  margin:0;
  padding:0;
}

.homeCard{
  margin: 1rem auto;
  padding: 1rem;
  max-width: fit-content;
  background-color: #103F85;
  border-radius: 1rem;
  border: 2px solid black;
}

.twitch-embed{
  height:27rem;
  width:48rem;
  max-width: 98%;
}
/* Music Page Styles */
.musicCard{
  padding: .5em;
  margin: 1em auto;
  border: none;  
  background-color: #0C0926;
  width:48rem;
  max-width: 100%;
  border-radius: 1rem;
  color:#059AD2;
  border: 2px solid #F63EF2;
  display:flex;
  justify-content: space-around; 
  align-content: space-around;
}

.musicCardHead{
  width:50%;
}

.musicCard h3{
  border-bottom: 2px solid #F63EF2;
  width:fit-content;
}

.musicCard ol{max-width:90%;margin-left:2rem;}
.musicCard ol li{cursor: pointer;}
.musicCard ol li:hover{color:#F3F}
.musicCard ol li:active{color:#FaF}
.albumDescription{max-width:420px;}
.trackDescription{
  display:none;
  max-width:400px;
}

.left{text-align: left;}
.left p{text-align: right;}
.left ol{text-align: right;}

.right{text-align: right;}
.right p{text-align: left;}
.right ol{text-align: right;}

.musicPanel{
  background-color:#673B9C;
  width:100%;
  max-width: 100%;
  padding: .5em;
  margin: auto;
  border-radius: 2rem;
  color:white;
  border: 2px solid black;
}

.musicPanel ol li{
  color:#FEFAEB;
  font-weight: bold;
  line-height: 1.4;
}

.musicPanel ul li{
  color:#73BF7F;
  font-weight: normal;
}

.bandcamp-embed{
  width:20rem;
  max-width: 100%;
  height: 380px;
  padding:0.1rem;
  border-radius: 1rem;   
}



/*Video Page Styles */

.videoCard{
  padding:1rem;
  margin:1rem auto;
  border-radius: 1rem;
  background-color:#FFC0FF;
  width:fit-content;
  max-width: 100%;
  border: 2px solid black;
  color:black;  
}

.videoPanel{
  background-color:#586BC7;
  width:100%;
  padding: .5em;
  margin: auto;
  border-radius: 2rem;
  border: 2px solid black;
}

.youtube-embed{
  min-width: 240px;
  width:48rem;
  max-width: 98%;
  height:26rem;
}

/*Project Page Styles */
.projectPanel{
  background-color:#3A2B3B;
  width:auto;
  padding: .5em;
  margin: auto;
  justify-content: center;
  align-items: center;
  align-content: center;
  border-radius: 2rem;
  border: 2px solid black;
}

.projectCard{
  background-color:#0C0926;
  width:fit-content;
  max-width:100%;
  margin:1rem auto;
  padding:1rem;
  border-radius: 1rem;
}

.projectCard p {
  max-width:20rem;
  text-align: center;
  margin: 0 auto;
}

.project-embed{
  min-height: 400px;
  width:40rem;
  max-width:100%;
}

/*Media Queries*/
@media screen and (max-width:720px) {
  .musicCard{
    display:block;
  }

  h1{
    font-size: 1.5rem;
  }

  .musicCardHead{
    width:100%;
  }

  .projectCard{    
  max-width: fit-content;
  }

  .twitch-embed{
    height:15rem;
    width:20rem;
    max-width:100%;
  }

  .youtube-embed{
    max-height: 25rem;
    max-width:100%;
  }

  /* Generic pane rules */
  .row, .col { overflow: hidden; position: absolute; }
  .row { left: 0; right: 0; }
  .col { top: 0; bottom: 0; }
  .scroll-x { overflow-x: auto; }
  .scroll-y { overflow-y: auto; }
  .header.row { height: 75px; top: 0; }
  .body.row { top: 75px; bottom: 50px; }
  .footer.row { height: 50px; bottom: 0; }  
  /* end of screen rules. */ 

}
/*QUERY END*/