[dohtml]<center>
 <div id="orbit">
   <input type="checkbox" id="nav" name="orbit">
     <label for="nav">
       <span class="closed">+ profile</span>
       <span class="open">— go back</span>
       </label>
   <div id="path1"></div>
   <div id="light">
     <div id="trajectory">
       <div id="path2"></div>
       <img src="https://images2.imgbox.com/66/9d/UMxow8Cu_o.png" />
       <div id="title1">진용훈</div>
       <div id="subtitle">I was inevitably attracted to you. Ever since then, you were my star.</div>
     </div>
   </div>
   <div id="star">
     <div id="figure"><img src="https://64.media.tumblr.com/c188c9a2e98d884f885d82381f306b69/dc8b6173710df3cd-f6/s400x600/1bd85e264a9cb92a9e2dbede593432e01b465ecf.gifv" /></div>
     <div id="reach">
       <div id="title2">jin yonghoon</div>
       <div id="text"><h1>onewe</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed luctus nunc, quis mollis mauris. Sed eget tincidunt sapien, at dignissim justo. Cras eu mauris et quam ullamcorper elementum. Donec euismod egestas dui. Praesent vel tortor sed elit ullamcorper rutrum. Donec malesuada leo neque, vel egestas turpis bibendum at. Nunc maximus ante quam, efficitur feugiat odio feugiat semper. Duis luctus id nunc non venenatis. Integer interdum dictum iaculis. Nullam ultricies convallis sem in congue. Etiam vitae nunc pulvinar ligula semper tempor vel ut orci. Duis lobortis, libero non tempus dictum, dui dui tincidunt lorem, quis mattis quam urna vel justo.

<h2>vocalist</h2>Nunc rhoncus nibh ut felis condimentum sodales in nec metus. Donec eget erat facilisis tortor posuere faucibus ac nec nisi. Phasellus hendrerit suscipit odio, a lacinia enim vestibulum eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc imperdiet sodales metus, at rutrum elit accumsan et. Praesent auctor in eros eget pretium. Etiam vestibulum neque libero. Vestibulum quis pharetra metus. Donec vitae risus fermentum, imperdiet purus vitae, condimentum felis. Duis porttitor dolor vitae odio fringilla fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
     </div>
   </div>
   <div id="credit1"><a href="https://discodeque.jcink.net/" title="Code by Jac" target="_blank"><span style="line-height:140%;font-family: 'Maven Pro', sans-serif;font-size:30px;color:#000;">✦</span></a></div>
   <div id="credit2"><a href="https://open.spotify.com/track/1hYENYPbfAzRO1FxUj011H?si=871695f65b8c4b29" title="ONEWE - orbit_" target="_blank"><span style="line-height:140%;font-family: 'Maven Pro', sans-serif;font-size:26px;color:#000;">✦</span></a></div>
 </div>
</center>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700&family=Nanum+Gothic+Coding:wght@400;700&display=swap" rel="stylesheet">
<style>
 /* button */
 
 #orbit input {
   display: none;
 }
 
 #orbit label {
   position: absolute;
   bottom: 75px;
   width: 50px;
   z-index: 1;
   font: 12px/100% 'Nanum Gothic Coding', monospace;
   color: #000;
   cursor: pointer;
 }
 
 #nav+label span.closed {
   opacity: 1;
   transition: 0.8s ease;
 }
 
 #nav:checked+label span.closed {
   opacity: 0;
 }
 
 #nav+label span.open {
   opacity: 0;
   transition: 0.8s ease;
 }
 
 #nav:checked+label span.open {
   opacity:1;
 }
 
 #nav+label span.closed, #nav+label span.open {
   position: absolute;
   right: 0px;
 }
 
 #nav:checked+label ~ #light {
   opacity: 0;
 }
 
 #nav:checked+label ~ #star {
   opacity: 1;
 }
 
 /* scrollbar */
 
 /* width */
 ::-webkit-scrollbar {
   width: 3px;
 }
 
 /* track */
 ::-webkit-scrollbar-track {
   background: '';
 }
 
 /* handle */
 ::-webkit-scrollbar-thumb {
   background: #fff;
 }
 
 /* handle on hover */
 ::-webkit-scrollbar-thumb:hover {
   background: #555;
 }

 /* main code */

 #orbit {
   width: 400px;
   height: 450px;
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 
 #orbit #path1 {
   position: absolute;
   width: 400px;
   height: 400px;
   background-color: '';
   border-radius: 100%;
   border: 1px solid #000;
 }
 
 #orbit #path2 {
   position: absolute;
   width: 200px;
   height: 200px;
   background-color: '';
   border-radius: 100%;
   border: 1px solid #000;
 }
 
 #orbit #light {
   opacity: 1;
   transition: 0.8s ease-in;
   width: 400px;
   height: 450px;
   position: absolute;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 
 #orbit #trajectory {
   position: absolute;
   width: 150px;
   height: 150px;
   border-radius: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 
 #orbit #light img {
   width: 150px;
   height: 150px;
   border-radius: 100%;
   object-fit: cover;
   filter: brightness(85%);
 }
 
 #orbit #title1 {
   position: absolute;
   left: -125px;
   width: 100px;
   line-height: 90%;
   font-family: 'Nanum Gothic Coding', monospace;
   letter-spacing: -0.5px;
   font-size: 18px;
   color: #000;
 }
 
 #orbit #subtitle {
   position: absolute;
   right: -112.5px;
   width: 75px;
   line-height: 100%;
   font-family: 'Maven Pro', sans-serif;
   letter-spacing: -0.2px;
   font-size: 8px;
   color: #000;
   text-transform: lowercase;
 }
 
 #orbit #star {
   opacity: 0;
   transition: 0.8s ease-in;
   width: 450px;
   height: 250px;
   border-radius: 25px;
   background-color: #000;
   position: absolute;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
 
 #orbit #figure {
   position: absolute;
   left: 0px;
   width: 175px;
   height: 250px;
   border-radius: 25px 0px 0px 25px;
 }
 
 #orbit #star img {
   width: 175px;
   height: 250px;
   border-radius: 25px 0px 0px 25px;
   object-fit: cover;
 }
 
 #orbit #reach {
   position: absolute;
   right: 0px;
   width: 225px;
   height: 200px;
   padding: 25px;
   border-radius: 0px 25px 25px 0px;
 }
 
 #orbit #title2 {
   width: 215px;
   line-height: 100%;
   font-family: 'Nanum Gothic Coding', monospace;
   text-align: left;
   letter-spacing: -0.5px;
   font-size: 36px;
   color: #fff;
   margin-bottom: 13px;
 }
 
 #orbit #text {
   width: 215px;
   height: 150px;
   padding: 0px 5px;
   line-height: 140%;
   font-family: 'Maven Pro', sans-serif;
   letter-spacing: -0.2px;
   font-size: 10px;
   color: #fff;
   text-align: left;
   white-space: pre-line;
   overflow: auto;
 }
 
 #orbit #star h1 {
   margin-top: 0.32em;
   margin-bottom: 0.67em;
   font-family: 'Nanum Gothic Coding', monospace;
   font-weight: 400;
   font-size: 30px;
   color: #fff;
 }
 
 #orbit #star h2 {
   margin-top: 0.32em;
   margin-bottom: 0.67em;
   font-family: 'Nanum Gothic Coding', monospace;
   font-weight: 400;
   font-size: 22px;
   color: #fff;
 }
 
 #orbit #credit1 {
   position: absolute;
   top: 25px;
   right: 95px;
 }
 
 #orbit #credit2 {
   position: absolute;
   top: 42.5px;
   right: 72.5px;
 }
 
</style>[/dohtml]