body {
    background: rgb(19, 20, 28);
    background: linear-gradient(0deg, #1c1821 0%, #1e212e 100%);
    color: white;
    margin: 10px;
    margin-top: 50px;
    background-size: 100vw 100vh;
}

.red {
    background: linear-gradient(0deg, rgb(233, 39, 39) 0%, rgb(226, 108, 108) 100%);
}

b,
i,
u,
span {
    margin: 0px;
    padding: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.fill {
    width: 100%;
    height: 100%;
    margin: 0px !important;
}

.topleft {
    position: absolute;
    top: 0px;
    left: 0px;
}

.postbar {
    width: 100%;
    height: 80px;
    position: relative;
}

.t-sub {
    font-size: clamp(0.7rem, 1.2vw, 3rem) !important;
}

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

a.normal:hover {
    text-decoration: underline !important;
}

dialog {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 10%;
    padding-top: 10% !important;
    padding-bottom: 10% !important;
    width: calc(100% - 26%);
    font-size: clamp(2rem, 6vw, 8rem);
    padding: 3%;
    font-weight: 600 !important;
    text-align: center;
    align-content: center;
    backdrop-filter: brightness(30%);
    background: linear-gradient(0deg, rgba(82, 89, 175, 0.3) 0%, rgba(109, 65, 170, 0.3) 100%);
    color: white !important;
    animation: dg 1s ease-out;
}

.real-pane {
    transition: transform 0.10s ease-out;
}

.real-pane:active {
    transform: scale(0.95);
}

@keyframes dg {
    0% {
        transform: scale(0.8);
        opacity: 0;
        outline: white 0px solid;
    }

    50% {
        transform: scale(1);
        opacity: 1;
        outline: white 10px solid;
    }

    100% {
        transform: scale(1);
        opacity: 1;
        outline: white 0px solid;
    }
}

.slider {
    accent-color: rgb(109, 65, 170);
    color: rgb(109, 65, 170);
    outline: none !important;
    box-shadow: none !important;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.smaller {
    margin: 0px;
    font-size: clamp(1rem, 3vw, 6rem);
}

dialog:focus {
    outline: none;
}

.menu-bar {
    background: rgba(255, 255, 255, 0.082);
    margin: 0px;
    padding: 5px;
    padding-left: 10px;
    font-size: clamp(0.5rem, 3vw, 26px) !important;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 5000;
    width: calc(100% - 10px);
    backdrop-filter: blur(5px);
}

@font-face {
    font-family: RobotoFlex;
    src: url('roboto-flex.ttf');
}

* {
    font-family: RobotoFlex, sans-serif;
    margin: 5px;
    text-wrap: balance;
}

textarea {
    resize: vertical;
    transform: none !important;
}

p {
    white-space: pre-wrap !important;
    max-height: 20vh;
    overflow-x: hidden;
    overflow-y: scroll;
}

textarea,
input,
select {
    width: 100%;
    background: linear-gradient(0deg, rgba(82, 89, 175, 0.3) 0%, rgba(109, 65, 170, 0.3) 100%);
}

select{
    border: none;
}
h1 {
    font-size: clamp(1rem, 5vw, 6rem);
}


h2 {
    font-size: clamp(0.4rem, 3vw, 2rem) !important;
}

.heart {
    height: 30px;
    object-fit: contain;
    z-index: 95;
    position: absolute;
    bottom: 0px;
    left: 0px;
    border: none !important;
    outline: none !important;
    /* animation: float 2s ease; */
    display: block;
    z-index: 99;
    animation: heartIn 0.7s ease forwards;
    /* filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5)); */
}

@keyframes heartIn {
    0% {
        opacity: 0;
        transform: translate(0px, 0px) scale(1);
        animation-timing-function: ease-out;
    }

    10% {
        opacity: 1;
    }

    50% {
        opacity: 1;
        transform: translate(0px, -70px) scale(2);
        animation-timing-function: ease-in;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(0px, 0px) scale(0.7);
        animation-timing-function: ease-in;
        display: none;
    }
}

.faded{
    background: rgba(0, 0, 0, 0.5);
    outline: white 1px solid;
}

textarea,
input,
select,
button {
    font-weight: 600 !important;
    transform-origin: left top;
    transition: font-weight 0.30s ease-out, transform 0.20s ease-out, box-shadow 0.20s ease-out, filter 0.20s ease-out;
    font-size: clamp(1rem, 2vw, 4rem);
    border-radius: 0px;
    border: none;
    color: white;
    box-sizing: border-box;
    background-size: 100% 100%;
    border: none;
    padding: 7px;
}

.like {
    position: relative;
    z-index: 9999;
}

.verified{
    background: linear-gradient(90deg, rgb(82, 162, 228) 0%, rgb(82, 162, 228) 20%, rgb(68, 100, 218) 50%, rgb(82, 162, 228) 80%, rgb(82, 162, 228) 100%); 
    background-size: 400% 400%;
    color: white !important;
    padding: 3px !important;
    display: inline-block;
    border-radius: 10px;
    animation: verifiedAnim 2s linear infinite;
}

.verified-check{
    background: linear-gradient(90deg, rgb(106, 208, 251) 0%, rgb(106, 208, 251) 20%, rgb(68, 100, 218) 50%, rgb(106, 208, 251) 80%, rgb(106, 208, 251) 100%); 
    background-size: 400% 400%;
    background-clip: text;
    font-size: clamp(0.5rem, 2.5vw, 3rem) !important;
    color: transparent !important;
    padding: 5px !important;
    margin-left: 10px !important;
    display: inline-block;
    border-radius: 5px;
    animation: verifiedAnim 2s linear infinite;
}
                    
    @keyframes verifiedAnim {
                        
      0% { background-position: 0% 0%; }
                        
      100% { background-position: 100% 100%; }
                      
    }

::-webkit-scrollbar {
    height: 10px;
    width: 10px;
    background: linear-gradient(0deg, rgba(82, 89, 175, 1) 0%, rgba(109, 65, 170, 1) 100%);
}

::-webkit-scrollbar-thumb {
    background: white !important;
}

textarea:hover,
input:hover,
button:not(.on):hover {
    transform: scale(1, 0.93);
    border: none;
    filter: brightness(120%);
    box-shadow: 0px 3px 0px white;
    font-weight: 700 !important;
}

.pfp-large {
    aspect-ratio: 1/1;
    width: 10vw;
    border-radius: 50%;
    background: url("assets/checkerboard.png");
    background-size: 50px 50px;
    outline: white 2px solid;
    transition: filter 0.25s ease-out, transform 0.25s ease-out;
    cursor: pointer !important;
}

.pfp-large:hover {
    filter: invert(10%) brightness(120%);
    transform: scale(0.95);
}

.pfp-in-handle {
    aspect-ratio: 1/1;
    height: clamp(3rem, 4.5vw, 12rem);
    border-radius: 50%;
    display: inline-block;
    background: url("assets/checkerboard.png");
    background-size: 50px 50px;
    cursor: pointer !important;
    outline: white 2px solid;
}

textarea:active,
input:active,
select:active,
button:active {
    transform: translateY(0px) scale(1, 1.05) !important;
    box-shadow: 0px 0px 0px white !important;
}

button {
    background: linear-gradient(0deg, rgba(82, 89, 175, 1) 0%, rgba(109, 65, 170, 1) 100%);
}


a {
    color: rgb(143, 122, 221);
    margin: 0px !important;
}

::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

textarea:focus,
input:focus,
select:focus,
button:focus {
    border: none;
    outline: white 1px solid;
}

div {
    color: white;
    font-size: clamp(0.8rem, 2vw, 2rem);
}