@import url('https://fonts.googleapis.com/css?family=Kanit:900');
@import url('https://fonts.googleapis.com/css?family=Cookie');
@import url('https://fonts.googleapis.com/css?family=Black+Ops+One');
@import url('https://fonts.googleapis.com/css?family=Cinzel+Decorative');
@import url('https://fonts.googleapis.com/css?family=Arizonia');
@import url('https://fonts.googleapis.com/css?family=Rubik+Pixels');
@import url('https://fonts.googleapis.com/css?family=Pacifico');
@import url('https://fonts.googleapis.com/css?family=Mitr');
@import url('https://fonts.googleapis.com/css?family=Mynerve');
@import url('https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap');

@import url('https://fonts.googleapis.com/css?family=Comfortaa');




:root {

    --navPadding: 16px;
    --navFontSize: 100%;

    /*animations*/

    --startPoint: 0%;
    --finishPoint: 0%;

    --rotationX: 0deg;
    --rotationY: 0deg;
    --rotationZ: 0deg;

    --object-fontSize: 110%;

    --imgBottomBorder: 90px;


    --profileToDrag: -450px;

    --infoRight: -25vw;

    --mainColor: #ff49e1;
    --secondaryColor: #8d00b57a;
    --terciaryColor: #302;

    --sideEls: 25vw;
    

}


body {

    background-color: #000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='dark-grey' stroke-width='0'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23670000'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 200px 200px, 200px 200px, 40px 40px, 40px 40px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
    
    max-width: 600px;

    margin: auto;
    overflow-x: hidden;

    position: relative;
    left: 1px;

}

@keyframes pan {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 0% 1200px;
    }
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border-radius: 10px;
    padding: 5px;
    margin: 0;
}

nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    padding: 0;
    margin: 0;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

nav ul::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

nav ul li {
    flex: 0 0 auto;
}

nav ul li a {
    display: inline-block;
    padding: 8px 16px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    font-family: "Comfortaa";
    background-color: #ff45d8;
    border-radius: 10px;
    border: 2px solid #000000;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    white-space: nowrap;
}

nav ul li a:hover {
    background-color: #ff86e3;
    transform: scale(1.1);
    box-shadow: 0 0 20px #ff45d8;
}

nav ul li a:active {
    background-color: #d600b3;
    transform: scale(0.95);
}

@media (max-width: 600px) {
    nav ul {
        gap: 3px;
    }
    
    nav ul li a {
        padding: 6px 12px;
        font-size: 0.9rem;
    }
}

@media (max-width: 400px) {
    nav ul li a {
        padding: 4px 8px;
        font-size: 0.8rem;
    }
}

.navDrawer{

    position: fixed;
    display: flex;
    justify-content: right;
    width: 90%;
    height: 80%;
    gap: 25px;
    top: 55px; 
    left: -100%; 
    z-index: 99999; 
    border: none; 
    outline: none; 
    background-color: #000;
    color: white; 
    
    padding: 15px; 
    border-radius: 10px; 
    font-size: 18px;
    font-family: "Comfortaa";
    border: 3px solid #000000;
    transition: all 0.5s ease-in-out;
}

.site-name {
position: relative;
display: flex;
justify-content: center;
align-items: center;

font-family: "Kanit";
top: 3%;
left: auto;
font-size: 230%;
color:rgb(255, 255, 255);

transition: all 1s ease-in-out;

}

.site-name:hover{
    transition: all 0.2s ease-in-out;
    text-shadow: 0 0 15px #ff0000;
    
}

.site-name:active{
    animation: fontTrans 10s;
}

@keyframes fontTrans{
    0% {font-family: 'Cookie';}
    10% {font-family: 'Black Ops One';}
    20% {font-family: 'Cinzel Decorative';}
    30% {font-family: 'Arizonia';}
    40% {font-family: 'Cookie';}
    50% {font-family: 'Pacifico';}
    60% {font-family: 'Mitr';}
    70% {font-family: 'Mynerve';}
    80% {font-family: 'Black Ops One';}
    90% {font-family: 'Arizonia';}
    100% {font-family: 'Cookie';}

}


.neon-sign {
    font-family: 'Tilt Neon', sans-serif;
    font-size: 40px;
    color: #ff0000;
    text-shadow: 
        0 0 7px #ff0000,
        0 0 14px #ff0000,
        0 0 21px #ff0000,
        0 0 42px #ff6666;
    animation: 
        blink 10s infinite alternate,
        flicker 10s infinite;
    will-change: filter, text-shadow;
}

@keyframes blink {
    0%, 100% {
        color: #ff0000;
        text-shadow: 
            0 0 7px #ff0000,
            0 0 14px #ff0000,
            0 0 21px #ff0000,
            0 0 42px #ff6666;
    }
    50% {
        color: #cc00ff;
        text-shadow: 
            0 0 7px #cc00ff,
            0 0 14px #cc00ff,
            0 0 21px #cc00ff,
            0 0 42px #ff66ff;
    }
}

@keyframes flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        opacity: 1;
    }
    20%, 24%, 55% {
        opacity: 0.85;
    }
}

.hidden {
    visibility: hidden;
}

.profileDrawer{

    position: fixed;
    display: flex;
    justify-content: space-between;
    max-width: 550px;
    width: 90%;
    height: 96px;
    /* gap: 25px; */
    top: 55px; 
    right: var(--profileToDrag); /* -450px desk -75vw mob*/
    z-index: 99999; 
    outline: none; 

    background-color: var(--mainColor);

    color: white; 
    
    padding: 15px; 
    border-radius: 10px; 
    font-size: 18px;
    font-family: "Comfortaa";
    border: 3px solid #000000;
    transition: all 0.3s ease-in-out;
}

.profileSettings{

    position: absolute;
    top: 105%;
    left: 50%;
    height: 96px;
    width: 96px;
    display: flex;
    align-items:center;
    justify-content:center;

    background-color: #000;
    color: white; 

    cursor: pointer;

    padding: 15px; 
    border-radius: 10px; 
    font-size: 18px;
    font-family: "Comfortaa";
    border: 3px solid #f3ddff;

    
}

.profileSettings:hover{
    background-color: #220b23;
}

.profileSaved{

    position: absolute;
    top: 213%;
    left: 50%;
    height: 96px;
    width: 96px;
    display: flex;
    align-items:center;
    justify-content:center;

    background-color: #000;
    color: white; 

    cursor: pointer;

    padding: 15px; 
    border-radius: 10px; 
    font-size: 18px;
    font-family: "Comfortaa";
    border: 3px solid #f3ddff;

    
}

.profileSaved:hover{
    background-color: #220b23;
}

.logout-button{

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

    width: 70px;
    height: 35px;

    background-color: #000;
    color: white; 

    cursor: pointer;

    border-radius: 10px; 
    font-size: 18px;
    font-family: "Comfortaa";
    border: 3px solid #f3ddff;
    
}

.logout-button:hover{
    background-color: #220b23;
}

.profile-button{

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

    position:relative; 
    top: 25%;

    width: 100%;
    height: 50%;

    background-color: #000;
    color: white; 

    cursor: pointer;

    border-radius: 10px; 
    font-size: 18px;
    font-family: "Comfortaa";
    border: 3px solid #f3ddff;
    
}

.profile-button:hover{
    background-color: #220b23;
}

@keyframes saving{

    10% {background-color: #5100ff;}

    90% {background-color: #00ff00;}


}


.settings{
    position: fixed;
    display: flex;
    justify-content: space-between;
    max-width: 550px;
    width: 90%;
    height: 96px;
    gap: 25px;
    top: 190px; 
    right: -100%; 
    z-index: 99999; 
    outline: none; 
    background-color: #000;
    color: white; 
    
    padding: 15px; 
    border-radius: 10px; 
    font-size: 18px;
    font-family: "Comfortaa";
    border: 3px solid #f3ddff;
    transition: all 0.3s ease-in-out;
}

.saved{
    position: fixed;
    display: flex;
    justify-content: space-between;
    max-width: 550px;
    width: 90%;
    height: 96px;
    gap: 25px;
    top: 326px; 
    right: -100%; 
    z-index: 99999; 
    outline: none; 
    background-color: #000;
    color: white; 
    
    padding: 15px; 
    border-radius: 10px; 
    font-size: 18px;
    font-family: "Comfortaa";
    border: 3px solid #f3ddff;
    transition: all 0.3s ease-in-out;
}

.presets{
    position: fixed;
    display: flex;
    justify-content: space-between;
    max-width: 550px;
    width: 90%;
    height: 96px;
    gap: 25px;
    top: 460px; 
    right: -100%; 
    z-index: 99999; 
    outline: none; 
    background-color: #000;
    color: white; 
    
    padding: 15px; 
    border-radius: 10px; 
    font-size: 18px;
    font-family: "Comfortaa";
    border: 3px solid #f3ddff;
    transition: all 0.3s ease-in-out;

    overflow-x: scroll;
}

.site-name-link{
color:inherit;
text-decoration: none;
}



.language{
justify-content: space-between;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;


}

.language-options{
list-style: none;
display: flex;  
gap: 2px;
visibility: hidden;
height: 0px;

}

.language-op{
padding: var(--navPadding);
font-size: var(--navFontSize);
color: white;
text-decoration: none;
font-family: "Comfortaa";
background-color: var(--secondaryColor);
transition: all 0.3s ease-in;
border-radius: 10px;
cursor: pointer;
border: 3px solid #000000;
text-shadow: 0 0 4px #48ff00a8;
}

.language-op:hover {
background-color: #333;
box-shadow: 1px 1px 30px rgb(255, 255, 255);
transition: all 1s;
transform: scale(1.5);

}

.language-op:active {
background-color: rgb(255, 0, 0);
}

/* Reverse toggle styles */
.toggle-reverse {
    cursor: pointer;
}

.toggle-switch-reverse {
    display: inline-block;
    background: #fff6;
    border: 2px solid #000000;
    border-radius: 16px;
    width: 58px;
    height: 32px;
    position: relative;
    vertical-align: middle;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.toggle-switch-reverse:before {
    content: "";
    display: block;
    background: linear-gradient(145deg, #fff 0%, #eee 100%);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    width: 24px;
    height: 24px;
    position: absolute;
    top: 4px;
    left: 4px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.toggle-reverse:hover .toggle-switch-reverse:before {
    background: linear-gradient(145deg, #fff 0%, #fff 100%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transform: scale(1.1);
}

.toggle-checkbox-reverse:checked + .toggle-switch-reverse {
    background: var(--mainColor);
}

.toggle-checkbox-reverse:checked + .toggle-switch-reverse:before {
    left: 30px;
    transform: rotate(-360deg);
}

.toggle-checkbox-reverse {
    position: absolute;
    visibility: hidden;
}

.toggle-label-reverse {
    margin-left: 8px;
    position: relative;
    top: 2px;
    transition: all 0.3s ease;
}

.supporter-message{
display: flex;
justify-content: center;
align-items: center;
color:#ffffff;
font-family: "Comfortaa";
}

.guide-text{

display: flex;
justify-content: center;
align-items: center;
position: relative;

width: 98%;
/* height: ; */
height: 0%;
text-align: center;
color: #ffffff;
/* font-size: 450%; */
font-size: 0%;
font-family: "Comfortaa";
text-shadow: 0 0 4px #ff0000;
background-color: var(--secondaryColor);
/* border: 3px solid #000000; */
border: 0px solid #000000;
border-bottom: 0;
border-radius: 10px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
box-shadow: 5px 5px 10px #66008fde;

}

.guide-text:hover{
transition: all 1s;
transform: scale(1.1);
text-shadow: 0 0 40px #ff0000;
}


.box {

position: relative;


top: 1%;

width: 98%;
height: 50%;
max-height: 0vh;
background-color: var(--secondaryColor);
border: 0px solid #000000;
border-top: 0;
border-radius: 10px;
border-top-right-radius: 0;
border-top-left-radius: 0;
box-shadow: 5px 5px 10px #66008fde;

overflow-y: scroll;
overflow-x: hidden;

}

.box::-webkit-scrollbar-track {
border: 3px solid #000000;
padding: 2px 0;
background-color: #2f00ff48;
border-radius: 10px;
}

.box::-webkit-scrollbar {
width: 40px;
}

.box::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.822);
background-color: #4b1550;
border: 1px solid #000000;
}


.row{
display:flex;
justify-content: space-around;
align-items: center;
height: 10vh;
width: 80%;
transform: translate(13%, -100%);
}

.object{
position: relative;
background-color: var(--terciaryColor);
width: 80px;
height: 80px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;

cursor: pointer;

text-align: center;
font-family: 'Comfortaa';
color: rgb(255, 255, 255);
font-size: var(--object-fontSize); 
border: 2px solid #000000;
text-shadow: 0 0 4px #0400ff;
z-index: 0;

}

.object:hover{
transition: all 1s;
transform: scale(2);
background-color: #bd5fff;
box-shadow: 1px 1px 50px #ccc;
border-radius: 30px;
z-index: 9000;

}

.object:hover:active{
background-color: #ff7979;
}


.control-prev{
position:sticky;

top: 30%;
left: 2%;

width: 9%;
height: 13%;
background-color: var(--mainColor);
border-radius: 10px;

cursor: pointer;

display: flex;
justify-content: center;
align-items: center;
font-size: 300%;
color: #ffffff;
border: 2px solid #000000;
text-shadow: 0 0 10px #ff0000;

z-index: 1000;
}

.control-prev:hover{
transition: all 1s;
left: -2%;
}

.control-next{
position:sticky;

top: 30%;
left: 89%;

width: 9%;
height: 13%;
background-color: var(--mainColor);
border-radius: 10px;

cursor: pointer;

display: flex;
justify-content: center;
align-items: center;
font-size: 300%;
color: #ffffff;
border: 2px solid #000000;
text-shadow: 0 0 10px #ff0000;

z-index: 1000;

}

.control-next:hover{
transition: all 1s linear;
left: 100%;
}

.input-field{
position: relative;

width: 80%;
left: 5%;
height: 25px;

background-color: rgba(255, 255, 255, 0.226);
border: 3px solid #00000042;
border-radius: 8px;
font-size: 100%;
color: rgb(0, 0, 0);
font-family: 'Comfortaa';

text-align: center;
}

.word-list {
display: none;
position: absolute;
background-color: rgba(255, 255, 255, 0.829);
border: 3px solid rgb(0, 0, 0);
z-index: 1;
max-height: 200px;
overflow-y: auto;
border-radius: 8px;
font-family: 'Comfortaa';
left: 50%;
transform: translateX(-50%);
cursor: pointer;

}

.sizeButtonDisplay{
    position: relative;
    left: 28%;
    font-family: 'Comfortaa';
    text-align: center;
    font-size: 110%;
    background-color: var(--terciaryColor);
    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 10px;

    color: rgb(255, 255, 255);

    transition: all 1s;

    border: 3px solid #000000;
    text-shadow: 0 0 4px #eeff00a9;
}
.sizeButtonDisplay:hover{
    transition: all 1s;
    font-size: 350%;

}
.sizeButtonDisplayMob{
    position: relative;
    left: 25%;
    top: 4%;
    scale: 0.8;
    font-family: 'Comfortaa';
    text-align: center;
    font-size: 110%;
    background-color: var(--terciaryColor);
    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 10px;

    color: rgb(255, 255, 255);

    transition: all 1s;

    border: 3px solid #000000;
    text-shadow: 0 0 4px #eeff00a9;
}

.scrollmenu{
    background-color: var(--secondaryColor);
    border: 3px solid #000000;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: 'Comfortaa';
    color: rgb(255, 255, 255);
    transition: all 1s linear;
    z-index: 0;
    width: 98%;
}

.modelsContainer{
    background-color: none;
    border: 3px solid #000000;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: 'Comfortaa';
    color: rgb(255, 255, 255);
    transition: all 1s linear;
    z-index: 0;
    width: 98%;
}

.scrollmenu:hover{
    z-index: 9999;
}

.imagemenu{
    background-color: var(--secondaryColor);
    border: 3px solid #000000;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    gap: 1px;
    text-align: center;
    font-family: 'Comfortaa';
    color: rgb(255, 255, 255);
    transition: all 1s linear;
    z-index: 0;
    width: 98%;

}

.subobjs {
    position: relative;
    background-color: var(--terciaryColor);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-align: center;
    font-family: 'Comfortaa';
    color: rgb(255, 255, 255);
    transition: all 1s;
    border: 3px solid #000000;
    text-shadow: 0 0 4px #eeff00a9;
}

.subobjs:hover {
    transition: all 1s;
    font-size: 150%;
    background-color: #2c1dff;
    border-radius: 30px;
    z-index: 99999;
    animation: bouncy 0.5s 1;
}

.slider{
    cursor: pointer;
    accent-color: var(--mainColor);
}

.size-field {

width: 50%;
height: 35px;

background-color: var(---terciaryColor);
border: 2px solid #000000;
border-radius: 10px;
color: rgb(255, 255, 255);
font-family: 'Comfortaa';

text-align: center;

/*hide scroll bar*/
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */

text-shadow: 0 0 4px #ffffff;
}

.pin{
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    z-index: 9999999;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.pin:hover{
    background-color: #5b1d5d;
}

.form-field{
position: relative;
top: 5%;
}

.text-field-link {

    position: relative;

    width: 50%;
    height: 35px;
    
    background-color: var(--terciaryColor);
    border: 2px solid #000000;
    border-radius: 10px;
    font-size: 150%;
    color: rgb(255, 255, 255);
    font-family: 'Comfortaa';

    text-align: center;

    /*hide scroll bar*/
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */

    text-shadow: 0 0 4px #ffffff;
}

.text-field {

position: relative;

width: 97.2%;
height: 200px;

background-color: rgba(0, 0, 0, 0.9);
border: 2px solid rgb(243, 221, 255);
border-radius: 10px;
font-size: 150%;
color: rgb(255, 255, 255);
font-family: 'Comfortaa';

text-align: center;

/*hide scroll bar*/
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */

text-shadow: 0 0 4px #ffffff;
}

.text-field::-webkit-scrollbar{
display: none; /* Chrome */
}

#prompt-container { position: relative; width: 97.2%; }
textarea.text-field {
    width: 100%;
    height: 200px;
    background-color: rgba(0,0,0,0.9);
    border: 2px solid rgb(243,221,255);
    border-radius: 10px;
    font-size: 150%;
    color: rgb(255,255,255);
    font-family: 'Comfortaa', sans-serif;
    overflow: auto;
    position: relative;
    z-index: 1;
}
/* mirror sits atop textarea for measurement, invisible */
#mirror {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    visibility: hidden;
    z-index: 2;
    box-sizing: border-box;
}
.keyword {
    display: inline-block;
}
.slider-popup {
    position: absolute;
    background: #8d00b5e5;
    border: 1px solid #000000;
    color: #fff;
    font-family: 'Comfortaa';
    accent-color: var(--mainColor);
    border-radius: 6px;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    display: none;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    z-index: 3;
}
.slider-popup input[type=range] { width: 120px; }
.slider-popup .close-btn { cursor: pointer; background: transparent; border: none; color: #fff; }


#suggestionsContainer {
    position: relative;
    top: -10%;
}

#suggestionsList {
position: absolute;
background-color: #28002B;
color: #ffffff;
border: 3px solid #000000;
font-family: "Comfortaa";
list-style-type: none;
padding: 0;
margin: 0;
z-index: 2;
width: 50%;
}

#suggestionsList li {
padding: 4px;
cursor: pointer;
border: 1px solid #000000;
}

#suggestionsList li:hover {
background-color: #000000;
}

.button1 {


background: transparent;
color: #fff;


box-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #c443ff,
    0 0 82px #c443ff,
    0 0 92px #c443ff,
    0 0 102px #c443ff,
    0 0 151px #c443ff;


--width: 150px;
--height: calc(var(--width) / 1);
width: var(--width);
height: var(--height);
text-align: center;
font-size: calc(var(--height) / 6.4);
font-family: "Comfortaa";

letter-spacing: 0;
border: 1px solid #ffffff;
border-radius: 100%;

transform:  scale(1.2);


transition: all 0.5s;
overflow: hidden;

cursor:pointer;

}

.button1:hover {
    transform:  scale(1.8);
    animation: fontTrans 6s infinite;
    backdrop-filter: saturate(5);

}


.string-size {
position: relative;
left: 25%;

color: rgb(255, 255, 255);
font-size: 150%;
font-family: "Kanit";

display: flex;
justify-content: center;
align-items: center;
}

.string-size:hover{
transition: all 1s;
transform: scale(2);
}

.floating-image {
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
    opacity: 0.3;
    border: 2px solid rgba(159, 62, 168, 0.3);
    border-radius: 8px;
    width: 100px;
    height: 100px;
    position: fixed;
    top: -150px;
    pointer-events: none;
    z-index: -1000;
    filter: blur(1px);
    }

@keyframes floatFall {
0% {
    top: -150px;
    transform: rotate(0deg) scale(var(--scale));
    opacity: 0;
}
10% {
    opacity: 0.3;
}
90% {
    opacity: 0.3;
}
100% {
    top: 100vh;
    transform: rotate(360deg) scale(var(--scale));
    opacity: 0;
}
}

@keyframes blink {
0% {
    opacity: 1;
}
1%{
    opacity: 0;
}
50% {
    opacity: 1;
}
54%{
    opacity: 0;
}
59% {
    opacity: 1;
}
61%{
    opacity: 0;
}
100% {
    opacity: 1;
}
}

@keyframes appear {
    from {

        scale: 0.1;
        background-color: purple;


    }

    to {
        
        scale: 1;
        background-color: transparent;

    }
}

.iframeholder{
    display: flex;
    justify-content: center;
    /* resize: both;
    overflow: auto; */
    
    
    width: 99.4%;

    animation: appear 1s ;
    
    transition: all 0.3s ease-in-out;

    margin-bottom: 0;
    
}

.iframeholder iframe{
    transition: all 0.5s ease-in-out;
    
    /* backdrop-filter: hue-rotate(180deg); */
    
}


.iframeholder iframe:hover{
    transition: all 1s ease-in-out;
    background-color: black;
    box-shadow: 0 0 30px var(--secondaryColor);;
}

.iframeholder iframe:active{
    transition: all 1s ease-in-out;
    background-color: black;
    box-shadow: 0 0 30px var(--secondaryColor);;
}


.optionsFrame{
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 80%;
    left: 10%;
    

    animation: appear 1s ;
}


.numberLabel{
    position: relative;
    border: 3px solid #000000;
    border-top: 0%;
    outline: none; 
    background-color: var(--terciaryColor);
    color: white; 
    padding: 15px; 
    border-radius: 0px 0px 10px 10px; 
    font-size: 15px;
    font-family: "Comfortaa";
    max-width: 25%;
    text-align: center;
    margin: 0 auto;
    mask: conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/60px 100%
}

.editButton {

    position: relative;
    border: none; 
    outline: none; 
    background-color: var(--mainColor);
    color: white; 
    cursor: pointer; 
    padding: 15px; 
    border-radius: 0px 0px 10px 10px; 
    font-size: 20px;
    font-family: "Comfortaa";
    max-width: 15%;
    text-align: center;
    margin: 0 auto;
    width: 50%;
}

.editButton:hover {
    background-color: #220b23; 
    animation: bouncy 0.5s 1;
}

.redoButton {

    position: relative;
    border: 3px solid #000000;
    border-top: 0%;
    outline: none; 
    background-color: var(--mainColor);
    color: white; 
    cursor: pointer; 
    padding: 15px; 
    border-radius: 0px 0px 10px 10px; 
    font-size: 20px;
    font-family: "Comfortaa";
    max-width: 35%;
    text-align: center;
    margin: 0 auto;
    width: 50%;
}

.redoButton:hover {
    background-color: #220b23; 
    animation: bouncy 0.5s 1;
}

.redo1minButton {

    position: absolute;
    border: 3px solid #000000;
    border-top: 0%;
    background-color: #932e97;
    color: white;
    cursor: pointer;
    border-radius: 10px 10px 0px 0px;
    font-family: "Comfortaa";
    text-align: center;
    margin: 0 auto;
    width: 75%;
    left: 12%;
    height: 20%;
    font-size: 10px;
}



.infoButton {

    position: relative;
    border: 3px solid #000000;
    border-top: 0%;
    outline: none; 
    background-color: var(--mainColor);
    color: white; 
    cursor: pointer; 
    padding: 15px; 
    border-radius: 0px 0px 10px 10px; 
    font-size: 20px;
    font-family: "Comfortaa";
    max-width: 35%;
    text-align: center;
    margin: 0 auto;
    width: 70%;
    transition: all 0.5s;
}

/* .infoButton:hover {
    background-color: #220b23; 
    animation: bouncy 0.5s 1;
} */

.infoData {
    display: none;
    position: static;
    border: none;
    outline: none; 
    background-color: var(--terciaryColor);
    color: white; 
    padding: 5px; 
    font-size: 20px;
    font-family: "Comfortaa";
    text-align: left;
    margin: 0 auto;
    width: 95%;
    white-space: pre-wrap;
    /* overflow-break-word; */
    font-size: 70%;
    border-radius: 10px;
    pointer-events: auto;
    word-break: break-all;
}

.infoBF {
    display: none;
    position: static;
    border: none;
    outline: none; 
    background-color: var(--secondaryColor);
    text-align: center;
    color: white; 
    padding: 5px; 
    font-size: 20px;
    font-family: "Comfortaa";
    margin: 0 auto;
    width: 50%;
    white-space: pre-wrap;
    /* overflow-break-word; */
    font-size: 70%;
    border-radius: 10px;
    pointer-events: initial;
}

.saveButton {

    position: relative;
    border: none; 
    outline: none; 
    background-color: var(--mainColor);
    color: white; 
    cursor: pointer; 
    padding: 15px; 
    border-radius: 0px 0px 10px 10px; 
    font-size: 20px;
    font-family: "Comfortaa";
    max-width: 15%;
    text-align: center;
    margin: 0 auto;
    width: 50%;
}

.saveButton:hover {
    background-color: #220b23; 
    animation: bouncy 0.5s 1;
}


.closeButton {

    position: relative;
    border: 3px solid #000000;
    border-top: 0%;
    outline: none; 
    background-color: var(--mainColor);
    color: white; 
    cursor: pointer; 
    padding: 15px; 
    border-radius: 0px 0px 10px 10px; 
    font-size: 15px;
    font-family: "Comfortaa";
    max-width: 25%;
    text-align: center;
    margin: 0 auto;
}

.closeButton:hover {
    background-color: #220b23; 
    animation: bouncy 0.5s 1;
}

.eraseButton {

    position: relative;
    border: 3px solid #000000; 
    border-top: 0%;
    outline: none; 
    background-color: var(--mainColor);
    color: white; 
    cursor: pointer; 
    padding: 15px; 
    border-radius: 0px 0px 10px 10px; 
    font-size: 15px;
    font-family: "Comfortaa";
    max-width: 25%;
    text-align: center;
    margin: 0 auto;
    background-color: darkred; 

}

.eraseButton:hover {
    background-color: red; 
    animation: bouncy 0.5s 1;
}

.openOutside {

    position: relative;
    border: 3px solid #000000; 
    color: #fff;
    border-top: 0%;
    cursor: pointer; 
    border-radius: 0px 0px 10px 10px; 
    font-size: 10px;
    font-family: "Comfortaa";
    max-width: 25%;
    text-align: center;
    margin: 0 auto;
    height: 15px;

}

/* .openOutside:hover {
    background-color: #220b23;
    animation: bouncy 0.5s 1;
} */

.openInWindow {

    position: relative;
    border-top: 0%;
    cursor: pointer; 
    border-radius: 0px 0px 10px 10px; 
    font-family: "Comfortaa";
    text-align: center;
    margin: 0 auto;
    color: #fff;

    display: none;

}

.openInWindow:hover {
    background-color: #220b23;
    animation: bouncy 0.5s 1;
}

.openInTab {

    position: relative;
    border-top: 0%;
    cursor: pointer; 
    border-radius: 0px 0px 10px 10px; 
    font-family: "Comfortaa";
    text-align: center;
    margin: 0 auto;

    display: none;

}

.openInTab:hover {
    background-color: #220b23;
    animation: bouncy 0.5s 1;
}





.queuePage{
    max-width: 100%;
    max-height: 100%;
    width: 99%;
    height: 600px;
    background-color: transparent;
    border: 3px solid #000000;
    border-radius: 10px;
    margin: 0 auto;
}



@keyframes appearFromRight{
    from{
        right: -200px;
    }

    to{
        right: 30px;
    }
}

.CornerGenerate {
    display: none; 
    position: fixed;
    bottom: 5px; 
    right: 30px; 
    z-index: 99999; 
    outline: none; 
    background-color: var(--mainColor);
    color: white; 
    cursor: pointer; 
    padding: 15px; 
    border-radius: 10px; 
    font-size: 18px;
    font-family: "Comfortaa";
    border: 3px solid #000000;
    animation: appearFromRight .5s ease-in-out;
}

.CornerGenerate:hover {
    transition: all 1s;

    background: transparent;
    text-align: center;

    background: transparent;
    color: #fff;

    box-shadow:
        0 0 7px #fff,
        0 0 10px #fff,
        0 0 21px #fff,
        0 0 42px #c443ff,
        0 0 82px #c443ff,
        0 0 92px #c443ff,
        0 0 102px #c443ff,
        0 0 151px #c443ff;
    border: 1px solid #ffffff;
    border-radius: 25px;

    transform:  scale(1.2); 
    
    z-index: 999990;

    /* animation: bouncy 0.5s 1; */

}

.CornerGenerate:active {
    scale: 1.2;
}




.TopButton {
    display: none; 
    position: fixed;
    bottom: 65px; 
    right: 30px; 
    z-index: 99999; 
    outline: none; 
    background-color: var(--mainColor);
    color: white; 
    cursor: pointer; 
    padding: 13px; 
    border-radius: 10px; 
    font-size: 13px;
    font-family: "Comfortaa";
    border: 3px solid #000000;
    animation: appearFromRight .6s ease-in;
}

.TopButton:hover {
    transition: all 1s;
    background-color: #220b23;

    bottom: 70px;
    /* animation: bouncy 0.5s 1; */
}

#installContainer {
    position: fixed;
    bottom: 70px;
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 1000000;
    scale: 0.5;
}

#installContainer button {
    background-color: var(--mainColor);
    border: 3px solid rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    font-size: 1em;
    padding: 0.75em;
    border-radius: 10px;

    cursor: pointer;
}

.dropzone{
    display: flex;                
    justify-content: center;
    align-items: center;

    z-index: 1;
    box-sizing: border-box;
    width: 102%;
    height: 40px;
    left: 25vh;
    table-layout: fixed;
    border: 1px dashed #A4A4A4;
    border-radius: 3px;
    text-align: center;
    overflow: hidden;
}

.is-dragover{
    background-color: #333;
}


.imageInput {
    position: relative;
    top: -10%;

    z-index: 2;
    box-sizing: border-box;
    width: 120%;
    height: 100px;
    table-layout: fixed;
    border: 1px dashed #A4A4A4;
    border-radius: 3px;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    
}

.dragDropOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99000;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'Comfortaa';
    font-size: 64px;
}

.dragDropOverlayFrame {
    border: 4px dashed white;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
}

.drawingCanvasContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--secondaryColor);
    border: 3px solid #000000;
    border-radius: 10px;
    font-family: 'Comfortaa';
    text-align: center;
    color: rgb(255, 255, 255);
    transition: all 1s linear;
    width: 98%;
    
}

.drcanvas {
    border: 3px solid #000000;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    touch-action: none; /* Prevent default touch actions */

}

.controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.color-picker, .brush-size, .brush-opacity, .tools, .image-upload {
    display: flex;
    align-items: center;
    gap: 5px;
}

#tools{
    padding: 10px;
    border: none;
    cursor: pointer;
}

#undoBtn:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.bg-colorfilter{
    background: rgb(200,200,200);
    background: linear-gradient(0deg, rgba(10,0,10,1) 0%, rgba(201,29,29,1) 94%, rgba(201,29,29,1) 97%);

    position:fixed;
    width: 100%;
    height: 100%;
    z-index: -9999999;

}

.historyheight{height: 170px;text-align: center;align-items: center; white-space: nowrap;}


/* HAMSTER */

.wheel-and-hamster {
--dur: 1s;
position: fixed;
bottom: 5px; 
right: 200px; 

width: 12em;
height: 12em;
font-size: 14px;
}

.wheel,
.hamster,
.hamster div,
.spoke {
position: absolute;
}

.wheel,
.spoke {
border-radius: 50%;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.wheel {
background: radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,60%) 48%);
z-index: 2;
}

.hamster {
animation: hamster var(--dur) ease-in-out infinite;
top: 50%;
left: calc(50% - 3.5em);
width: 7em;
height: 3.75em;
transform: rotate(4deg) translate(-0.8em,1.85em);
transform-origin: 50% 0;
z-index: 1;
}

.hamster__head {
animation: hamsterHead var(--dur) ease-in-out infinite;
background: hsl(30,90%,55%);
border-radius: 70% 30% 0 100% / 40% 25% 25% 60%;
box-shadow: 0 -0.25em 0 hsl(30,90%,80%) inset,
        0.75em -1.55em 0 hsl(30,90%,90%) inset;
top: 0;
left: -2em;
width: 2.75em;
height: 2.5em;
transform-origin: 100% 50%;
}

.hamster__ear {
animation: hamsterEar var(--dur) ease-in-out infinite;
background: hsl(0,90%,85%);
border-radius: 50%;
box-shadow: -0.25em 0 hsl(30,90%,55%) inset;
top: -0.25em;
right: -0.25em;
width: 0.75em;
height: 0.75em;
transform-origin: 50% 75%;
}

.hamster__eye {
animation: hamsterEye var(--dur) linear infinite;
background-color: hsl(0,0%,0%);
border-radius: 50%;
top: 0.375em;
left: 1.25em;
width: 0.5em;
height: 0.5em;
}

.hamster__nose {
background: hsl(0,90%,75%);
border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%;
top: 0.75em;
left: 0;
width: 0.2em;
height: 0.25em;
}

.hamster__body {
animation: hamsterBody var(--dur) ease-in-out infinite;
background: hsl(30,90%,90%);
border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%;
box-shadow: 0.1em 0.75em 0 hsl(30,90%,55%) inset,
        0.15em -0.5em 0 hsl(30,90%,80%) inset;
top: 0.25em;
left: 2em;
width: 4.5em;
height: 3em;
transform-origin: 17% 50%;
transform-style: preserve-3d;
}

.hamster__limb--fr,
.hamster__limb--fl {
clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%);
top: 2em;
left: 0.5em;
width: 1em;
height: 1.5em;
transform-origin: 50% 0;
}

.hamster__limb--fr {
animation: hamsterFRLimb var(--dur) linear infinite;
background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%);
transform: rotate(15deg) translateZ(-1px);
}

.hamster__limb--fl {
animation: hamsterFLLimb var(--dur) linear infinite;
background: linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%);
transform: rotate(15deg);
}

.hamster__limb--br,
.hamster__limb--bl {
border-radius: 0.75em 0.75em 0 0;
clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%);
top: 1em;
left: 2.8em;
width: 1.5em;
height: 2.5em;
transform-origin: 50% 30%;
}

.hamster__limb--br {
animation: hamsterBRLimb var(--dur) linear infinite;
background: linear-gradient(hsl(30,90%,80%) 90%,hsl(0,90%,75%) 90%);
transform: rotate(-25deg) translateZ(-1px);
}

.hamster__limb--bl {
animation: hamsterBLLimb var(--dur) linear infinite;
background: linear-gradient(hsl(30,90%,90%) 90%,hsl(0,90%,85%) 90%);
transform: rotate(-25deg);
}

.hamster__tail {
animation: hamsterTail var(--dur) linear infinite;
background: hsl(0,90%,85%);
border-radius: 0.25em 50% 50% 0.25em;
box-shadow: 0 -0.2em 0 hsl(0,90%,75%) inset;
top: 1.5em;
right: -0.5em;
width: 1em;
height: 0.5em;
transform: rotate(30deg) translateZ(-1px);
transform-origin: 0.25em 0.25em;
}

.spoke {
animation: spoke var(--dur) linear infinite;
background: radial-gradient(100% 100% at center,hsl(0,0%,60%) 4.8%,hsla(0,0%,60%,0) 5%),
        linear-gradient(hsla(0,0%,55%,0) 46.9%,hsl(0,0%,65%) 47% 52.9%,hsla(0,0%,65%,0) 53%) 50% 50% / 99% 99% no-repeat;
}

.rp-container {
    height: 100%;
    font-family: 'Comfortaa', cursive;
    padding: 15px;
    border-radius: 10px;
    width: 92%;
    background-color: rgba(0, 0, 0, 0.9);
    border: 3px solid rgb(243, 221, 255);
    color: #ffffff;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}

.rp-control-group {
    margin-bottom: 15px;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.rp-control-label {
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}

.rp-control-input {
    width: 80px;
    padding: 8px 12px;
    border: 2px solid #000000;
    border-radius: 10px;
    font-family: 'Comfortaa';
    font-size: 14px;
    transition: all 0.2s ease;
    background-color: var(--secondaryColor);
    color: #ffffff;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}

.rp-control-input:focus {
    border-color: #8d00b5;
    outline: none;
    box-shadow: 0 0 0 3px rgba(141, 0, 181, 0.3);
}

.rp-grid-wrapper {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.rp-bento-grid {
    width: 96.5%;
    height: 500px;
    background: var(--secondaryColor);
    border-radius: 10px;
    padding: 8px;
    display: grid;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.5);
    border: 2px solid #000000;
}

.rp-grid-cell {
    background: rgba(141, 0, 181, 0.50); /* 25% opacity */
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    border: 1px solid #000000;
    transition: transform 0.2s ease;
    /* resize: both; */
}

/* .rp-grid-cell:hover {
    transform: scale(0.98);
} */

.rp-prompts-container {
    flex-grow: 1;
    display: grid;
    gap: 8px;
    max-height: 512px;
    overflow-y: auto;
    padding: 8px;
    background: var(--secondaryColor);
    border-radius: 10px;
    border: 2px solid #000000;
}

.rp-prompt-item {
    background: rgba(141, 0, 181, 0.25); /* 25% opacity */
    padding: 4px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    border: 1px solid #000000;
}

.rp-prompt-label {
    display: block;
    text-align: center;
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}

.rp-prompt-textarea {
    width: 80%;
    height: 60%;
    padding: 5px;
    border: 1px solid #000000;
    border-radius: 10px;
    resize: none;
    font-family: 'Comfortaa';
    font-size: 14px;
    transition: border-color 0.2s ease;
    background-color: rgb(0, 0, 0);
    color: #ffffff;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}

.rp-prompt-textarea:focus {
    border-color: #8d00b5;
    outline: none;
    box-shadow: 0 0 0 3px rgba(141, 0, 181, 0.3);
}


.ribbon {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  font-family: 'Comfortaa';
  text-shadow: none;
}
.ribbon {
  --r: .4em; /* control the ribbon shape (the radius) */
  --c: var(--mainColor);

  position: absolute;
  top: 0%;
  left: calc(-1*var(--r));
  line-height: 1.8; 
  padding: 0 .5em calc(2*var(--r));
  border-radius: var(--r) 0 0 var(--r);
  background: 
    radial-gradient(100% 50% at left,var(--c) 98%,#0000 101%)
     100% 0/.5lh calc(100% - 2*var(--r)),
    radial-gradient(100% 50% at right,#0005 98%,#0000 101%) 
     0 100%/var(--r) calc(2*var(--r)),
    conic-gradient(from 90deg at var(--r) calc(100% - 2*var(--r)),#0000 25%,var(--c) 0)
     0 0/calc(101% - .5lh) 100%;
  background-repeat: no-repeat;   
}

.flower {
  width: 200px; /* adjust to control the size */
  aspect-ratio: 1;
  --g:/calc(37.019% + 0.510px) calc(37.019% + 0.510px) radial-gradient(#0000 calc(70% - 1px),#000 calc(71% - 1px) 70%,#0000 71%) no-repeat;
  mask: radial-gradient(100% 100%,#0000 calc((37.019% + 0.510px)/1.454 - 0.688px),#000 calc((37.019% + 0.510px)/1.454 - 0.688px + 1px)) intersect,80.893% 89.314% var(--g),22.156% 91.53% var(--g),1.899% 36.352% var(--g),48.115% 0.036% var(--g),96.937% 32.768% var(--g);
}

/* Animations */
@keyframes hamster {
from, to {
    transform: rotate(4deg) translate(-0.8em,1.85em);
}

50% {
    transform: rotate(0) translate(-0.8em,1.85em);
}
}

@keyframes hamsterHead {
from, 25%, 50%, 75%, to {
    transform: rotate(0);
}

12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(8deg);
}
}

@keyframes hamsterEye {
from, 90%, to {
    transform: scaleY(1);
}

95% {
    transform: scaleY(0);
}
}

@keyframes hamsterEar {
from, 25%, 50%, 75%, to {
    transform: rotate(0);
}

12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(12deg);
}
}

@keyframes hamsterBody {
from, 25%, 50%, 75%, to {
    transform: rotate(0);
}

12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-2deg);
}
}

@keyframes hamsterFRLimb {
from, 25%, 50%, 75%, to {
    transform: rotate(50deg) translateZ(-1px);
}

12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-30deg) translateZ(-1px);
}
}

@keyframes hamsterFLLimb {
from, 25%, 50%, 75%, to {
    transform: rotate(-30deg);
}

12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(50deg);
}
}

@keyframes hamsterBRLimb {
from, 25%, 50%, 75%, to {
    transform: rotate(-60deg) translateZ(-1px);
}

12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(20deg) translateZ(-1px);
}
}

@keyframes hamsterBLLimb {
from, 25%, 50%, 75%, to {
    transform: rotate(20deg);
}

12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-60deg);
}
}

@keyframes hamsterTail {
from, 25%, 50%, 75%, to {
    transform: rotate(30deg) translateZ(-1px);
}

12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(10deg) translateZ(-1px);
}
}

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

to {
    transform: rotate(-1turn);
}
}
/* HAMSTER */

@keyframes glow{
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
    }
    to {
        text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
    }
}

@keyframes blinker {
    50% {
        background-color: #840000;;
    }
}

@keyframes bouncy {
    0%,
    100% {
        transform: scale(1, 1);
    }
    25% {
        transform: scale(0.9, 1.1);
    }
    50% {
        transform: scale(1.1, 0.9);
    }
    75% {
        transform: scale(0.95, 1.05);
    }
}

@keyframes appear1 {
    0%{
        transform: scale(0,1);

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

    }
}

@keyframes transition {
    1%{
        filter: drop-shadow(16px 16px 20px red) invert(100%);
    }
    50%{
        filter: drop-shadow(0px 0px 0px red) invert(0%);
    }
}

@keyframes transition2 {
    1%{
        filter: drop-shadow(16px 16px 20px pink) invert(75%);
    }
    50%{
        filter: drop-shadow(0px 0px 0px red) invert(0%);
    }
}

@keyframes shadowRotate {
    0% {
        box-shadow: 0;
    }
    50%{
        box-shadow: 1px 1px 30px #886ce4;
    }
    100%{
        box-shadow: 0;
    }
}

.hold{
  font-family: 'Comfortaa';
}

.hold:active{
  animation: holdBlink 1s ease-in forwards;
}

@keyframes holdBlink {
  30% {
    transform: translateY(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
  100% {
    transform: translateY(1000px) scaleY(2) scaleX(0.2);
    transform-origin: 50% 100%;
    filter: blur(40px);
    opacity: 0;
  }
}

#model-feedback {
    font-family: 'Comfortaa';
    font-size: 14px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    border-radius: 5px;
    transition: opacity 0.3s ease-in-out;
}
#model-feedback:hover {
    cursor: pointer;
    opacity: 0.8;
}

#style-feedback {
    font-family: 'Comfortaa';
    font-size: 14px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    border-radius: 5px;
    transition: opacity 0.3s ease-in-out;
}
#style-feedback:hover {
    cursor: pointer;
    opacity: 0.8;
}

#options-feedback {
    font-family: 'Comfortaa';
    font-size: 14px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    border-radius: 5px;
    transition: opacity 0.3s ease-in-out;
}
#options-feedback:hover {
    cursor: pointer;
    opacity: 0.8;
}



















/* Tests */

/* <div class="goo"><div class="ball"></div></div> */
@import "compass/css3";

 @keyframes stretch {
	 0% {
		 height: 0px;
		 transform: scale(1, 1);
	}
	 100% {
		 height: 300px;
		 transform: scale(0.95, 1);
	}
}
 @keyframes stretch-ball {
	 0% {
		 bottom: -50px;
		 transform: scale(1, 1);
	}
	 100% {
		 bottom: -55.5555555556px;
		 transform: scale(0.8, 1.05);
	}
}
 .goo {
	 position: absolute;
	 width: 100px;
	 height: 100px;
	 background: #ffffff;
	 border-radius: -20px;
	 left: 50%;
	 margin-left: -50px;
	 animation: stretch 2s infinite ease-in-out alternate-reverse;
}
 .ball {
	 position: absolute;
	 bottom: -50px;
	 animation: stretch-ball 2s infinite ease-in-out alternate-reverse;
	 width: 100%;
	 height: 100px;
	 background: #ffffff;
	 border-radius: 100%;
	 z-index: 3;
}
 @keyframes stretch-curve {
	 0% {
		 transform: scale(0, 1);
	}
	 100% {
		 transform: scale(1, 1.05);
	}
}
 .goo:before, .goo:after {
	 content: " ";
	 display: block;
	 position: absolute;
	 top: 0;
	 bottom: 0;
	 background: #000000;
	 width: 70px;
	 border-radius: 100%;
	 z-index: 2;
	 transform-origin: 50% 0;
	 animation: stretch-curve 2s infinite ease-in-out alternate-reverse;
}
 .goo:before {
	 left: -35px;
}
 .goo:after {
	 right: -35px;
}