@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Yomogi&display=swap');

:root{
  --cyan:#08f3f4;
  --cyan2:#63ffff;
  --pink:#ff008f;
  --purple:#b17aff;
  --black:#010107;
  --white:#f8ffff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:#000;color:var(--white);
  font-family:'Yomogi','DotGothic16',sans-serif;
  -webkit-text-size-adjust:100%;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:99;
  background-image:radial-gradient(#fff 1px,transparent 1px);
  background-size:38px 38px;opacity:.12;
}
.page{width:min(100%,760px);margin:auto;padding:8px 18px 25px;overflow:hidden}
.hero{
  position:relative;min-height:225px;padding:8px 8px 2px;
  background:#000;border-bottom:4px solid var(--cyan);
}
.hero:after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:12px;
  border-top:3px solid var(--cyan);border-radius:50%;
}
.hero-gp{height:180px;position:relative;display:flex;align-items:center;justify-content:center}
.gp-logo{
  position:absolute;left:13%;top:30px;z-index:2;
  font-family:'DotGothic16';font-weight:900;font-size:94px;line-height:.8;
  font-style:italic;color:var(--cyan);
  -webkit-text-stroke:3px #000;
  text-shadow:5px 5px 0 var(--purple),8px 8px 0 var(--pink);
  transform:rotate(-6deg);
}
.hero-face{
  position:absolute;width:148px;height:148px;object-fit:cover;border-radius:50%;
  right:17%;top:18px;border:3px solid #000;
}
.speech{
  position:absolute;right:0;top:5px;width:150px;padding:12px 7px;
  border:3px solid var(--white);border-radius:48%;
  color:#fff;background:#000;text-align:center;font-family:serif;
  font-size:19px;font-weight:900;line-height:1.25;transform:rotate(4deg);
}
.speech:after{content:"";position:absolute;bottom:-13px;left:15px;border-width:11px 18px 0 0;border-style:solid;border-color:#fff transparent transparent transparent}
.scribble{position:absolute;color:var(--cyan);font-weight:bold;font-size:14px;line-height:1.15;z-index:3}
.s1{left:40px;top:10px;transform:rotate(-8deg)}
.s2{right:190px;top:3px;color:var(--purple)}
.tagline{text-align:center;color:var(--cyan);font-weight:bold;font-size:14px;white-space:nowrap}
.doodles{color:var(--pink);font-size:18px;text-align:center;letter-spacing:8px;height:24px}

.main-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:13px 3px 14px}
.main-nav a{
  min-height:48px;padding:6px 5px;border-radius:28px;
  background:linear-gradient(#c48aff,#9a50ff);
  border:3px solid #000;box-shadow:inset 0 0 0 2px #d8b8ff,0 0 0 1px var(--purple);
  color:#111;text-decoration:none;text-align:center;
  font-family:'DotGothic16';font-weight:bold;font-size:18px;
  text-shadow:1px 1px #fff;
}
.main-nav a:nth-child(1),.main-nav a:nth-child(3),.main-nav a:nth-child(5){background:linear-gradient(#65ffff,#00dce6);box-shadow:inset 0 0 0 2px #c8ffff,0 0 0 1px var(--cyan)}
.main-nav a:nth-child(5){grid-column:1 / 3}
.main-nav a:nth-child(6){grid-column:3 / 5}
.main-nav span{font-size:20px;margin-right:5px}

.card{
  position:relative;margin:0 0 12px;padding:0 12px 12px;
  border:3px solid var(--cyan);border-radius:22px;background:#010108;
  overflow:hidden;
}
.card:before{
  content:"";display:block;height:27px;margin:0 -12px 7px;
  background:var(--cyan);
  border-radius:0 0 50% 50% / 0 0 75% 75%;
}
.section-title{
  position:relative;margin-top:-34px;height:42px;padding:3px 7px 7px;
  color:#000;font-size:19px;font-weight:bold;letter-spacing:1px;
}
.section-title span{font-size:23px;margin-right:7px}
.section-title em{float:right;color:var(--pink);font-style:normal;font-size:14px}
.profile-body{display:flex;gap:13px;align-items:center;padding:4px 2px 3px}
.profile-face{width:145px;height:145px;object-fit:cover;border-radius:50%;flex:0 0 auto}
.profile-text{flex:1;font-size:14px;font-weight:bold}
.profile-text p{margin:1px 0;border-bottom:2px dotted var(--cyan);line-height:1.55}
.profile-text b{color:var(--cyan)}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 10px;padding:0 5px}
.gallery figure{margin:0}
.gallery img{display:block;width:100%;aspect-ratio:1.7;object-fit:cover;border:2px solid var(--cyan)}
.gallery figcaption{font-size:14px;color:var(--cyan);font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pager{color:var(--cyan);font-size:13px;text-align:right;padding-top:3px}

.diary-list a{display:grid;grid-template-columns:155px 1fr;gap:5px;text-decoration:none;color:#fff;padding:4px 5px;border-bottom:2px dotted var(--cyan);font-size:14px;line-height:1.25}
.diary-list span{color:var(--cyan);font-weight:bold}
.diary-list a:before{content:"♥";color:var(--purple);position:absolute;margin-left:-17px}
.diary-card button{display:block;margin:9px 0 0 auto;border:0;border-radius:18px;padding:5px 20px;background:linear-gradient(#c58bff,#9950ff);font-family:inherit;font-weight:bold}

.favorite-body{display:grid;grid-template-columns:170px 1fr 180px;gap:15px;align-items:center;padding:3px 3px 8px}
.favorite-pic img{width:165px;height:100px;object-fit:cover;transform:rotate(-7deg);border:5px solid #fff;box-shadow:0 0 0 2px var(--purple)}
.favorite-list{font-size:14px;color:var(--cyan);font-weight:bold;line-height:1.25}
.favorite-note{border:2px solid var(--cyan);border-radius:50%;padding:17px 8px;text-align:center;color:#fff;font-size:14px;transform:rotate(4deg)}

.link-card{border-color:var(--purple)}
.link-card:before{background:linear-gradient(90deg,var(--cyan),var(--purple),var(--pink))}
.links{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 2px 3px}
.links a{background:linear-gradient(#e4d2ff,#b991f5);color:#111;text-decoration:none;border-radius:22px;padding:5px 4px;text-align:center;font-size:13px;font-weight:bold;border:2px solid #000}

footer{padding:10px 2px 0;text-align:center;color:var(--cyan);font-size:14px;font-weight:bold;border-top:3px solid var(--cyan);margin-top:4px}

@media(max-width:620px){
  .page{padding:5px 16px 20px}
  .hero{min-height:235px}
  .hero-gp{height:185px}
  .gp-logo{font-size:74px;left:11%;top:42px}
  .hero-face{width:132px;height:132px;right:14%;top:25px}
  .speech{width:126px;font-size:16px;right:-3px;top:2px}
  .s1{left:28px;font-size:12px}
  .s2{right:145px}
  .tagline{font-size:12px}
  .main-nav{grid-template-columns:repeat(4,1fr);gap:6px}
  .main-nav a{font-size:15px;min-height:43px}
  .main-nav a:nth-child(5){grid-column:1 / 3}
  .main-nav a:nth-child(6){grid-column:3 / 5}
  .profile-body{gap:9px}.profile-face{width:135px;height:135px}
  .profile-text{font-size:12px}.profile-text p{line-height:1.45}
  .gallery{gap:7px 8px}.gallery figcaption{font-size:11px}
  .diary-list a{grid-template-columns:130px 1fr;font-size:12px}
  .favorite-body{grid-template-columns:120px 1fr 125px;gap:8px}
  .favorite-pic img{width:115px;height:78px}.favorite-note{font-size:11px;padding:12px 4px}
  .links a{font-size:11px;padding:5px 2px}
}
@media(max-width:450px){
  .profile-body{align-items:flex-start}.profile-face{width:115px;height:115px}
  .profile-text{font-size:10.5px}
  .gallery{gap:6px}.gallery figcaption{font-size:10px}
  .section-title{font-size:16px}
  .diary-list a{grid-template-columns:112px 1fr;font-size:10.5px}
  .favorite-body{grid-template-columns:95px 1fr 105px}.favorite-pic img{width:92px;height:65px}
  .links{gap:4px}.links a{font-size:9px}
}