/*#region Fonts*/
@font-face {
  font-family: "TWEWY";
  src: url('../../Content/Fonts/ShoFont.otf') format('opentype');}
@font-face {
  font-family: "BBS";
  src: url('../../Content/Fonts/Alexandria.ttf') format('truetype');}
@font-face {
  font-family: "CollectionText";
  src: url('../../Content/Fonts/EconomicComic.ttf') format('truetype');}
/*#endregion Fonts*/

/*#region General Rules*/

html {
  font-size: 16px;
}
body {
  background-image: url('../../Content/Images/GameStuff/Game\ BG.png');
  font-family: CollectionText;
  color:#FFE380;
  display:flex;
  flex-direction: row;
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale;  
  font-smooth: always; 
}
a {
  color:#65E421;
  width:fit-content;
  height: fit-content;
}

/*#endregion*/

/*#region Header*/

#LeftButtons {
  display:flex;
  flex-direction: column;
  width:24vw;
  height: 100vh;
}
#Menu {
  cursor:pointer;
  background:none;
  border:none;
  width:23vw;
}
#Menu img {
  width:23vw;
}
.pageStuff {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
nav li {
  background-color: #1b3448;
  border-radius: 0 2rem 2rem 0;
  border-style: groove;
  border-width: 0.1rem 0.3rem 0.3rem 0;
  border-color: #91286b8a;
  margin-bottom:0.2rem;
  padding-top:0.1rem;
}
nav a {
  display:flex;
}
nav img {
  width: 23vw;
}
#Collection {
  position:fixed;
  bottom:1%;
  cursor: pointer;
  width:23vw;
}

  /*#region Music Player Shenanigans*/

    #Jukebox {
      font-family: TWEWY;
      margin-top:2rem;
    }

    .music-player {
      width: 100%;
      margin-top: 3rem;
      padding: 1rem 0;
      text-align: center;
      background-color: #401932E0;
      border-style: groove;
      border-color: #2b1230b3;
      border-width: 0.31rem;
      border-radius: 1rem;
    }
    
    .song-info {
      margin-bottom: 1.4rem;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .song-info span {
      font-size: clamp(1rem, 1.7vw,5rem);
      font-weight: bolder;
      line-height: clamp(1.5rem, 3vw, 10rem);
    }

    .song-info a {
      display:block;
      margin:0 auto;
      text-align: center;
      margin-top:0.7rem;
      font-size: clamp(1rem, 1.8vw, 5rem);
    }
    
    .controls {
      font-family: TWEWY;
      width:100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      line-height: 0;
    }

    .controls button {
      width: 3vw;
      height: 3vw;
      border: none;
      border-radius: 50%;
      background-color: #121212;
      color: #fff;
      cursor: pointer;
      font-family: TWEWY;
      font-weight: 1000;
      font-size: clamp(0rem,1.4vw,3rem);
      text-align: center;
    }
    
    .controls button:hover {
      background-color: #a10606;
    }
    
    #volume-slider {
      display:block;
      width: 90%;
      margin: 1rem auto 0 auto;
    }
    
    .progress-bar {
      margin-top: 1rem;
    }
    
    .progress-bar span {
      font-size: clamp(1rem, 1.7vw, 4rem);
      margin: 0 1.2rem;
      font-weight: 900;
    }
    
    progress {
      width: 96%;
      height: 1rem;
      margin: 0 auto;
      border: none;
      border-radius: 1rem;
      background-color: #565dbe;
    }
    
    progress::-webkit-progress-bar {
      background-color: #565dbe;
    }
    
    progress::-webkit-progress-value {
      background-color: #ff45f6;
    }
    
  /*#endregion*/

  /*#endregion*/

/*#region Main Area */

main {
  margin-left: 1rem;
  width:72.4vw;
  display:flex;
  flex-direction: column;
}
#Shelf img {
  width: 72vw;
}
#BBS {
  width:fit-content;
  margin-top:1rem;
  position:relative;
}
#BBS img {
  width:72vw;
}
#BBS article {
  position:absolute;
  z-index:2;
  top:0;
  margin-left: 10vw;
  width: 53vw;
  margin-top: 14vw;
  font-family: BBS;
  color: #0B0E14;
  font-size: clamp(1rem, 3vw, 10rem);
  height: 25vw;
  font-size: clamp(0.2rem, 1.51vw, 10rem);
}
#BBS h2 {
  margin-bottom: 1rem;
  text-align: center;
  font-weight: 1000;
}
#BBS p {
  line-height: clamp(0.3rem,1.7vw,9rem);
  height: 24vw;
}
  /*#region ConsoleShelf*/

  #FullShelf {
    width:fit-content;
  }

  .consoleShelf {
    width: 72vw;
    height: 22.223vw;
    position: relative;
    background-image: url("../../Content/Images/GameStuff/emptyShelf.png");
    background-repeat: no-repeat;
    background-size: contain;
  }

  .leftConsoles, .rightConsoles, .middleConsoles {
    position:absolute;
    margin-top: 2vw;
    width:18vw;
    cursor:pointer;
  }
  .leftConsoles {
    margin-left: 3vw;
  }
  .middleConsoles {
    margin-left: 24vw;
  }
  .rightConsoles {
    margin-left: 47vw;
  }
  /*#endregion*/

  /*region Games Shelf*/

  #FullShelf article {
    width: 72vw;
    display: flex;
    flex-direction: row;
    background-color: #0C2345C9;
    border-color: #0c1045e6;
    border-width: 0.37vw;
    border-style: groove;
  }
  #FullShelf article img {
    width: 21vw;
  }
  #FullShelf article div {
    margin: 0 0.3rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-evenly;
    font-size: clamp(1rem, 2vw, 10rem);
    line-height: clamp(1.3rem, 2.6vw, 10rem);
  }

  /*#endregion*/

/*#endregion*/