:root { 
  --twt-col-bg: #fff; 
  --twt-col-text: #000; 
  --twt-col-text-l: #536471; 
  --twt-col-hl: #1da1f2; 
  --twt-col-hl-h: rgba(29, 161, 242, 0.1); 
  --twt-border: 1px solid #ccc; 
  --twt-img-header: url(https://placehold.co/500x185.png); 
  --twt-img-pp: url(https://placehold.co/135x135.png); 
} 

.twt-wrapper { 
  width: 500px; 
  height: auto; 
  line-height: normal; 
  font-family: "Helvetica", sans-serif; 
  font-size: 14px; 
  color: var(--twt-col-text); 
  margin: auto; 
  background-color: var(--twt-col-bg); 
  position: relative; 
} 
.twt-wrapper * { box-sizing: border-box; } 
.twt-wrapper a { 
  color: var(--twt-col-hl); 
  text-decoration-line: underline; 
  text-decoration-style: solid;  
  text-transform: none; 
  font-weight: 500; 
  font-size: 14px;
} 

/* HEADER WRAP */
.twt-head-wrapper { border: var(--twt-border); } 

/* TOPBAR */
.twt-headbar { 
  display: flex; 
  align-items: center; 
  padding: 7px; 
  border-bottom: var(--twt-border); 
} 
.twt-headbar i { 
  margin: 0 18px 0 5px; 
  width: 35px; 
  height: 35px; 
  padding: 8px; 
  border-radius: 100%; 
  font-size: 20px; 
  color: var(--twt-col-hl); 
} 
.twt-hb-t { 
  display: flex; 
  flex-direction: column; 
  color: var(--twt-col-text-l); 
  font-size: 13px; 
} 
.twt-hb-t span { 
  font-size: 18px; 
  font-weight: 700; 
  color: var(--twt-col-text); 
} 

/* HEADERBILD wie Screenshot */
.twt-header { 
  width: 100%; 
  height: 185px;

  background-image: var(--twt-img-header); 
  background-size: cover; 
  background-position: center;
} 

/* PROFILBILD: halb im Header, halb unten */
.twt-pp { 
  width: 135px; 
  height: 135px; 
  border: solid 4px var(--twt-col-bg); 
  border-radius: 100%; 
  position: absolute; 
  left: 16px; 
  top: 150px;           /* 185 - 67 = perfekt halb */
  background-image: var(--twt-img-pp); 
  background-size: cover; 
  background-position: center;
  z-index: 5;
} 

/* NAV BUTTONS */
.twt-nav { 
  width: 100%; 
  height: 70px; 
  padding-right: 5px; 
  display: flex; 
  align-items: center; 
  justify-content: flex-end; 
} 
.twt-nav-buttons { 
  margin-right: 10px; 
  padding: 9px; 
  border: solid 1px var(--twt-col-hl); 
  border-radius: 100px; 
  font-size: 15px; 
  font-weight: 600; 
  color: var(--twt-col-hl); 
} 
.twt-n-f { padding: 8px 12px; } 

/* BIO */
.twt-bio { 
  width: 100%; 
  height: auto; 
  padding: 5px 20px; 
  margin-top: -20px;  /* Platz unter PP wie Screenshot */
} 
.twt-b-name { font-size: 20px; font-weight: 700; } 
.twt-b-username { margin-top: 2px; color: var(--twt-col-text-l); } 

.twt-b-bio, .twt-b-info, .twt-b-follow { 
  margin-top: 10px; 
  display: flex; 
  flex-wrap: wrap;
} 
.twt-b-info span, .twt-b-follow span { 
  color: var(--twt-col-text-l); 
  margin-right: 15px; 
} 
.twt-b-follow b { color: var(--twt-col-text); } 

/* HOVER */
.twt-nav-buttons:hover, .twt-headbar i:hover { 
  background-color: var(--twt-col-hl-h); 
  transition: 0.5s; 
}
.twt-pp:hover { 
  filter: grayscale(10%); 
  transition: 0.5s; 
}