body{
  font-family: Emigre;
}

/*index.html modifiers*/
.homepage{
  display: flex;
  justify-content: center; 
}
.homepage .left {
width: 240px;
  flex-shrink: 0; 
}
.homepage .center {
  width: 700px;
    flex-shrink: 0;
  display:flex;
    flex-direction: column;
    align-items: center;
}

.homepage .right {
  width: 240px; 
  flex-shrink: 0;
}


.homepage h1{
 color:black; 
}

.homepage{
  background-image:url("background.gif");
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

.homepage .highlight{
  background:blue;
}

.homepage .sidebar{
  width:240px;
  height:250px;
  opacity:0.8;
 box-sizing: border-box;
 border-image:url("border.png");
  border-image-slice: 100;
  image-rendering: pixelated; 
  border-image-width: 90px;
  background-color: lightyellow;
  padding: 1px;
  text-align: center;
  border-image-outset: 10px;
  flex-grow: 0;
  flex-shrink:0;

}
.homepage h4{  
  margin-bottom: 0;
    padding-bottom: 0;
    margin-top:1;
}
.homepage .title{
  width:250px;
  text-align:center;
  background-size:cover;
  box-sizing: border-box;
  border-image:url("titleBorder.png");
  border-image-slice: 170;
  border-image-width: 100px;
  text-align: center;
  padding:12px;
  border-image-outset: 18px;
  background: lightblue;
    flex-grow: 0;
  flex-shrink:0;
  
}

.homepage .imageUpdate img{
width:25%;
height:auto;
float:right;
}
.homepage .imageUpdate{
  width:300px;
  margin-left: 10px;
  margin-top: 10px;
  background: lightgoldenrodyellow;
  opacity: 0.9;
border-image:url("frame1.png");
  border-image-slice: 240;
  border-image-width: 200px;
  padding:12px;
  border-image-outset: 15px;
  flex-grow: 0;
  flex-shrink:0;

}

.homepage .music{
   background:lightgoldenrodyellow;
  margin-top: 25px;
  width:340px;
  height:430px;
border: 42px transparent;
border-image: url(frame3.png);
border-image-repeat: repeat;
 border-image-slice: 102;
 border-image-outset: 30px;
  border-image-width: 42px;
background-image:url("mp3.png");
 position: relative; 
 z-index: 0;

}

.homepage .mainBox p{
  color: white;
}
.homepage .mainBox{ 
   width: 90%;          
  max-width: 700px;    
  margin-left: auto;
  margin-right: auto;
  border: 2px solid red;
    margin-top: 25px ;
    background: lightgoldenrodyellow;
opacity: 0.8;
height:500px;

 

}
.homepage .markey p{
color:white;

}
.homepage .markey{
    width: 90%;
    height:65px;          
    max-width: 900px;    
    margin-left: auto;
    margin-right: auto;
    border: 2px solid red;
      background: lightgoldenrodyellow;
opacity: 0.8;
   


}


.dataSearch #search{
  align-items:center;
  gap:20px;
  padding:4px;
}

.infoPage .statGraph{
display:flex;
align-items:center;
gap:10px;
margin:5px 0;
}

.infoPage .statName{
width:80px;
}

.infoPage .barBackground{
width:200px;
height:15px;
background:#ddd;
border-radius:4px;
overflow:hidden;
}

.infoPage .barFill{
height:100%;
background:#4CAF50;
}

.infoPage .statValue{
width:30px;
text-align:right;
}
.infoPage{
  background-image:url("pokemonDataSet/background.webp");
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
.dataSearch .container{
  display:flex;
  background:whitesmoke;
  width:250px;
  opacity:0.9;
  margin-top:20px;
  border-image:url("pokemonDataSet/frame1.png");
  border-image-slice: 200;
  border-image-width: 30px;
  padding:5px;
  border-image-outset: 10px;
}
.dataSearch{
  background-image:url("pokemonDataSet/backgroundList.png");
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

.infoPage .otherStat{
  background:lightgreen;
  width:400px;
  height:auto;
  padding:10px;
  border-image:url("pokemonDataSet/frame1.png");
   border-image-slice: 200;
  border-image-width: 30px;
  padding:5px;
  border-image-outset:15px;
  opacity: 0.8;
}


/*pokemonEmeraldJ changes*/
.pokemonEmerald .title{
  width: 300px;
    height:55px;
    border: 50px solid transparent;
   border-image:url("pokemonDataSet/frame2.png");
   border-image-slice: 100;
  border-image-repeat: round;
  border-image-width: 100;
  background: lightgoldenrodyellow;
  padding:20px;
  background-clip: padding-box;
}
.pokemonEmerald{
background:url("pokemonDataSet/background1.gif");
  background-size: cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
.pokemonEmerald a{
color:white;
}
.pokemonEmerald .summary{
  color:white;
}
.pokemonEmerald .container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap:10px;
  padding: 10px;
}
.pokemonEmerald .container div {
  border: 5px solid white;
  font-size: 30px;
}
.pokemonEmerald .container img{
  width:100%;
  height:100%;
}

.pokemonEmerald .saves{
  width:300px;
  height:50px;
background: #4CAF50;
text-align: center;
opacity:0.8;
border: 5px solid white;
}
/*music player style stuff*/
.homepage .music .buttons button{
  position: absolute; 
  z-index: 1;    
  background: transparent; 
    border: none;  

}
.homepage .music .buttons img{
  width:30px;
  height:30px;
}
.homepage .music #timeDisplay, .homepage .music #volumeDisplay {
  position:absolute;
  z-index:1;
}
#timeDisplay::-webkit-slider-thumb {
  -webkit-appearance: none; 
  width: 7px;
  height: 7px;
  background: green;
  border-radius: 0;
  cursor: pointer;
}
#timeDisplay {
  -webkit-appearance: none;
  appearance: none;
}
#volumeDisplay {
  -webkit-appearance: none;
  appearance: none;
}
#volumeDisplay::-webkit-slider-thumb {
  -webkit-appearance: none; 
  width: 12px;
  height: 12px;
  background: green;
  border-radius: 0;
  cursor: pointer;
}
.homepage .music .player .infoDisplay{
  color:white;
  position:absolute;
  top:220px;
  left:60px;
  font-size: 20px;
  font-weight:bold;
}
.homepage .music .player .total_leng{
  color: white;
  position: absolute;
  top: 280px;
  left:235px;

}
.homepage .music .player .curr_length{
  color:white;
  position: absolute;
  top: 280px;
  left:62px;
}
#play { top: 295px; left: 150px; }
#next { top: 295px; left: 190px; }
#previous { top: 295px; left: 110px; }
#timeDisplay{top:285px;left: 100px;}
#volumeDisplay{top:210px;left:50px;}