/*CSS RESET*/


html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
 








/*NOTE: figure out how to rework scrollbar position -- only visible on chrome*/




html
{
  cursor: url('icons/peachCURSOR32.png'), auto;
  min-height: 100%;
}
     
     
/* Scrollbar */
::-webkit-scrollbar {
   width: 6px;
   max-height: 8px;
   background: transparent;
}
::-webkit-scrollbar-button {
   width: 4px;
   height: 4px;
   background: transparent;
}
::-webkit-scrollbar-thumb {
   background-color: #ffa3a3;
   -webkit-border-radius: 0;
   border: 1px solid #f9859c;
}
::-webkit-scrollbar-thumb:hover {
   background:#ffa3a3;
}
::-webkit-scrollbar-thumb:active {
   background:#ffa3a3;
}
::-webkit-scrollbar-track {
   background:0 0;
   border:none;
   border-radius:0;
}
::-webkit-scrollbar-track:hover {
   background:0 0;
}
::-webkit-scrollbar-track:active {
   background:0 0;
}
::-webkit-scrollbar-corner {
   background:0 0;
}     

     

/* Bold Color */
b
{
  color: rgb(164, 132, 114);
}

/* Headings */
h1
{
  color: #f9859c;
  letter-spacing: 2px;
  font-size: 1.5em;
}

/* Links */
a:link
{
  color:#dc677e;
  /*text-decoration:none;*/
}
a:visited
{
  color:#dc677e;
  /*text-decoration:none;*/
}
a:hover
{
  color:#ffadbe;
  text-decoration:none;
  cursor: url('icons/peachCURSORhover.png'), auto;
}
a:active
{
  color:#dc677e;
}
  



/*some kind of drop shadow / outline effect???*/
.strokeme
{
  color: white;
  text-shadow: -3px -3px 0 #f9859c, 3px -3px 0 #f9859c, -3px 3px 0 #f9859c, 3px 3px 0 #f9859c;
}


body
{
  font-family: 'PIXEL';
  border: 0;
  margin: 0;
  overflow-y:scroll;
  color: rgb(159, 149, 147);

}


.container {
  display: grid;
  grid-template-columns: 70px 540px 540px 400px; /*done*/
  grid-template-rows: 80px 460px 760px; /*done*/
  grid-template-areas: 
    "header header header sidebar"
    "welcome welcome welcome sidebar"
    "mainSidebar main main sidebar";
    opacity:0.;
}

.container > div {
  border:1px dashed red; 
}




.header {
  grid-area: header;
  background-color: rgb(4, 4, 4);

  display: grid;
  grid-template-columns: 260px 220px 313px 340px;
  grid-template-rows: auto;
  grid-template-areas: 
    "homepage sitemap . profile";
}

.header > div {
  background-color: rgb(57,54,53);
  padding:10px 12px 8px;
  font-size: 30px;
  height:30px;
  margin-top: 14px;

}

.homepage
{
  grid-area: homepage;
  margin-left: 15px;
}

.sitemap
{
  grid-area: sitemap;
  margin-left: 15px;
}

.profile
{
  grid-area: profile;
  text-align: right;
}







/* width = 1550, height = 1330 */
/* multiply width by 1.58, multiple height by 1.6625 

52px 332px 47px 186px 186px 186px 79px = 677 = 1070*/



.welcome {
  grid-area: welcome;

  display: grid;
  grid-template-columns: 85px 330px 70px 185px 185px 185px 80px;
  grid-template-rows: 40px 280px 33px;
  grid-template-areas: 
    ". . . . . . ."
    ". icon . info info info ."
    ". icon . infoB1 infoB2 infoB3 .";
    gap:10px;
  
  background-image: url('artPage/artBckgrnd.png');
  background-repeat: no-repeat;
  background-size: 1200px;
  background-position:70% 95%;
}

.icon {
  grid-area: icon;
  height:320px;
  position: relative;
}

.label {
  position: absolute;
  height:35px;
  margin:-37px -3px;
  background-color: rgb(4, 4, 4);
  padding: 10px 10px 19px;
  font-size: 37px;
  text-align: center;
  width: 94%;
}



.info {
  grid-area: info;
  background-color: rgb(4, 4, 4);
  margin-top: 18px;
  outline-offset: -12px;
  outline: 1px solid rgb(159, 149, 147);

  padding-top:28px;
  text-align: center;
}

#main-content {
  margin: 7px 18px;
  width: 533px;
  height: 178px;
  font-size: 20px;
}








.infoButton p {
  font-size: 30px;
  cursor: url('icons/peachCURSORhover.png'), auto;
  margin: 0;
  text-align: center;

}

.infoButton.active-info p {
  font-weight: bold;
  color: rgb(255, 247, 212);
}

.infoBottom1 {
  grid-area: infoB1;
  background-color: rgb(4, 4, 4);
  height:40px;
  outline-offset: -6px;
  outline: 1px solid rgb(159, 149, 147);
  padding:20px 14px 4px;
}

.infoBottom2 {
  grid-area: infoB2;
  background-color: rgb(4, 4, 4);
  height:40px;
  outline-offset: -6px;
  outline: 1px solid rgb(159, 149, 147);
  padding:20px 14px 4px;
}

.infoBottom3 {
  grid-area: infoB3;
  background-color: rgb(4, 4, 4);
  height:40px;
  outline-offset: -6px;
  outline: 1px solid rgb(159, 149, 147);
  padding:20px 14px 4px;
}
















.mainSidebar {
  grid-area: mainSidebar;
  background-color: rgb(4, 4, 4);
}

.mainSidebarContent
{
  transform: rotate(-90deg);
  border: #f9859c solid 0px;
  width: 480px;
  margin: 475px -204px;
  font-size: 25px;
}



.tag-filter {
  cursor: url('icons/peachCURSORhover.png'), auto;;
}

.tag-filter.active {
  color: rgb(255, 247, 212);
  font-weight: bold;
}









.main {
  grid-area: main;
  background-color: rgb(4, 4, 4);

  display: flex;
   flex-flow: row wrap;
}

.work {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  border: 0px solid yellow;
  margin: 25px 0px 0px 30px;
}


.art-container {
  position: relative;
  height: auto;

}

.art-image {
  position: absolute;
  cursor: pointer;
  pointer-events: auto;
  cursor: url('icons/peachCURSORhover.png'), auto;
  border: 1px solid yellow;
  width:77%;  

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.art-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.tags {
  margin-top: 15px;
  border: 1px solid rgb(159, 149, 147);
  background-color: rgb(4, 4, 4);
  text-align: center;
  width: 100%;
  height: 30px;
}














.sidebar {
  grid-area: sidebar;

  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 400px 191px 10px 10px;
  grid-template-areas: 
    "music"
    "music"
    "."
    ".";
    gap:10px;

  background-color: rgb(23, 42, 81);
}

.sidebar > div {
  border:1px solid yellow;
}



.musicPlayer
{
  grid-area: music;
}

.trackInfoBorder
{
  background-color: rgb(4,4,4);
  width: 340px;
  height: 212px;
  border: 10 px solid yellow;
  margin: 330px 28px;
  position: absolute;
}


#artMusicFrame
{
  height:600px;
  width: 380px;
  position:absolute;
  overflow: hidden;
}