@font-face {
    font-family: pencil;
    src: url("pencil.ttf");
}


body {
    background-image: url(https://64.media.tumblr.com/871773c093281b455b5ee6abe2e6dfe5/c33ef4067bcde5db-ec/s250x400/8239b1cc8f773e3e78ad300f9c03924822adc82e.jpg);
    font-family:pencil;
    min-height: 100vh; 
    cursor: url("Normal-Select.cur"), auto !important;
    padding: 20px;
}

.sidebar {
    width: 17%;
    height: 100%;
    position: fixed;
    overflow-y: auto;
    top: 0;
    left: 0;
    border: 1px solid lime;
    background-color: black;
    background-repeat: repeat;
    text-align: center;
   
}





.rightbar {
    width: 17%;
    height: 100%;
    position: fixed;
    overflow-y: auto;
    top: 0;
    right: 0;
    border: 1px solid lime;
    background-color: black;
    background-repeat: repeat;
    text-align: center;
    color:aliceblue;
   
}

h1 {
    color:aliceblue;
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
}

.header {
    margin-top: 10px;
    margin-left: 10px;
    text-align: center;

}

.nav {
background: linear-gradient(180deg,rgba(0, 128, 0, 0.514),#000);
border: 1px solid lime;
font-size: 30px;
color: rgba(245, 245, 245, 0.829);
font-family: pencil;
height: 50px;
border: 2px;
width: 230px;
text-align: left;
margin-bottom: 4px;
}
.sidebtn:hover{
    opacity: 0.5;
}

#welcome {
border: 1px solid green;
border-radius: 6px;
background-color:rgba(0, 0, 0, 0.932);
width: 900px;
margin-left: 450px;
text-align: left;
height: 250px;
color: rgba(245, 245, 245, 0.829);
padding: 15px;
font-size: 20px;
font-family:"pencil";
}

#todo {
border: 1px solid green;
border-radius: 6px;
background-color:rgba(0, 0, 0, 0.932);
width: 320px;
margin-left: 350px;
margin-top: -360px;
text-align: left;
overflow-y:auto;
height: 300px;
color: rgba(245, 245, 245, 0.829);
padding: 15px;
font-size: 19px;
font-family:"pencil";
}

#changes {
border: 1px solid green;
border-radius: 6px;
background-color:rgba(0, 0, 0, 0.932);
width: 320px;
margin-left: 350px;
margin-top: -50px;
text-align: left;
overflow-y:auto;
height: 300px;
color: rgba(245, 245, 245, 0.829);
padding: 15px;
font-size: 19px;
font-family:"pencil";
}


#art {
border: 1px solid green;
border-radius: 6px;
background-color:rgba(0, 0, 0, 0.932);
width: 300px;
margin-left: 1200px;
text-align: left;
height: 300px;
color: rgba(245, 245, 245, 0.829);
padding: 15px;
font-size: 20px;
font-family:"pencil";
}


#webmaster {
height: 290;
width: 240px;
border-radius: 6px;
margin-top: 10px;
margin-left: 25px;
padding: 0px;
font-size: 15px;
line-height: 15px;
font-family: pencil;
  border: 1px solid lime;

background-size: 60%;
        background-blend-mode: darken;
  background-color: rgba(0,0,0,0.0);
}

#about {
border: 1px solid green;
border-radius: 6px;
background-color:rgba(0, 0, 0, 0.932);
width: 550px;
margin-left: 320px;
overflow-y:auto;
text-align: left;
height: 250px;
color: rgba(245, 245, 245, 0.829);
padding: 15px;
font-size: 20px;
font-family:"pencil";
}

#graphics {
border: 1px solid green;
border-radius: 6px;
background-color:rgba(0, 0, 0, 0.932);
width: 1500px;
margin-left: 320px;
overflow-y:auto;
text-align: left;
height: 800px;
color: rgba(245, 245, 245, 0.829);
padding: 15px;
font-size: 20px;
font-family:"pencil";
}


#nemo {
border: 1px solid green;
border-radius: 6px;
background-color:rgba(0, 0, 0, 0.932);
width: 1500px;
margin-left: 300px;
overflow-y:auto;
text-align: left;
height: 870px;
color: rgba(245, 245, 245, 0.829);
padding: 15px;
font-size: 20px;
font-family:"pencil";
}

.interests {
border: 1px solid green;
border-radius: 6px;
margin-top: -15.4%;
background-color:rgba(0, 0, 0, 0.932);
width: 900px;
margin-left: auto;
text-align: left;
overflow-y:auto;
height: 450px;
color: #f5f5f5d3;
padding: 15px;
font-size: 20px;
font-family:"pencil";
}

.favchar {
border: 1px solid green;
border-radius: 6px;
margin-top: -7%;
background-color:rgba(0, 0, 0, 0.932);
width: 900px;
margin-left: auto;
text-align: left;
overflow-y:auto;
height: 450px;
color: #f5f5f5d3;
padding: 15px;
font-size: 20px;
font-family:"pencil";
}

.nemopic {
  scale: 20%;
}

.charimg {
  height: 100px;
  width: 100px;
}

.quizzes {
border: 1px solid green;
border-radius: 6px;
background-color:rgba(0, 0, 0, 0.932);
overflow-y:auto;
width: 550px;
margin-top: -10%;
margin-left: 320px;
text-align: left;
height: 350px;
color: rgba(245, 245, 245, 0.829);
padding: 15px;
font-size: 20px;
font-family:"pencil";
}
 .entry {
    width:75%;
    border: 1px solid lime;
    border-radius:6px;
    background:rgb(0, 0, 0);
    color: rgba(245, 245, 245, 0.829);
    margin-top:10px;
    padding:15px; 
    text-align: left;
    margin-left: 350px;
    font-size: 20px;

 }

.date {
    color:lime;
    font-style: bold;
    font-size: 25px;
    text-align: left;
}

.occontainer {
  border: 1px solid green;
border-radius: 6px;
background-color:rgba(0, 0, 0, 0.932);
width: 1500px;
margin-left: 320px;
overflow-y:auto;
text-align: left;
height: 800px;
color: rgba(245, 245, 245, 0.829);
padding: 15px;
font-size: 20px;
font-family:"pencil";


}

.musicnav {
  width:40%;
    border-radius:6px;
    background:rgb(0, 0, 0);
    color: rgba(245, 245, 245, 0.829);
    margin-top:10px;
    padding:15px; 
    text-align: center;
    margin-left: 550px;
    font-size: 20px;
}
 
.guestbook {
width:75%;
    border-radius:6px;
    background:rgb(0, 0, 0);
    color: rgba(245, 245, 245, 0.829);
    margin-top:10px;
    padding:15px; 
    text-align: left;
    margin-left: 320px;
    font-size: 20px;

}

.album:hover {
    transform: scale(1.2);
}



.gallery { /* this is the main div that wraps your gallery */
  display:flex;
  flex-wrap:wrap;
  width:1500px; /* this can be modified to make the gallery wider */
}

.gallery img {
  width:200px; /* this sets the width for every image */
  height:150px; /* this sets the height for every image. Try setting it to 'auto' and see how it looks weird since every image has a slightly different height? */
  object-fit:cover; /* this crops the image so they are all the same size. This might be an issue if you have landscape AND portrait images. Feel free to take this property out temporarily to see exactly what it does! */
  
}

/* this is the div which CROPS every image */
.gallery > div {
  width:200px; /* this should match the image height */
  height:150px; /* this should match the image width */
  margin-right:10px; /* this controls the gaps between the images */
  margin-bottom:10px; /* this controls the gaps between the images */
}

/* this resizes the image on hover. note that objects in 'portrait'  */
.gallery img:hover {
  transform:scale(2.5); /* this scales up the image when you hover over it */
  object-fit:contain; /* this keeps the aspect ratio of the original images*/
}





 /** if inserting into your css, just add the colors into your own root**/


.playercontainer {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  height: 100%;
  background-color: var(--playerbg);
  border: 3px outset var(--playerborder);
  padding: 5px;
  align-content: center;
  align-items: center;
}

.playercontainer .now-playing {
  width: 100%;
  height: 15%;
  color: var(--playertext);
  text-align: center;
  text-justify: center;
  font-size: .8vw;
}

.playercontainer marquee {
  width: 70%;
  height: 35%;
  border: 3px inset var(--playerborder);
  background-color: var(--playertitlebg);
  color: var(--playertext);
  text-align: center;
  font-size: 1.15vw;
}

.playercontainer .trackdurationcontrols {
  width: 100%;
  height: 25%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  gap: .4vw;
  font-size: .85vw;
  color: var(--playertext);
}

.playercontainer .trackdurationcontrols .bar {
  width: 60%;
  margin-left: .1vw;
}

.playercontainer .trackdurationcontrols .time {
  width: 15%; 
}

.playercontainer .trackdurationcontrols #current-time {
 margin-left: -3px; 
}

.playercontainer .trackdurationcontrols #duration {
 margin-left: -3px; 
}

.playercontainer .trackdurationcontrols input[type="range"] {
 
  background: transparent;
  display: block;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

/** Chrome, Safari, Opera, and Edge Chromium Track**/
.playercontainer .trackdurationcontrols input[type="range"]::-webkit-slider-runnable-track {
  background: var(--playerbar);
  height: 0.1rem;
  width: 100%;
}

/** Firefox Track**/
.playercontainer .trackdurationcontrols input[type="range"]::-moz-range-track {
  background: var(--playerbar);
  height: 0.1rem;
  width: 100%;
}

/** Chrome, Safari, Opera, and Edge Chromium Thumb**/
.playercontainer .trackdurationcontrols input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: .1rem solid var(--playerbar);
  appearance: none;
  margin-top: -12px;
  background-color: var(--playericons);
  height: .5rem;
  width: .5rem;
}

/** Firefox Thumb**/
.playercontainer .trackdurationcontrols input[type="range"]::-moz-range-thumb {
  border: .1rem solid var(--playerbar);
  border-radius: 0;
  background-color: var(--playericons);
  height: .5rem;
  width: .5rem;
}

.playercontainer .trackcontrols {
  width: inherit;
  height: 20%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  gap: 5px;
  margin-top: -5%;
}

.playercontainer .trackcontrols button {
  color: var(--playericons);
  font-size: 1.8vw;
  background-color: transparent;
  border: none;
}

.playercontainer .creditstooltip {
   color: var(--playerbar);
  text-align: right;
  align-self: flex-end;
  margin-bottom: -5px;
}

/* Tooltip text */
.playercontainer .creditstooltip .playercredits {
  visibility: hidden;
  width: 170px;
  font-size: 10px;
  background-color: var(--playertitlebg);
  color: white;
  text-align: center;
  padding: 2px 0;
  border-radius: 2px;
  margin: 18px 0 0 -162px;
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.playercontainer .creditstooltip:hover .playercredits {
  visibility: visible;
}

@media only screen and (max-width: 750px) {
    .playercontainer .now-playing {
    font-size: 1.7vw;
  }

  .playercontainer marquee {
    font-size: 2.3vw;
  }

  .playercontainer .trackdurationcontrols {
    gap: .4vw;
    font-size: 1.7vw;
  }

  .playercontainer .trackdurationcontrols .bar {
    margin-left: .2vw;
    margin-right: .3vw;
  }

  .playercontainer .trackdurationcontrols #current-time {
   margin-left: -2px; 
  }

  .playercontainer .trackdurationcontrols #duration {
   margin-left: -3px; 
  }

  .playercontainer .trackcontrols button {
    color: var(--playericons);
    font-size: 4vw;
    background-color: transparent;
    border: none;
  }
}