/*
Background Gradient Color - #974f39, #69142e
Banner Gradient Color - #3c0b10, #69142e
*/

:root {
    --lip-image: url(https://jamzcreativecorner.neocities.org/Images/vector-beauty-seamless-pattern-red-lips-sexy-lip-make-up-sw-sweet-kiss-candy-smile-wallpaper-colorful-illustration-creative-108313581.webp);
}


body {
    margin: 0px;
    padding: 0px;

    background: linear-gradient(to right, #974f39, #69142e);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    overflow-x: hidden;

    font-family: "Patrick Hand", cursive;
    color: whitesmoke;
    cursor: url('https://ani.cursors-4u.net/symbols/sym-8/sym761.png'), auto; 


    h1, h2, h3 {
        font-family: "Beth Ellen", cursive;
        color: whitesmoke;
    }

}

body,
a,
button,
input,
textarea,
select {
    cursor: url('https://ani.cursors-4u.net/symbols/sym-8/sym761.png'), auto;
}

            /* ANIMATED BACKGROUND */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: var(--lip-image);
    opacity: .15;
    pointer-events: none;
    background-size: 600px;
    background-repeat: repeat;
    z-index: -2;
    animation: moveTexture 60s linear infinite;

}

@keyframes moveTexture {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 600px 600px;
    }
}

            /* END ANIMATED BACKGROUND */

            /* LOADING SCREEN */  
.loading-screen {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #69142e;
    
    position: fixed;
    inset: 0;
    z-index: 10;
    animation: fadeOut 1s ease 3s forwards;

    h1 {
    position: absolute;

    color: white;
    font-size: clamp(40px, 8vw, 80px);

    opacity: 0;
    filter: blur(20px);
    transform: translateX(-100px);

    animation: revealName 2s ease forwards;

    z-index: 2;
    }

}

.loading-lips {
    width: min(300px, 70vw);
    height: auto;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 1;
    animation: rotate 10s linear infinite;
}

@keyframes revealName {
    from{
        opacity: 0;
        filter: blur(20px);
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translateX(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        visibility: hidden;
    }
}

            /* END LOADING SCREEN */

            /* Site Wrapper */
.site-wrapper{
        display: grid;
        grid-template-columns: 130px 1fr;
        grid-template-rows: 11dvh 1fr 11dvh;
        background-color: rgba(0,0,0,0.6);
        min-height: 100vh;
        min-width: 62vh;
        overflow-x: hidden;
    }

        /* Header */
header {
    position: relative;
    background-color: black;
    max-height: 11dvh;
    grid-column: span 2 / span 2;

    text-align: center;
    font-family: "Patrick Hand", cursive;
    letter-spacing: 1dvh;
    font-size: clamp(28px, 5vw, 45px);
}

/*
.header-arrow {
    position: absolute;
    top: 66%;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    z-index: 5;
}
*/

    /* End Header */

    /* Footer */

footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2em;

    background-color: black;
    grid-column: span 2 / span 2;

    text-align: center;
    align-items: center;
    font-family: "Patrick Hand", cursive;
    font-size: clamp(14px, 2vw, 10px);
    border-top: 1px solid white;


    .footer-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;

    margin: 8px 0;
}

}

.footer-nav a {
    color: white;
    text-decoration: none;
    transition: .2s ease;
}

.footer-nav a:hover {
    color: pink;
    transform: translateY(-2px);
}

    /* End Footer */

    /* Sticker Bar */

aside {
    border-right: 2px dashed white;
    border-top: 2px dashed white;
    background-color: rgba(0,0,0,0.6);
}

    /* End Sticker Bar */

    /* Main Section */
main {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 2em;
    padding: 1px;
    align-items: center;
    width: clamp(300px, 100vw, 1133px);
    margin-left: 11px;
    flex-wrap: wrap;
}

.left-section {
    width: 29%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

.right-section {
    width: 64%;
    height: auto;
    padding: 10px;
    align-self: center;
    z-index: 1;
    position: relative;
    flex-grow: 1;
}

.main-img {
    width: clamp(250px, 50vw, 269px);
    height: auto;
    border: 10px solid #140303;
    border-radius: 20px;
}

.link-bubbles {
    background-color: #140304;
    width: 14dvh;
    margin: 5px auto;
    padding: 3px;
    border-radius: 50px;
    font-size: clamp(18px, 2vw, 22px);
    text-align: center;
    border-bottom: white solid 2px;
}

.link-bubbles a {
    color: white;
    text-decoration: none;
}

.link-bubbles a:hover {
    text-decoration: underline dotted;
}

.img-caption {
    width: 39dvh;
    text-align: center;
    font-size: 25px;
    -webkit-text-stroke: 1px black;
}

.main-container {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    width: clamp(300px, 40vw, 623px,);
    height: 296px;
    border: 3px dashed white;
    flex-grow: 1;
    padding-top: 2em;
    padding-left: 6em;
    padding-right: 6em;
    padding-bottom: 5em;
    text-align: center;
    overflow-y: auto;
    line-height: 21.6px;
    font-size: clamp(0.5rem, 5vw, 1rem);
}

.hand{
    width: clamp(235px, 15vw, 235px);
    height: auto;
    z-index: 2;
    position: absolute;
    padding: 1px;
}

.hand-left {
    transform: rotate(180deg);
    bottom: 41px;
    left: -110px;
}

.hand-right {
    bottom: 41px;
    right: -110px;
}


/* End Main Section */

/*



.tab-btn {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: 3px dashed white;
    border-radius: 15px 15px 0 0;
    padding: 8px 18px;
    cursor: pointer;
    border-bottom: none;
    transition: all .25s ease;
}

.tabs {
    display: flex;
    flex-direction: row;
    gap: 6px;
    justify-content: center;
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translatex(-50%);
}

.tab-btn:hover {
    background-color: rgba(255,255,255,.15);
    transform: translateY(-2px);
}


.tab-content.active {
    display: block;
    overflow-y: scroll;
}

.tab-content{
    display: none;
}

.tab-btn.active {
    background-color: whitesmoke;
    color: black;
}


            /* Nav Bar */

.banner {
    min-height: 300px;
    width: clamp(100px, 12vw, 160px);

    background: linear-gradient(to right, #3c0b10, #69142e);

    position: absolute;
    top: 75px;
    right: 30px;

    border-radius: 5px;

    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;

    overflow: visible;

    transition: height .3s ease;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 80%, 0% 100%);

    z-index: 5;
}

/* Main Links */

.banner > ul {
    list-style: none;

    margin-top: 20px;
    padding: 0;

    display: flex;
    flex-direction: column;

    justify-content: flex-start;
    align-items: center;

    gap: 5px;
}


.banner a {
    color: white;
    text-decoration: none;
}


.banner a:hover {
    color: black;
}


/* Dropdown Button */

.dropdown-btn {
    background: none;
    border: none;

    color: white;

    cursor: pointer;

    font: inherit;
    padding: 0;
}

.dropdown-btn:hover {
    color: black;
}

/* Selected / Open 
.dropdown-btn.active {
    background: rgba(255,255,255,0.18);
    color: #ffe9f1;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Submenu */

.submenu {
    list-style: none;

    max-height: 0;
    overflow: hidden;

    margin-top: 5px;
    padding: 0;

    background: rgba(0, 0, 0, 0.7);
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
    transition: max-height .3s ease, padding .3s ease;
}


.submenu li {
    margin: 0;
    padding: 0;
}


.submenu a {
    display: block;
    padding: 6px 10px;
    font-size: 14px;
    text-align: center;
}


.submenu.open {
    max-height: 400px;
    padding: 8px 0;
    border: 2px dashed white;
}

/* End Of Nav Bar */

/* Chat Bubble 

.chat-bubble {
    background-image: url(https://jamzcreativecorner.neocities.org/Images/chat%20bubble.png);
    background-size: contain;
    position: absolute;
    width: 69%;
    aspect-ratio: 233 / 201;
    background-repeat: no-repeat;
    top: -11%;
    left: 56%;
    display: flex;
    flex-direction: column;
    gap: 1px;
    justify-content: center;
    align-items: center;
    z-index: 3;
    margin: 0;
}

/* Clipboard 
.clipboard {
    background-image: url(https://jamzcreativecorner.neocities.org/Images/clipboard.png);
    position: fixed;
    bottom: 0px;
    right: -16px;
    width: 250px;
    height: 250px;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 4;
    
        a{
            color: white;
            text-decoration: none;
        }

        ul {
            list-style: disc;
            bottom: 28px;
            right: 10px;
            margin-top: 20px;
            margin-right: 20px;
            padding: 0px;
            display: flex;
            flex-direction: column;
            justify-items: center;
            align-items: center;
            gap: 1px;
            transform: rotate(9deg);
            position: relative;
         }

}
.clipboard a:hover{
    color:black;
    animation: scale(10);
}




/*ANIMATIONS*/

/*Rotating Animation*/
.rotating {
    animation: rotate 10s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/*Pulse Animation*/
.pulse {

animation: pulse 2s ease-in-out infinite;

}
@keyframes pulse {

0%, 100% {
    transform: scale(1);    
}

50% {
    transform: scale(1.08);
}

}

/*Flicker Animation*/
.flicker {
    animation: flicker 2.5s infinite;
}

@keyframes flicker {0%, 19%, 21%, 23%, 25%, 54%, 56%, 100%{
    opacity: 1;
}

20%, 24%, 55% {
    opacity: 0.3;
}

}

/* END OF ANIMATIONS*/

/* STICKER */

.sticker {
    position: absolute;
    cursor: grab;
    user-select: none;
    z-index: 3;
    transition: transform 0.2s ease;

}
    .sticker:hover {
            transform: scale(1.09);
    }

.sticker img {
    display: block;
    pointer-events: none;
}

/* END STICKER */

/* MEDIA */
@media (max-width:1000px){
    .banner,
    aside,
    .sticker {
        display: none;
    }
main {
    grid-column: span 2 / span 2;
    margin: 0px;
}

.site-wrapper {
    min-height: 130vh;
    min-width: 46vh;
}

}

/* =========================
   MOBILE NAVIGATION
   ========================= 

.mobile-nav-toggle {
    display: none;
}


@media (max-width: 1000px) {

    .mobile-nav-toggle {
        display: block;

        position: fixed;
        top: 15px;
        right: 15px;

        width: clamp(55px, 15vw, 75px);
        height: clamp(55px, 15vw, 75px);
        font-size: clamp(50px, 10vw, 50px);

        background: #3c0b10;
        color: white;

        border: 3px dashed white;
        border-radius: 10px;

        font-family: inherit;

        cursor: pointer;

        z-index: 100;
    }


    .banner {
        display: none;

        position: fixed;

        top: 75px;
        right: 15px;

        width: 180px;
        height: auto;

        max-height: calc(100vh - 90px);

        background: linear-gradient(to right, #3c0b10, #69142e);

        border: 3px dashed white;
        border-radius: 10px;

        overflow-y: auto;

        z-index: 99;

        clip-path: none;
    }


    .banner.mobile-open {
        display: flex;
    }


    .banner > ul {
        width: 100%;

        margin: 15px 0;
        padding: 0;

        gap: 8px;
    }


    .banner > ul > li {
        width: 100%;
        text-align: center;
    }


    .banner a,
    .dropdown-btn {
        display: block;

        width: 100%;
        padding: 8px 0;

        box-sizing: border-box;
    }


    .submenu {
        width: 90%;

        margin: 5px auto 0;

        max-height: 0;

        overflow: hidden;

        transition:
            max-height .3s ease,
            padding .3s ease;
    }


    .submenu.open {
        max-height: 500px;
        padding: 8px 0;

        border: 2px dashed white;
    }

}