html {
    background-image: url("maxresdefault.jpg");
    background-repeat: no-repeat;
    background-position: top;
    background-color: black;
    max-width: 100%;
    overflow-x: hidden;


}

main {
    width: 90%;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    gap: 20px;
}

/*-------------------- text start -------------------------*/
h1, h2, h3, p, a, li {
        color: rgb(255, 255, 255);
        
}

h2, h3 {font-size: x-large;}

a, li, p {font-size: medium;}

a:hover {color: lightgray;}

h1, h2, h3, p, figure{
    margin: 10px;
    padding: 10px;
}
div{
    border: 1px solid white;
    text-align: center

}
p{
    font-family: "Courier New";
    text-align: left

}

/*---------------------- text end --------------------------*/




/*---------------------- img start -------------------------*/
img {
    display: block;
    max-width: 100%;
    height: auto;
}
/*---------------------- img end ---------------------------*/




/*---------------------- sidebar ---------------------------*/
#sidebar {
    flex: 1;
    box-sizing: 20px;
    height: calc(100vh - 40px);
    width: 100%;
    border: #ffffff ridge 1px;
        
    position: sticky;
    align-self: start;
    top: 20px;
        
    display: flex;
    flex-direction: column;
    
    gap: 10px;
    align-items: center;
}

#content {
    flex: 3;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    
}
/*---------------------- sidebar ---------------------------*/


/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
align-self:center;
width:200px;
}
div.ex2 {
align-self:center;
width: px;
background:rgb(0, 0, 0);
opacity:0.75;
margin: auto;
border: 1px solid #000000;
padding:5px;
}
#glenplayer02 a {text-decoration:none; }
 
#glenplayer02 > div {
align-self:center;
-webkit-align-self:center;
}
 
.music-controls {
user-select:none;
-webkit-user-select:none;
width:185px;
font-size:13px;
cursor:pointer;
color:#ffffff;
font-family: "courier new";
}
 
.playy, .pausee {color:#ffffff;} /* color of play & pause buttons */
 
.pausee {display:none;}

 
.labeltext {
margin-left:8px;
font-family: "courier new";
font-size:9px;
color:#ffffff; /* color of song title */
}

button {
  background-color: rgb(255, 255, 255);
  border: none;
  color: white;
  padding: 1px 1px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
#clock{
    font-family: "Courier New";
    text-align: left;
    color: rgb(255, 255, 255);
    border: none;
}
#date{
    font-family: "Courier New";
    text-align: left;
    color: rgb(255, 255, 255);
    border: none;
}
/* Made by Poyo! https://dapoyo.neocities.org */
:root {
--blue-rgb: 255 255 255;
--primary-rgb: var(--blue-rgb);
}
.screen-overlay {
  background: linear-gradient(
  rgb(var(--primary-rgb) / 0.15),
  rgb(var(--primary-rgb) / 0.15) 0.1px,
  transparent 3px,
  transparent 9px
  );
  background-size: 100% 9px;
  height: auto;
  width: 100%;
  animation: pan-overlay 22s infinite linear;
  position: absolute;
  z-index: -10;
  left: 0px;
  top: 0px;
  
}
@keyframes pan-overlay {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 0% -100%;
  } 
}