@font-face {
    font-family: 'Main'; 
    src: url('Assets/Fonts/Pixel Georgia Bold.ttf'); 
}

    @font-face {
    font-family: 'Header'; 
    src: url('Assets/Fonts/PixelatedPusab.ttf'); 
}

        @font-face {
    font-family: 'Thin'; 
    src: url('Assets/Fonts/Pixel Georgia.ttf'); 
}



body{
  font-family: 'Main';
  
  background-image: url('Assets/Images/background_Clouds2.png');
   background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  color:#0024C4;
  margin:auto;
  height:fit-content;
  /*padding-top:50px;
  padding-left:50px;
  padding-right:50px;*/
  overflow-y:scroll;
  
  cursor:url('Assets/Favicon.png'), pointer;
}
/* NAVIGATION AND HEADER*/
.TheStuff{
  
  margin:auto;
  height:fit-content;
  display:flex;
  flex-direction:column;  

  align-items:center;
  justify-content:baseline;
  
  }
.HeaderTitle{
  
  font-size:50px;
  font-family:'Header';
  text-align:center;
  
  padding:0px;
  
}
.HeaderTitle p{ height:fit-content;}
.Navigation{
  
  font-size:24px;
  font-family:'Header';

  margin:auto;
  display:flex;
  align-content:space-between;
  justify-content:stretch;
  padding:10px;
 
}
.List a{
  color:#0024C4;
  text-decoration-line:none;
  background-color:#F0F7FF;
  text-align:center;
  
  padding:6px;
  border-radius:5px;
}
.List a:hover{
 color: #E8F6FF;
background-color:#0024C4;
cursor:url('Assets/pointer.png'),pointer;
}
.List .onClick {
  color:#0024C4;
  text-decoration-line:none;
}

/* MEAT SHIT*/

.Meat{
  background:none;
  height:700px;
  max-width:900px;
  overflow:hidden;
  margin:auto;
  padding:5px;
    
  border:#E8F6FF 5px;
  
  color:#254B7A;
  font-family:"Main";
  font-size:16px;
  
  cursor:url('Assets/Cursor.png'),pointer;
  
  display:grid;
  grid-template-columns: 1.5fr 3fr;
 
  
}

/* LEFT SIDE*/
.LeftBox{
 background-color:#F0F7FF;
 display:flex;
 flex-direction:column;
 justify-content:space-around;
 align-items:center;
 overflow:hidden; 
 width:100%;
 height:700px;
 border-radius:10px;
}


.Picture {
  display:contents;
  justify-content: center;
  align-content:center;

 }
.Picture a {
  height:50%;
 }
.Picture img{
  height:100%;
  transform: scaleX(-1);
         }

.AboutBlurb {
 font-size:12px;
 text-align:start;
   padding-left:2%;
  padding-right:2%;
}

.AboutBlurb h3{text-align:center;}
.AboutBlurb h1{text-align:center; font-size:10px;}
.AboutBlurb p{
  font-family:'Thin';
  font-size:12px;
 list-style:circle;
 
}

/*.Music{
  
 display:flex;
 align-content:center;
 border:outset #BBCBF2;
 background-image:url('Assets/Images/Bluepaper.jpg');
 background-size:100%;
background-position:center;
  height:75%;
  width:fit-content;
}

.ex2{
   padding:5px; 
}
.music-controls{
 display:flex;
 flex-direction:row;
 margin:auto;
 justify-content:center;
 align-content:center;
}
.Music button{
  margin:5px;
  color:#F0F7FF;
  background:none;
  border:none;
  font-size:20px;
}

.Music button:hover{
  color:#23439E;
}

.playy {
  width:fit-content;
  }
.pausee {
  width:fit-content;
  }
.labeltext {
  width:50%;
  align-self:center;
  background-color:#23439E;
  color:#F0F7FF;
  padding:10px;
  font-size:12px;
  font-family:'Thin';
  
  border:inset #BBCBF2;
  
  } OLD MUSIC PLAYER END*/
.Music{
 display:flex;
 align-content:center;
 border:outset #BBCBF2;
 background-image:url('Assets/Images/Bluepaper.jpg');
 background-size:100%;
  background-position:center;
 }

#musicplayer{
                font-family:'Thin';
                font-size:10px;
                color:#E8F6FF;
                background:none; 
                border:none;
                padding:10px;
                text-align:center; 
                display:flex;
                flex-direction:column;
                gap:10px;
                width:250px;
            }
 
            .songtitle, .track-info, .now-playing{
                padding:5px;
                      }
 
            .controls{
                display:flex; 
                flex-direction:column; 
                gap:10px;
            }
 
            .buttons{
                display:flex;
                justify-content:center;
                font-size:17px !important; /* size of controls */
                width:100%;
            }
 
            .buttons div{
                width:33.3%;
            }
 
            .playpause-track, .prev-track, .next-track{
                color:#E8F6FF; /* color of buttons */
                font-size:15px !important; /* size of buttons */
            }
 
            .volume-icon{
                font-size:22px !important; /* size of volume icon */
            }
 
            .seeking, .volume{
                display:flex;
                flex-direction:row;
                align-items:center;
                gap:5px;
            }
 
            .now-playing, .track-info{
                background-color:#23439E; /* background color of top two boxes */
            }
 
            .now-playing{
                font-weight:bold;
            }
 
            input[type=range]{
                -webkit-appearance:none; /* removes default appearance of the tracks */
                width:100%;
            }
 
            input[type=range]:focus{
                outline:none; /* removes outline around tracks when focusing */
            }
 
            input[type=range]::-webkit-slider-runnable-track{
                width:100%;
                height:4px; /* thickness of seeking track */
                background:#E8F6FF; /* color of seeking track */
            }
 
            input[type=range]::-webkit-slider-thumb{
                height:10px; /* height of seeking square */
                width:10px; /* width of seeking square */
                border-radius:0px; /* change to 5px if you want a circle seeker */
                background:#E8F6FF; /* color of seeker square */
                -webkit-appearance:none;
                margin-top:-3px; /* fixes the weird margin around the seeker square in chrome */
            }
 
            input[type=range]::-moz-range-track{
                width:100%;
                height:4px; /* thickness of seeking track */
                background:#E8F6FF; /* color of seeking track */
            }
 
            input[type=range]::-moz-range-thumb{
                height:10px; /* height of seeking square */
                width:10px; /* width of seeking square */
                border-radius:0px; /* change to 5px if you want a circle seeker */
                background:#e74492; /* color of seeker square */
                border:none; /* removes weird border around seeker square in firefox */
            }
            
            
  #myLinks{
    text-align:center;  
  }
  
  #myLinks p{
   font-size:10px;
   font-family:'Main';
  }
  .Links a{
     font-family:'Thin';
      font-size:12px; 
      color:#0024C4;
      text-decoration:none;
  }
  .Links a:hover{
    background:#FFF28F; 
  }

.RightBox {
 background:none;
 padding:2px;
 color:#E8F6FF;
 margin:auto;
 font-size:12px;
 display:flex;
 flex-direction:column;
 height:700px;
 overflow:hidden;
 gap:10px;
 }
 .RightBox h1{font-family:'Main'; font-size:14px;}

.Hello{
 background:#0024C4;
 padding:2%;
 border-radius: 30px 30px 30px 1px;
}
.Updates p{
 font-family:'Thin'; 
 font-size:10px;
}
.Updates h1{
 font-family:'Main'; 
}
.feat {
 display:flex;
 flex-direction:column;
 align-items:center;
 overflow-y:scroll;
  color:#0024C4;
  padding:2%;
  text-align:center;
  }
  .feat p {font-family:'Thin'; padding:5px; background-color:#F0F7FF; border-radius:10px;}
  .feat h3 {padding:5px; background-color:#F0F7FF;border-radius:10px;}
  
.feat iframe{
  width:500px;
  height:300px;
  padding:5px; background-color:#F0F7FF;
  border-radius:10px;
}

.MegaFeat{
  display:flex;
 flex-direction:column;
 align-items:center; 
 text-align:center;
}

.project{
  padding:10px;
  }

/* width */
::-webkit-scrollbar {
  width: 10px;
  border-radius:30px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #FFF28F;
  opacity:.3;
  border-radius:30px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #0024C4;
  border-radius:30px;
  opacity:.5;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #FFF28F;
}


/* RIGHT SIDE*/