:root{
  --bg:#080607;
  --panel:#0f0d11;
  --border:#3a2a32;
  --text:#caa9b7;
  --title:#e3c1ce;
  --hover:#f6d8e2;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  background: radial-gradient(circle at top, #120d14 0%, #080607 55%, #050405 100%);
  color:var(--text);
  font-family:'IBM Plex Mono', monospace;
  overflow-x:hidden;
}

.grain{
  position:fixed;
  inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:3px 3px, 5px 5px;
  opacity:.12;
  pointer-events:none;
  z-index:2;
}

.Sigil{
  position:fixed;
  top:-40px;
  right:-60px;
  width:640px;
  opacity:.14;
  pointer-events:none;
  z-index:0;
  filter:drop-shadow(0 0 18px rgba(255,255,255,.15));
}

.wrapper{
  position:relative;
  z-index:1;
  width:1200px;
  margin:40px auto;
  display:grid;
  grid-template-columns:260px 1fr;
  gap:34px;
}

.sidebar{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.Profile img{
  width:100%;
  height:320px;
  object-fit:cover;
  border:1px solid var(--border);
  filter:brightness(.72) saturate(.8);
}

.panel{
  background:rgba(8,7,10,.82);
  border:1px solid var(--border);
  padding:18px;
  backdrop-filter:blur(2px);
}

.panel h3{
  margin:0 0 14px;
  color:var(--title);
  font-size:16px;
  letter-spacing:3px;
  text-transform:lowercase;
}

.panel p{
  margin:0;
  line-height:1.8;
  font-size:13px;
}

.nav{
  list-style:none;
  padding:0;
  margin:0;
}

.nav li{
  margin:10px 0;
}

.nav a{
  color:var(--text);
  text-decoration:none;
  transition:.25s;
}

.nav a:hover{
  color:var(--hover);
  letter-spacing:1px;
}

.song{
  text-align:center;
  line-height:1.8;
  margin-bottom:14px;
}

.song span{
  opacity:.7;
}

.controls{
  text-align:center;
  margin:10px 0;
  letter-spacing:10px;
}

.progress{
  height:4px;
  background:#241a20;
  border:1px solid #2f2229;
  margin:14px 0 10px;
}

.bar{
  width:42%;
  height:100%;
  background:var(--title);
  box-shadow:0 0 10px rgba(227,193,206,.5);
}

.time{
  text-align:center;
  font-size:11px;
  opacity:.75;
}

.counter{
  border:1px solid #6d4b58;
  padding:14px;
  text-align:center;
  font-size:30px;
  letter-spacing:6px;
  color:var(--title);
  background:#070506;
  box-shadow:inset 0 0 18px rgba(227,193,206,.15);
}

.hero{
  padding:30px 0 10px;
}

.hero h1{
  margin:0;
  font-family:'Cormorant Garamond', serif;
  font-size:72px;
  font-weight:600;
  letter-spacing:7px;
  color:var(--title);
}

.subtitle{
  margin:6px 0 26px;
  letter-spacing:4px;
  color:#c99cab;
}

blockquote{
  margin:0;
  padding-left:20px;
  border-left:1px solid var(--border);
  font-style:italic;
  color:#b78b9a;
}

.card{
  background:rgba(8,7,10,.86);
  border:1px solid var(--border);
  padding:30px;
  margin-bottom:26px;
  backdrop-filter:blur(3px);
}

.card h2{
  margin:0 0 18px;
  color:var(--title);
  letter-spacing:4px;
  font-size:28px;
  text-transform:lowercase;
}

.welcome{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:30px;
  align-items:center;
}

.welcome p{
  line-height:2;
  font-size:14px;
}

.italic{
  font-style:italic;
  color:#d8b8c4;
}

.polaroid{
  background:#ece2e7;
  color:#1c1418;
  padding:12px 12px 22px;
  transform:rotate(-6deg);
  box-shadow:0 12px 30px rgba(0,0,0,.55);
}

.polaroid img{
  width:100%;
  display:block;
  filter:brightness(.78) saturate(.8);
}

.polaroid p{
  margin:14px 0 0;
  text-align:center;
  font-family:'Cormorant Garamond', serif;
  font-size:20px;
  color:#2a1d23;
}

.update{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.date{
  color:#b68a99;
  margin-bottom:16px;
}

.update ul{
  padding-left:20px;
  margin:0;
  line-height:2;
}

.Rose{
  font-size:86px;
  opacity:.78;
}

.thought p{
  font-size:18px;
  line-height:1.8;
  color:#d5b5c2;
}

.entry{
  padding:18px 0;
  border-bottom:1px dashed var(--border);
}

.entry:last-child{
  border-bottom:none;
}

.entry strong{
  color:var(--title);
}

.entry p{
  line-height:1.8;
  margin:12px 0;
}

.entry span{
  color:#a27786;
  font-size:12px;
}

.guest-links{
  text-align:center;
  margin-top:24px;
}

.guest-links a{
  color:var(--title);
  text-decoration:none;
}

.guest-links span{
  margin:0 16px;
  opacity:.4;
}

.blinkies{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin:34px 0;
}

.blinkies div{
  border:1px solid #6d4b58;
  padding:12px 18px;
  color:var(--title);
  background:#0a080a;
  font-size:13px;
  box-shadow:0 0 12px rgba(227,193,206,.08);
}

footer{
  text-align:center;
  color:#8a6572;
  padding:24px 0 60px;
}

footer p{
  margin:8px 0;
}

@media (max-width:1100px){

  .wrapper{
    width:95%;
    grid-template-columns:1fr;
  }

  .welcome{
    grid-template-columns:1fr;
  }

  .hero h1{
    font-size:56px;
  }

  .Sigil{
    width:460px;
  }
}
.sigil{

position:fixed;

top:-20px;

right:-50px;

width:700px;

opacity:.12;

pointer-events:none;

z-index:0;

filter:

drop-shadow(0 0 10px rgba(255,255,255,.08));

animation:sigilFloat 12s ease-in-out infinite;

}


@keyframes sigilFloat{

0%{

transform:
translateY(0px);

}

50%{

transform:
translateY(-8px);

}

100%{

transform:
translateY(0px);

}

}