html{ background-image:url(https://img.magnific.com/foto-gratis/textura-pared-vieja-cemento-fondo-rojo-negro-diseno-color-oscuro-abstracto-son-claros-fondo-degradado-blanco_1258-103477.jpg?semt=ais_hybrid&w=740&q=80);
  background-size: 1400px;
}
.Pbox {
 max-width: 1070px;
  margin: 50px auto;
  display: grid;
  gap: 15px;
  padding: 15px;
  grid-template-columns: 250px 1fr;
  grid-template-rows:auto auto auto auto auto;
}
header, nav, main, footer{ border: 2px outset;
}
header{grid-row: 1 / 2;     grid-column: 1 / 3;     background-color:black;     border-style: outset;    border-radius: 5px;     font-family: "Geist Pixel", sans-serif;
  font-size:50px;     color:white;  margin-top:2px;  
}
.header2{ grid-row: 2 / 3;     grid-column: 1 / 3;   background-color:black;     border-style: outset;    border-radius: 5px;    font-family: "Geist Pixel", sans-serif;
  font-size:50px;     margin-top:2px;     
}
nav{ grid-row: 3 / 4;    grid-column: 1 / 2;     height: max-content;      border-style: outset;     border-radius: 5px;     background-color: white;
  font-family: "Fira code"; 
}
.nav2{ grid-row: 4 / 5;    grid-column: 1 / 2;   background: white;     border: 2px outset;     border-radius: 5px;    font-family: "Fira Code";
    height: max-content;
}
main{ grid-row: 3 / 5;     grid-column: 2 / 3;     height: max-content;      border-style: outset;      border-radius: 5px;       background-color:black;
  font-family: "Geist pixel";     color:White;        border:white;      padding:0px;
}
footer{ grid-row: 5 / 6;     grid-column: 1 / 3;      height: max-content;      border-style: outset;      border-radius: 5px;       background-color:black;
  font-family: "Fira code";      padding:2px
}
.blinkies {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
}
p{margin:7px;
}
.gallery2{display:flex;     align-items:flex-start;     gap:30px;   margin:25px 0 0 35px;   margin-top:0px;   margin-right:0px;    margin-left:35px;}
.gallery{display:inline-block;   margin:25px;   margin-top:0px;   margin-right:0px;    margin-left:35px;}
.description {text-align: center;}
.box { width: 230px;   height: 200px;    overflow-y: auto;    margin: 10px;}
.box::-webkit-scrollbar {
   width: 16px
}
/* Grenade - https://www.cursors-4u.com/cursor/spe32 */
* {
  cursor: url('https://cdn.cursors-4u.net/previews/grenade-424b4010-32.webp') 32 32, auto !important;
}
/* End www.Cursors-4U.com Code */
.box::-webkit-scrollbar-corner {
background: #eee
}
 
.box::-webkit-scrollbar-track:vertical {
background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
}
 
.box::-webkit_scrollbar-thumb {
border: 1.5px solid #888;
border-radius: 3px;
box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
background-color: #eee;
}
.box::-webkit-scrollbar-thumb:vertical {
background: url("https://dl.dropbox.com/s/9a29qbkza3gmgl7/scroll1.png"), linear-gradient(90deg, #eee 45%, #ddd 0, #bbb);
background-repeat: no-repeat;
background-size: 65% auto, cover;
background-position: center;
}
 
.box::-webkit-scrollbar-button:vertical:end:increment,
.box::-webkit-scrollbar-button:vertical:start:decrement {
display: block
}
 
.box::-webkit-scrollbar-button:vertical {
height: 15px
}
.box::-webkit-scrollbar-button:vertical:start:decrement {
background: white;
background: url("https://dl.dropbox.com/s/n9ji42h9hdgdtpc/scroll3.png"), linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
background-repeat: no-repeat;
background-position: center;
-moz-background-size: 100% auto, cover;
-webkit-background-size: 100% auto, cover;
-o-background-size: 100% auto, cover;
background-size: 100% auto, cover;
border-radius: 0 3px 0 0;
}
.box::-webkit-scrollbar-button:vertical:start:increment {
display: none;
}
.box::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}
 
.box::-webkit-scrollbar-button:vertical:end:increment {
background: white;
background: url("https://dl.dropbox.com/s/cdcco6pih7n1lae/scroll4.png"), linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
background-repeat: no-repeat;
background-position: center;
-moz-background-size: 100% auto, cover;
-webkit-background-size: 100% auto, cover;
-o-background-size: 100% auto, cover;
background-size: 100% auto, cover;
background-position: center;
border-radius: 0 0 3px 0;
}
.winamp {
    width:310px;
    height:300;
    background:white;
    border:2px outset white;
    box-shadow:4px 4px black;
    font-family:"Fira Code";
    margin-right:40px;
    margin-top:20px;
    position:relative;
    margin-left:60px;
}
.winamp iframe {
    width: 100%;
    border: none;
    display:block;
}
.titlebar{
    background:linear-gradient(to right,#001b7a,#1d6cff);
    color:white;
    padding:4px 6px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:13px;
    font-weight:bold;
}
.buttons{
    display:flex;
    gap:2px;
}
.btn{
    width:16px;
    height:16px;
    background:#c0c0c0;
    border:2px outset white;
    color:black;
    font-size:10px;
    font-weight:bold;
    display:flex;
    justify-content:center;
    align-items:center;
    user-select:none;
}

.screen{
    background:white;
    padding:10px;
}
.progress{
    width:100%;
    height:7px;
    background:#222;
    border:1px inset #888;
}

.progress-fill{
    width:60%;
    height:100%;
    background:#39ff14;
}
.pet-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#pet{
    width: 150px;
    image-rendering: pixelated;
    width:150px;
    cursor:pointer;
}

#bubble{
    background:white;
    color:black;
    border:2px solid black;
    border-radius:10px;
    padding:8px;
    margin-bottom:10px;
    display:none;
    font-family:"Fira Code";
}