.html {
  overflow-y: scroll;
}

body {
  font-family:
    ms gothic,
    Arial,
    Helvetica,
    sans-serif,
    poppins,
    Paradise;
  padding-top: 30px;
 background: #fff;
}

/* unvisited link */
a:link {
  color: #08268e;
  text-decoration-line: none;
}

a:hover {
  color: #ff9547;
    text-decoration-line: none;
}

@font-face {
  font-family: "Paradise16";
  src: url(https://dimden.dev/fonts/pixelfonts/Web437_Paradise132_7x16.woff) format(woff);
}

.container {
  width: 1000px;
  height: fit-content;
  margin: auto;
  font-family: Poppins, Paradise16;
}

.flex {
  display: flex;
  width: 1000px;
  align-items: center;
}



.nav {
  background-color: rgba(255, 255, 255, 0.44);
  border-left: 1px solid #188bff;
  border-right: 1px solid #188bff;
  border-bottom: 1px solid #188bff;
  border-radius: 8px;
  font-family: poppins;
  font-size: 15px;
  padding-bottom: 5px;
  color: #08268e;
}

/* unvisited link */
.nav a:link {
  color: #08268e;
  text-decoration-line: none;
}

.nav a:hover {
  color: #ff9547;
    text-decoration-line: none;
}

.nav img {
  margin-left: 8px;
  margin-right: 4px;
}

.sidebar li,
ul {
  margin: 0;
  padding: 0;
  list-style-position: inside;
  text-align-last: left;
  list-style-type: none;
}


.main {
  width: 1000px;
  height: 625px;
  background-color: rgba(249, 249, 249, 0.62);
  border-radius: 8px;
  border: 1px solid #188bff;
  font-family: poppins;
  font-size: 15px;
  overflow-y: hidden;
  overflow-x: hidden;
  align-content: flex-en;
}

.leftsidebar {
  width: 225px;
place-items: center;
  height: 500px;
  margin: 8px;
 float:left;
}

.banner {
  height: 130px;
  overflow: hidden;
  border-bottom: 1px solid #188bff;
  background-image: url(images/piratesamatokibanner.png);
  background-size: cover;
  font-size: 30px;
   position: sticky;
  top:0;
  z-index:3;
  background-position-y: center;
  
}

.pfp {

  height: 200px;
  background-color: #fff;
  overflow: hidden;
  border-radius: 5px;
  
}

.pfp img  {
   height: 225px;
  filter: hue-rotate(340deg);
  
}


 .info::-webkit-scrollbar {
      width: 0;
      background: transparent;
    }

.info {
  width: 225px;
display: block;
  height: 268px;
  margin-top:8px;
  margin-bottom:8px;
  background-color: rgb(255, 255, 255);
   border: 1px solid #6ba9ff;
  overflow-y: scroll;
  font-family: poppins;
  float: center;
  color: #08268e;
  border-radius: 5px;
  font-size: small;

}
.info li {
    border-bottom: 1px solid #dbf1ff;
    list-style: none;
    padding: 7px;
    background: white;
    height: fit-content;
  color: #4b7caf;
}
.info span {
    color: #042a50;
}

.info li:nth-child(even) {
    background-color: #ebf7ff;
  }


.aboutme::-webkit-scrollbar {
      width: 0;
      background: transparent;
    }

.aboutme {
  width: 475px;
  height: 455px;
margin-top: 8px;
  margin-left: 2px;
  margin-right: 8px;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #188bff;
  background-color: rgba(255, 255, 255, 0.58);
  overflow-y: scroll;
  border-radius: 8px;
  float: left;
}


.subheader {
  background: linear-gradient(to bottom, #e6f9ff 1%, #b6edff 45%, #79d5ff 50%, #c5fffb 100%);
  border-bottom: 1px solid #188bff;
  border-top: 1px solid #188bff;
  text-align-last: center;
  padding: 3px;
  color: #fff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  margin-bottom: 5px;
  text-shadow: rgba(51, 95, 139, 0.37) 0 0 3px;
  font-family: poppins;
  font-size: 15px;
  position: sticky;
  top:0;
  
}

.comfortchara::-webkit-scrollbar {
      width: 0;
      background: transparent;
    }
.comfortchara {
  width: 225px;
  height: 255px;
  margin-right: 8px;
  margin-bottom: 8px;
  margin-top: 8px;
  padding: 8px;
  justify-content: center;
  border: 1px solid #188bff;
  background-color: rgb(255, 255, 255);
  overflow-y: scroll;
  border-radius: 5px;
  background: linear-gradient(0deg,rgba(209, 240, 255, 1) 0%, rgba(255, 255, 255, 1) 26%);
}
.comfortchara img {
  border: 1px solid #08268e;
  filter: hue-rotate(340deg);
}

.suki {
  width: 240px;
  height: 195px;
  margin-right: 8px;
  margin-bottom: 8px;
  margin-top: 8px;
  font-size: 13px;
  justify-content: center;
  border: 1px solid #188bff;
  background-color: rgb(255, 255, 255);
  overflow-y: scroll;
  border-radius: 5px;
}
.suki img {
  border: 1px solid #08268e;
  filter: hue-rotate(340deg);
}
.suki::-webkit-scrollbar {
      width: 0;
      background: transparent;
    }

.suki li {
    border-bottom: 1px solid #dbf1ff;
    list-style: none;
    padding-left: 4px;
  padding-right: 4px;
  padding-top: 5px;
    background: white;
    height: fit-content;
  color: #4b7caf;
}


.suki li:nth-child(1) {
    background-color: #f7f2ff;
  border-bottom: 1px solid #d4c1ff;
  }

.suki li:nth-child(2n+3) {
    background-color: #f2fcff;
  border-bottom: 1px solid #e7e8ff;
  }
.suki span {
  color: #042a50;}

hr.dashed {
  border-top: 8px dashed;
  border-bottom: none;
  color: #2d80d1;
  margin-top: 10px;
  margin: 10px;
}

hr.dotted {
  border-top: 2px dotted;
  border-bottom: none;
  margin-top: 10px;
  margin: 10px;
  color: #2d80d1;
}

hr.double {
  border-top: 3px double;
  border-bottom: none;
  color: #2d80d1;
  margin-top: 10px;
  margin: 10px;
}
hr.solid {
  border-top: 3px double;
  border-bottom: none;
  margin-bottom: 2px;
  color: #2d80d1;
  margin-top: 2px;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}