body {
  background-image: url('/res/cocorinibg3.png');
  font-family: 'VT323', monospace;
  font-size: 20px;
  overflow-x: hidden;
}
  
  a {color:#c78f26}

html, body, a, a:hover { cursor:url('/res/pikacurs.png'), auto !important; }
/* width */
::-webkit-scrollbar {
  width: 10px;
  border-radius: 20px;
}

li { margin-left: 20px;}
/* Track */
::-webkit-scrollbar-track {
  background: #ffebb5;
  border-radius: 20px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #e69083;
  border-radius: 20px;
  height: 20px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #db6451;
  border-radius: 20px;
}
.back a { font-family: 'Silkscreen', cursive; font-size: 13px; color: #c96e53; text-decoration:none; position: absolute; bottom: 20px; left: 20px;}

#paka img { 
  position: absolute;
  right: 300px;
  top: -20px;
  z-index: 20;
}

#poko img {
  position: absolute;
  bottom: 50px;
  left: -70px;
  width: 200px;
  z-index: 20;
}

#pikapi img {
  position: absolute;
  bottom: 0;
  right: -330px;
  z-index: 20;
}

#top {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 1920px;
  height: 55px;
  background-image: url('/res/yellowborder.gif');
}

.container {
  width: 1250px;
  height: 100%;
  background-color: white;
  background-image: url('/res/cocorinibg4.png');
  border-left: 2px dashed #ffc336;
  border-right: 2px dashed #ffc336;
  padding-left: 20px;
  padding-right: 20px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}

.wrapper { 
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 350px 500px;
  gap: 20px;
  margin: 25px auto;  
}

.box1, .box2, .box3, .box4 { padding: 20px; 
  border: 1px solid #ffc336;}

.box1 {
  background-color: white;font-size: 19px;}
        
      .biopic img{
         width: 75px;
         height: 75px;
         border-radius: 125px;
      }
      
      .biopic {
        height: 75px;
        width: 100%;
      }
      
      .bio { 
        top: 50%;
        font-size: 32px;
        transform: translateY(-50%);
        position: relative;
        float: right;
      }
        
.box2 { 
  height: 828px;
  background-color: white;
  overflow-y: auto;}
  
.box2 h2 { font-family: 'Silkscreen', cursive; margin: 10px; font-size: 20px; } 

.box2 h3 { margin: 5px; font-family: 'Silkscreen', cursive; font-size: 15px; margin-left: 0; margin-bottom: -5px}
  
      .interests {
        max-height: 200px;
        overflow-y: auto;
        margin: 15px auto;
        padding: 15px;
        border: 1px dashed #ffc336;
      }
  
.box3 {
  background-image: url('/res/lace1.gif');
  background-position: top;
  background-repeat: repeat-x; 
  background-color: white;
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  position: relative;
}
      .titl3 h1{
        position: absolute;
        top: 50px;
        font-family: 'Press Start 2P', cursive;
        font-size: 35px;
      }
        
      .abspos { 
        position: absolute;
        margin: 0 auto;
        top: 120px;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(255, 255, 255, 0.5); 
        color: #000;
        padding: 20px;
        width: 90%;
        height: 82%;
        box-sizing: border-box; 
        overflow-y: scroll;
        border: 1px dashed #ffc336;
      }
      
      .bordee {
        width: 490px;
        height: 42px;
        background-image: url('/res/lace3.gif');
        background-position: top;
        background-repeat: repeat-x; 
        background-color: white;
        margin: 0 auto;
        margin-top: 20px;
        margin-bottom: 20px;
      }

.box4 {
  background-color: white;}
  
.box4 h2 { font-family: 'Silkscreen', cursive; margin: 10px; font-size: 20px; } 
  
    .linku { 
      border: 1px dashed #ffc336;
      width: 210px;
      height: 260px;
      background: white;
      padding: 20px;
      position: absolute;
      margin: 0 auto;
    }
    
    .linky { font-family: 'Silkscreen', cursive; font-size: 13px; 
      width: 175px;
      height: 20px;
      margin: 2px; 
      padding: 12px;
      background: #ffeebf;
      display: inline-block;
      text-decoration: none;
      border: 1px solid #ffc336;
    }
    
#grid {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center; 
}
#grid img{display:inline-block; margin-left:auto; margin-right:auto;  text-align: center; }