/choco (crangon)

EDIT DECEMBER 17TH 2024; i dont know if anyones seeing this or is even looking at this but, it doesnt work well anymore (i havent revised the code)



<style>

    @media screen and (max-width: 400px){
        .img-cont{
            width: 300px !important;
        }
    }

    @font-face{
        src: url("https://file.garden/Ze_zdVVdmFtXO7cR/Poppins-Medium.ttf");
        font-family: "font";
    }

    *{
        font-family: "font";
        font-size: 15px;
    }

    #uhm{
        display: block;
        margin: auto;
        margin-top: 15dvh;
    }

    body{
        background: #fff;
        background-image: radial-gradient(#fff 2px, transparent 0), linear-gradient(360deg, #ffa3dd, transparent 250px) !important;
        background-size: 10px 10px, 100% 100% !important;
    }

    .tab-container{
        background: transparent !important;
    }

    .img-cont /* im making this because itll break once i do some stuff with the links */{
        max-width: 400px;
        margin: auto;
        display: block;
    }

    .img{
        width: 75%;
        display: block;
        margin: auto;
        animation: tilt 1s infinite ease-in-out;
    }

    .cont-1, .cont-2, .cont-3{
        width: 265px;
        padding: 5px;
        margin: auto;
        display: block;
        overflow: hidden;
        position: relative;
        top: -50px;
    }

    .cont-1:target, .cont-2:target, .cont-3:target{
        display: block;
    }

    .cont-1:not(:target), .cont-2:not(:target), .cont-3:not(:target){
        display: none;
    }

    .btn{
        background: #fff;
        background: linear-gradient(180deg, rgba(255,255,255,1) 3%, rgba(252,232,243,1) 5%, rgba(252,232,243,1) 30%, rgba(232,150,193,1) 100%);
        padding: 2px 10px 2px 10px;
        display: inline-block;
        border: solid 1px #000;
        border-radius: 20px;
        margin-top: 10px;
        margin-bottom: 5px;
    }

    .scroll{
        display: block;
        width: 250px;
        height: 150px;
        margin: auto;
        overflow: auto;
        padding: 6px;
        background: #fff;
        border: solid 1px #000;
        border-radius: 10px;
        box-shadow: 1px -15px 16px #e8e8e8 inset, 1px -6px 4px #171717 inset;
    }

    .socials a{
        display: inline-block;
        text-decoration: underline 2px #000;
        color: #000;
    }

    a{
        display: inline-block;
        color: #000;
        transition: ease 0.5s;
    }

    a:hover{
        transform: scale(1.1);
    }

    a:active{
        transform: scale(0.8);
    }

    @keyframes tilt{
        0%{
            transform: rotate(-2deg);
        }
        50%{
            transform: rotate(2deg);
        }
        100%{
            transform: rotate(-2deg);
        }
    }

    .editor_topbar{
        display: none !important;
    }

    .button, button{
        display: none !important;
    }

    hr{
        display: none !Important;
    }

    ::-webkit-scrollbar{
        display: none !important;
    }

</style>
<div id="uhm">
<div class="img-cont"> <a href="#one"> <img src="https://file.garden/Ze_zdVVdmFtXO7cR/pui-pui-molcar-choco.png" class="img"/> </a> </div>
<div id="one" class="cont-1">
    <a href="#"> <div class="btn"> close </div> </a>  <a href="#two"> <div class="btn"> next </div> </a>
    <div class="scroll"> one test hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii hii
    </div>
    [c] <div class="socials"> <a href="https://"> twitter </a> - <a href="https://"> retrospring </a> - <a href="https://"> discord </a> </div> [/c]
</div>
<div class="cont-2" id="two">
    <a href="#one"> <div class="btn"> back </div> </a> <a href="#three"> <div class="btn"> next </div> </a>
    <div class="scroll"> two test hii
    </div>
    [c] <div class="socials"> <a href="https://"> twitter </a> - <a href="https://"> retrospring </a> - <a href="https://"> discord </a> </div> [/c]
</div>
<div class="cont-3" id="three">
     <a href="#two"> <div class="btn"> back </div> </a> <a href="#"> <div class="btn"> close </div> </a>
    <div class="scroll"> three test hii
    </div>
    [c] <div class="socials"> <a href="https://"> twitter </a> - <a href="https://"> retrospring </a> - <a href="https://"> discord </a> </div> [/c]
</div>
</div>