<!-- 
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠟⠛⢛⡛⠛⠿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠟⠉⠐⠀⠀⠈⠁⠀⠀⠈⠛⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠿⠛⠻⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡏⠔⠀⣠⣾⣿⣿⣿⣿⣶⣤⡀⠈⢻⣿⣿⣿⣿⣿⣿⣿⣿⡿⠟⠋⠁⠀⠀⠀⢰⣿⣿
⣿⣿⣿⣇⠠⠀⠀⠉⠛⠿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠐⠀⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣄⠹⣿⣿⣿⣿⡿⠋⢡⡄⠀⣤⡀⠀⠀⠀⣾⣿⣿
⣿⣿⣿⣿⡄⠀⠀⠀⡀⠀⢄⣉⠙⠿⣿⣿⣿⣿⣿⠿⠛⠋⠀⠀⠀⠀⠀⠀⠀⠈⠉⠉⠀⠀⠈⠉⠀⠈⠻⠿⠉⢠⡶⠋⣰⣿⣿⣿⡦⢀⣾⣿⣿⣿
⣿⣿⣿⣿⣿⡄⠀⢾⣿⣦⡀⠙⢿⣆⠈⠻⠿⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣴⡏⠀⢠⣿⣿⣿⡿⢁⣾⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⡄⠘⣿⣿⣷⡄⠀⠙⠀⠀⠀⠀⠂⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠿⠀⠀⠊⣿⣿⡟⢀⣾⣿⣿⣿⡿⠿
⣿⣿⣿⣿⣿⣿⣿⣦⠙⢿⢿⡛⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢰⣄⠀⠀⠀⠁⠉⠀⠛⠛⠛⠉⠀⢀⣼
⣿⣿⣿⣿⣿⡿⠿⠿⠗⠀⠀⠁⠀⠀⠀⠀⠀⠀⠀⠀⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣆⠀⠀⢤⣶⣦⠀⢤⣤⣶⣾⣿⣿
⣿⣿⣿⣿⠿⠇⠀⣶⠀⢰⡶⠠⠀⠀⠀⠀⠀⠀⠀⠀⠂⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣿⣿⡆⠀⡀⠹⣿⣷⡄⠻⣿⣿⣿⣿
⣿⣿⣿⣿⢨⠩⠠⢀⣠⣿⠁⠁⠀⠀⠀⠀⠀⠀⠀⠰⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣤⣼⣿⣿⣿⣿⡄⢻⣄⠸⣿⣿⣄⠹⣿⣿⣿
⣿⣿⣿⣿⣦⣤⣴⣿⣿⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⠀⠀⠀⠀⠀⠀⣀⣀⣀⡄⠠⣶⣾⣶⡄⢿⣿⣿⣿⣿⣿⡘⣿⣷⠈⣿⡀⠹⣿⣿⣆⠹⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⡏⠀⣾⣷⣄⠀⠀⠀⠀⠀⠀⠃⠀⠀⢠⣤⣶⣿⣿⣿⣿⡇⢁⢿⣿⣿⡇⡘⣿⣿⣿⣿⣿⣷⠘⣿⡆⢻⣧⠀⢹⣿⣿⡆⢻⣿
⣿⣿⣿⣿⣿⣿⣿⣿⢠⠼⣿⣿⡟⢸⢠⣄⣀⣤⠀⢰⣾⠀⢸⣿⣿⣿⣿⣿⣿⡇⣆⢸⣿⣿⡇⣷⡘⣿⣿⣿⣿⢻⣧⠸⡇⢸⣿⡆⠀⢿⣿⣿⡀⢻
⣿⣿⣿⣿⣿⣿⣿⠃⡏⠀⣿⣿⡇⠀⣿⣿⣿⡏⠀⣼⣿⡀⣿⣿⣿⣿⣿⣿⠹⡇⣿⣆⠿⡿⠇⠸⢷⡘⢿⣿⣿⢸⣿⡇⠇⢸⣿⣿⡀⠘⣿⣿⣧⠸
⣿⣿⣿⣿⣿⣿⠇⡼⠀⢳⣿⣿⣧⢠⣿⣿⣿⡇⣀⢈⣛⡁⠙⠻⣿⣿⣿⣿⠀⡇⣿⣡⣄⠲⣿⠸⣿⣿⣌⢻⣿⡎⣿⣿⠀⢸⣿⣿⣇⠀⢹⠉⣿⡆
⣿⣿⣿⣿⣿⠏⣼⠃⢠⣼⣿⣿⣿⡈⣿⣿⣿⡇⣿⡆⣿⣧⠸⣿⣿⣿⣿⣿⡇⠀⣿⣿⣿⣷⡘⠆⣿⣿⣿⣦⠙⠇⣿⣿⣦⣿⣿⣿⣿⠀⠈⠇⢹⡇
⣿⣿⣿⡿⢋⡼⠃⣀⢸⣿⣿⣿⣿⣧⠸⣿⣿⡇⣿⣿⡜⠿⢠⠹⣿⣿⣿⣿⣿⡀⣿⣿⣿⠿⠟⠂⠉⠉⠘⠛⠓⠚⢛⣿⣿⣿⣿⣿⣿⡆⠀⠀⢸⡇
⣿⣿⠟⠡⠞⣡⣾⣿⢸⠛⣿⣿⣿⣿⣧⡹⡛⠁⠛⠛⠋⠈⠐⠂⠹⣿⣿⣿⣿⣧⠹⣷⢁⣀⠀⠀⠤⠤⠄⣤⡀⢠⣿⣿⣿⣿⣿⡏⢹⠇⠀⠀⢸⢁
⡿⠃⢀⣴⣾⣿⣿⣿⠸⡇⠹⣿⣿⣿⠟⠁⠀⠀⣠⡄⠤⠤⠄⠀⢠⣌⠻⣿⣿⣿⣆⠹⣿⣿⠐⠒⠂⠐⠒⣿⠀⣿⣿⣿⣿⣿⣿⡇⠘⠀⠀⠀⠈⣸
⣿⣿⣿⣿⣿⣿⣿⣿⡄⠇⢤⠈⢿⣿⣿⣷⡄⣸⣿⣇⠀⢀⢀⣁⢸⣿⣷⣬⡙⢿⣿⣧⠹⣿⣧⡸⠿⣟⡱⢣⣾⠟⣹⣿⣿⣿⡿⠁⠀⠀⠀⠀⣰⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣷⡀⠘⢠⠀⣙⠻⢿⣷⡜⢿⣻⣮⣛⣛⣣⣾⣿⣿⣿⣿⣷⣮⣭⣑⣈⣻⣿⡿⠋⣐⠉⡴⢸⣿⣿⣿⣿⠃⠀⠀⠀⠀⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⡄⡄⠀⠈⠛⠂⢠⣭⣤⣽⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣋⣨⡄⣼⣿⣿⠋⠁⠀⠀⢀⠀⠰⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⡇⠀⠀⠀⠀⠸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣟⠿⣿⡿⢿⣡⡿⠿⠿⠿⣿⣿⣿⠇⢻⡿⠃⠀⠀⠀⠀⢻⣶⣶⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⠁⠀⠀⠀⠀⠀⢈⠛⠿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⣫⣶⣿⣿⣿⣶⣍⠁⠀⠸⠁⠀⢠⣀⠀⠀⠸⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡄⢰⡀⠀⠀⠀⠸⠁⠀⠀⠉⠙⠛⠛⠛⠛⢛⠛⠛⠋⣼⣿⣿⣿⣿⣿⣿⣿⣷⣄⠀⠀⠀⠀⠻⣷⣶⣶⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣦⡀⠀⠀⠀⢀⡠⠀⠀⠀⠀⠀⣠⠏⠀⠀⣾⣿⣿⣿⣿⣿⡿⠛⢿⡏⣿⡆⢶⣤⣤⣤⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣦⣤⣼⣟⣁⣀⣠⠀⡀⣼⣿⡆⡾⣸⣿⣿⣿⣿⣿⣿⣧⣤⣼⡇⣿⣷⡈⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⢃⣾⠳⣈⣽⢰⢇⣿⣿⣿⣿⣿⣿⡿⠛⠻⣿⡇⢿⣿⣇⢹⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠟⠡⣿⡇⣾⣿⡿⣼⢸⣿⣿⣿⣿⣿⣿⣷⣤⣴⢹⡇⢸⣿⣿⠈⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
              {source: https://emojicombos.com/umamusume}
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>𝚝𝚊𝚌𝚑-𝚗𝚘𝚕𝚘𝚐𝚢</title>
    <link rel="icon" type="image/gif" href="https://files.catbox.moe/xmfuh1.png">
    <link rel="stylesheet" href="umamusume.css">
    <script src="umamusume.js" defer></script>
</head>

<body>
    <div class="index-div">
        <div class="central-div">
            <img src="umimg/um_tach_main.png">
            <div class="top-pattern">
                <p class="header-text">beyond the event horizon...</p>
            </div>
        </div>
        <div class="main-container"></div>
    </div>

    <!-- build container -->
    <div class="build" onclick="showBox('build')"><img src="umimg/icon1.png"></div>
    <div class="build_container"><br><br> 
            <div class="top-page-pattern top-training-log" >
                <p class="header-text">training log</p> 
            </div>
            <div class="highlighted-text instance-2">highest unity build</div>
            <img src="umimg/digitan.png" class="sticker sticker-2">  
            <div class="build-image-container build-container-instance-1">
                <img src="umimg/unityz.png" class="build-images">
            </div>  
            <img src="umimg/note.png" class="goal-image">
            <div class="goal-text">current goals
                <ul>
                    <li>save for vega PLS SELF</li>
                    <li>all A+ team members</li>
                    <li>9-star speed spark?!</li> 
                </ul>
            </div>
            <div class="highlighted-text instance-4">SSR supports</div>
            <div class="grid-container grid-instance-1">
                <div class="currently-own-build-images">
                    <img src="umimg/akebono.png">
                </div> 
                <div class="currently-own-build-images">
                    <img src="umimg/digitan2.png">
                </div>
                <div class="currently-own-build-images">
                    <img src="umimg/city.png"> 
                </div>
                <div class="currently-own-build-images">
                    <img src="umimg/fuji.png">
                </div>
                <div class="currently-own-build-images">
                    <img src="umimg/manh.png">
                </div>
                <div class="currently-own-build-images">
                    <img src="umimg/maru.png">
                </div>
                <div class="currently-own-build-images">
                    <img src="umimg/maru2.png">
                </div>
                <div class="currently-own-build-images">
                    <img src="umimg/mc.png">
                </div> 
                <div class="currently-own-build-images">
                    <img src="umimg/mihonov.png">
                </div> 
                <div class="currently-own-build-images">
                    <img src="umimg/silence.png">
                </div>
                <div class="currently-own-build-images">
                    <img src="umimg/taish.png">
                </div>
                <div class="currently-own-build-images">
                    <img src="umimg/teio1.png">
                </div>
                <div class="currently-own-build-images">
                    <img src="umimg/teio2.png">
                </div>
                <div class="currently-own-build-images">
                    <img src="umimg/tousen.png">
                </div>
                <div class="currently-own-build-images">
                    <img src="umimg/op.png">
                </div> 
            </div> 
            <div class="highlighted-text instance-3">banner trainees</div>
            <button id="support-container-button"><img src="umimg/tach.gif"></button>
            <div class="currently-own-support-container hidden">
                <div class="support-item" uncap-level="4">
                    <img src="umimg/s1.png"> 
                </div>
                <div class="support-item" uncap-level="4"> 
                    <img src="umimg/s2.png">
                </div> 
                <div class="support-item" uncap-level="4"> 
                    <img src="umimg/s3.png"> 
                </div>  
                <div class="support-item" uncap-level="4">
                    <img src="umimg/s4.png"> 
                </div>
                <div class="support-item" uncap-level="4">
                    <img src="umimg/s5.png"> 
                </div>
                <div class="support-item" uncap-level="4">
                    <img src="umimg/s6.png">
                </div>
                 <div class="support-item" uncap-level="4">
                    <img src="umimg/s7.png">
                </div>
                <div class="support-item" uncap-level="4">
                    <img src="umimg/s24.png"> 
                </div>
                 <div class="support-item" uncap-level="4"> 
                    <img src="umimg/s33.png">
                </div>
                <div class="support-item" uncap-level="4">
                    <img src="umimg/s25.png"> 
                </div>
                <div class="support-item" uncap-level="4">
                    <img src="umimg/s8.png">
                </div> 
                <div class="support-item" uncap-level="4"> 
                    <img src="umimg/s9.png">
                </div>
                <div class="support-item" uncap-level="4"> 
                    <img src="umimg/s28.png">
                </div>
                <div class="support-item" uncap-level="3">
                    <img src="umimg/s10.png">
                </div>
                <div class="support-item" uncap-level="3">
                    <img src="umimg/s19.png">
                </div>
                <div class="support-item" uncap-level="2"> 
                    <img src="umimg/s11.png">
                </div>
                 <div class="support-item" uncap-level="2">
                    <img src="umimg/s12.png">
                </div>
                <div class="support-item" uncap-level="2">
                    <img src="umimg/s25.png"> 
                </div> 
                <div class="support-item" uncap-level="2">
                    <img src="umimg/s27.png"> 
                </div>
                <div class="support-item" uncap-level="1">
                    <img src="umimg/s13.png">
                </div>
                 <div class="support-item" uncap-level="1">
                    <img src="umimg/s14.png">
                </div>
                <div class="support-item">
                    <img src="umimg/s15.png">
                </div>
                <div class="support-item">
                    <img src="umimg/s16.png">
                </div>
                <div class="support-item">
                    <img src="umimg/s17.png">
                </div>
                <div class="support-item">
                    <img src="umimg/s18.png">
                </div>
                <div class="support-item">
                    <img src="umimg/s20.png">
                </div>
                <div class="support-item">
                    <img src="umimg/s22.png"> 
                </div>
                <div class="support-item">
                    <img src="umimg/s23.png"> 
                </div>
                <div class="support-item">
                    <img src="umimg/s29.png"> 
                </div>
                <div class="support-item">
                    <img src="umimg/s30.png"> 
                </div>
                <div class="support-item">
                    <img src="umimg/s31.png"> 
                </div>
                <div class="support-item">
                    <img src="umimg/s32.png"> 
                </div>
            </div>  
        </div>
   
    <!-- upcoming support SSRs --> 
    <div class="upcoming_support" onclick="showBox('upcoming_support')"><img src="umimg/icon2.png"></div>
        <div class="upcoming_support_container" style="display:none;">
            <div class="top-page-pattern">
                <p class="header-text">misc.</p>
            </div> 
            <div class="note-container">
                <div class="date-text instance-6">11-25</div>
                <div class="note-text">
                    <p class="point">sternly told myself mischel would nod approvingly if i held off for digitan's jiangshi costume but needed a fellow simp in arms on my team </p>
                    <p class="point">i respect that march thinks she's in a gundam show</p>
                    <p class="point">an umasona for those whose ao3 lists are filled with hannigram</p>
                    <img src="https://files.catbox.moe/86u5zu.png" class="note-img">
                </div>
                <div class="date-text instance-7">12-25</div>
                <div class="note-text"> 
                    <p class="point">have enough to comfortably scout cafe if it reaches that point, however now am wondering if tousen ought to be abandoned in favour of boosting my lacklustre support arsenal</p>
                    <p class="point">how it feels ensuring your uma has 1k stamina with at least 1 gold recovery skill/1k+ speed/600+ power while ensuring guts/wit aren't neglected</p>
                    <img src="https://files.catbox.moe/mztfwh.png" class="note-img">
                  </div>
                </div>
            </div>
     

    <!-- upcoming trainees -->
    <div class="upcoming" onclick="showBox('upcoming')"> <img src="umimg/icon3.png" class="container-icons"></div> 
    <div class="upcoming_container" style="display:none;">  
        <div class="top-page-pattern"><p class="header-text">upcoming trainees</p></div>
        <div class="highlighted-text instance-2">reminder to self: save! </div>
        <img src="https://files.catbox.moe/pxjkxq.png" class="jewel-icon"><p class="jewel-text">1,395/30,000</p> 
        <div class="grid-container"> 
           

            
            <div class="grid-item">
                <div class="holographic">
                <div class="flip-box">
                    <img src="https://files.catbox.moe/v0bblz.png">
                    <div class="flip-back">february '26</div>
                </div>
                </div>
            </div>
            <div class="grid-item">
                <div class="flip-box">
                    <img src="https://files.catbox.moe/ba66yi.png">
                    <div class="flip-back">may '26</div>
                </div>
            </div>
            <div class="grid-item">
                <div class="flip-box">
                    <div class="holographic">
                        <img src="https://files.catbox.moe/8hhtd1.png">
                    </div>
                    <div class="flip-back">july '26</div>
                </div>
            </div>
            <div class="grid-item">
                <div class="flip-box">
                    <img src="https://files.catbox.moe/4wjai3.png">
                    <div class="flip-back">august '26</div>
                </div>
            </div>
            <div class="grid-item">
                <div class="flip-box">
                    <img src="https://i.ibb.co/v406kjY9/h17.png">
                    <div class="flip-back">december '26</div>
                </div>
            </div>
            <div class="grid-item">
                <div class="flip-box">
                    <img src="https://files.catbox.moe/joeav0.png">
                    <div class="flip-back">february '27</div>
                </div>
            </div>
            <div class="grid-item">
                <div class="flip-box">
                    <img src="https://files.catbox.moe/s4fjva.png">
                    <div class="flip-back">february '27</div>
                </div>
            </div>
            <div class="grid-item">
                <div class="flip-box">
                    <div class="holographic">
                        <img src="https://i.ibb.co/M575KNDB/h11.png">
                    </div>
                    <div class="flip-back">february '27</div>
                </div>
            </div>
            <div class="grid-item">
                <div class="flip-box">
                    <img src="https://files.catbox.moe/rk3n78.png">
                    <div class="flip-back">may '27</div>
                </div>
            </div>
            <div class="grid-item">
                <div class="flip-box">
                    <img src="https://files.catbox.moe/yrh9cm.png">
                    <div class="flip-back">june '27</div>
                </div>
            </div>
            <div class="grid-item">
                <div class="flip-box">
                    <div class="holographic">
                        <img src="https://i.ibb.co/k6sbRTGH/chara-stand-1080-108001.png">
                    </div>
                    <div class="flip-back">july '27</div>
                </div>
            </div>
            <div class="grid-item">
                <div class="flip-box">
                    <div class="holographic">
                    <img src="https://files.catbox.moe/gyyw4r.png">
                    <div class="flip-back">september '27</div>
                    </div>
                </div>
            </div>
            <div class="grid-item">
                <div class="holographic">
                <div class="flip-box">
                    <img src="https://files.catbox.moe/4retxr.png">
                    <div class="flip-back">october '27</div>
                </div>
                </div>
            </div>
            <div class="grid-item">
                <div class="flip-box">
                    <img src="https://i.ibb.co/DffQxZZG/h7.png">
                    <div class="flip-back">november '27</div>
                </div>
            </div>
            <div class="grid-item">
                <div class="flip-box">
                    <div class="holographic">
                        <img src="https://files.catbox.moe/rxduf5.png">
                    </div>
                    <div class="flip-back">february '28</div>
                </div>
            </div>
            <div class="grid-item">
                <div class="flip-box">
                    <img src="https://i.ibb.co/QFTpb57t/h14.png">
                    <div class="flip-back">february '28</div>
                </div>
            </div>
            <div class="grid-item">
                <div class="flip-box">
                    <img src="https://i.ibb.co/3XbtJb7/chara-stand-1070-107002.png">
                    <div class="flip-back">march '28</div>
                </div>
            </div>
            <div class="grid-item">
                <div class="flip-box">
                    <img src="https://files.catbox.moe/ibjmwr.png">
                    <div class="flip-back">april '28</div>
                </div>
            </div>
            <div class="grid-item">
                <div class="holographic">
                <div class="flip-box">
                    <img src="https://files.catbox.moe/gxrzoj.png">
                    <div class="flip-back">???</div>
                </div>
                </div>
            </div>
            <div class="grid-item">
                <div class="flip-box">
                    <img src="https://files.catbox.moe/aqcjq9.png">
                    <div class="flip-back">???</div>
                </div>
            </div>
        </div>
       <div class="highlighted-text instance-5">already in-game</div>
        <div class="grid-container grid-instance-2">
            
            <div class="currently-own-build-images">
                    <img src="https://files.catbox.moe/42nebh.png">
            </div>
            <div class="currently-own-build-images">
                    <img src="https://files.catbox.moe/3dg16o.png">
            </div> 
            <div class="currently-own-build-images">
                <img src="https://i.ibb.co/0yDqGwqG/chara-stand-1012-101201.png">
            </div>
            <div class="currently-own-build-images">
                <img src="https://files.catbox.moe/gsfsgl.png">
            </div>
        </div> 

        <img src="https://files.catbox.moe/mml699.png" class="sticker sticker-1">
        
    </div>

</body>

</html>