@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&display=swap');
/****** fonts ******/
@font-face{
    font-family:"Hug";
    src:url(https://dl.dropbox.com/s/lkx18y1mqiuxt63/Hug%20Me%20Tight%20-%20TTF.ttf);
}

@font-face {
    src:url(https://dl.dropbox.com/s/hfc6fjqu9kkxbt5/Sweet%20Creamy.ttf);
    font-family:"Creamy";
} 

/****** scrollbar ******/
::-webkit-scrollbar{
    display:none;
}

/****** select hightlight ******/
::selection{
    background:#83cae4;
    color:white;
}

::-moz-selection{
    background:#83cae4;
    color:white;
}

/****** body ******/
body{
    cursor:url("kawaii.png"), auto;
    background-color:#ffebeb;
    background-image:url("stars.gif");
    background-repeat:repeat;
    background-position:0 0;
    background-attachment:fixed;
    color:#7f6a68; /* default font color */
    font-family:"Quicksand", sans-serif; /* default font */
    font-weight:700;
    font-size:20px; /* default font size */
    padding:10px;
}

/****** links ******/
a{
    text-decoration:none;
    color:white;
    transition:0.3s;
    text-shadow:-1px 0 #d9bbba, 0 1px #d9bbba, 1px 0 #d9bbba, 0 -1px #d9bbba;
}

a:hover{
    cursor:url("kawaii-help.png"), pointer;
    transition:0.3s;
    color:#ffffff;
    text-shadow:-1px 0 #7f6a68, 0 1px #7f6a68, 1px 0 #7f6a68, 0 -1px #7f6a68;
}

/****** wrappers ******/
#wrapper{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    animation:fadeEffect 1s;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
}

@keyframes fadeEffect{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

/****** containers ******/
.container{
    width:500px;
    height:500px;
    border:5px solid #af8a94;
    background-color:#ffd6f5;
    padding:10px;
    overflow:auto;
}

.inner{
    border:2px dotted #af8a94;
    background-color:white;
    padding:12px;
}

.icon{
    border:5px solid #af8a94;
    padding:10px;
    background-color:#ffd6f5;
}

.icon > img{
    width:250px;
    max-width:250px;
    object-fit:cover;
    box-sizing:border-box;
    height:auto;
    display:block;
}

.links{
    display:flex;
    flex-direction:column;
    width:120px;
}

.links a{
    font-family:"Creamy", sans-serif;
    border:5px solid #af8a94;
    background-color:#ffd6f5;
    border-left:none;
    margin:20px 0;
    padding:10px;
    width:100px;
    transition:all .3s ease-in-out;
    text-align:center;
}

.one:hover, .two:hover, .three:hover, .four:hover, .five:hover{
    width:120px;
    transition:all .3s ease-in-out;
}

.title{
    font-family:"Creamy", sans-serif;
    font-size:70px;
    position:absolute;
    color:#7f6a68;
    margin-top:-100px; /* change this if the title is too low */
    margin-left:-20px;
    text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}
/****** about text ******/
.about{
    font-family:"Quicksand", sans-serif;
    font-weight:400;
}

.left-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 50px;
    
}

.about img{
    width:250px;
    height:auto;
}

.blinkies-grid{
    display:grid;
    grid-template-columns: repeat(2, 240px);
    gap:8px;
    justify-content:center;
}

.blinkies-grid img{
    width:240px;
    height:auto;
}

.blinkies-grid img:last-child{
    grid-column:1 / 3;
    justify-self:center;
}

.mamegoma-list{
    list-style:none;
    padding-left:0;
    margin:10px 25px;
}

.mamegoma-list li{
    background-image:url("blinkies%20icons/mamegoma.gif");
    background-repeat:no-repeat;
    background-size:18px 18px;
    background-position:0 4px;
    padding-left:26px;
    margin-bottom:14px;
}

.top-image{
    width:calc(100% + 24px);
    max-width:none;
    height:auto;
    display:block;
    margin:-12px -12px 12px -12px;
}

.blinkie-ticker{
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    overflow:hidden;
    background:#ffd6f5;
    border-top:3px solid #af8a94;
    padding:4px 0;
    z-index:998;
}

.blinkie-track{
    display:flex;
    gap:8px;
    width:max-content;
    animation:blinkie-scroll 35s linear infinite;
}

.blinkie-track img{
    width:145px;
    height:auto;
    flex-shrink:0;
}

@keyframes blinkie-scroll{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

.emoji-icon{
    width:1em;
    height:1em;
    vertical-align:-0.15em;
}

.about img.emoji-icon{
    width:1em;
    height:1em;
    vertical-align:-0.15em;
}

.links-list{
    list-style:none;
    padding-left:0;
    margin:10px 25px;
}

.links-list li{
    background-repeat:no-repeat;
    background-size:18px 18px;
    background-position:0 4px;
    padding-left:26px;
    margin-bottom:14px;
}

.link-twitch{
    background-image:url("blinkies%20icons/purple.gif");
}

.link-instagram{
    background-image:url("blinkies%20icons/blue.gif");
}

.link-tiktok{
    background-image:url("blinkies%20icons/red.gif");
}

.support-list{
    list-style:none;
    padding-left:0;
    margin:10px 25px;
}

.support-list li{
    background-repeat:no-repeat;
    background-size:18px 18px;
    background-position:0 4px;
    padding-left:26px;
    margin-bottom:14px;
}

.link-kofi{
    background-image:url("blinkies%20icons/kofi.gif");
}

.link-cafecito{
    background-image:url("blinkies%20icons/kofi.gif");
}

.link-wishlist{
    background-image:url("blinkies%20icons/gift1.gif");
}

.stamp-marquee{
    width:calc(100% + 24px);
    overflow:hidden;
    margin:12px -12px;
    padding:6px 0;
}

.stamp-track{
    display:flex;
    gap:8px;
    width:max-content;
    animation:stamp-scroll 35s linear infinite;
}

.stamp-track img{
    width:99px;
    height:56px;
    flex-shrink:0;
}

@keyframes stamp-scroll{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

.misc-menu{
    position:fixed;
    top:0;
    left:10px;
    z-index:1000;
    font-family:"Creamy", sans-serif;
}

.misc-tab{
    background:#ffd6f5;
    border:3px solid #af8a94;
    border-top:none;
    border-radius:0 0 12px 12px;
    padding:6px 36px;
    color:#7f6a68;
    text-align:center;
    cursor:url("kawaii-help.png"), pointer;
}

.misc-options{
    display:none;
    flex-direction:column;
    background:#ffd6f5;
    border:3px solid #af8a94;
    border-top:none;
    min-width:120px;
}

.misc-options a{
    padding:8px 12px;
    color:white;
    text-align:center;
    text-shadow:-1px 0 #d9bbba, 0 1px #d9bbba, 1px 0 #d9bbba, 0 -1px #d9bbba;
    cursor:url("kawaii-help.png"), pointer;
}

.misc-options a:hover{
    background:white;
    color:#7f6a68;
}

.misc-menu:hover .misc-options{
    display:flex;
}