@font-face {
    font-family: 'SignikaNegative';
    src: URL('./font/SignikaNegative-Regular.ttf');
}

:root {
    font-size: 20px;
    font-family: 'SignikaNegative';
    --real-vh: 100vh;

    --bg-primary: #77d;
    --bg-secondary: #F3F293;

    --bg-btn: #DED337;

    --theme-primary: #ffe3c2;
    --theme-secondary: #f5deb3;

    --theme-shadow: #554;
    --theme-shadow-transparent: #55554466;

    --font-primary: #113;
    --font-secondary: #335;

    --font-failed: #ff3030;

    --font-on-dark: #eed;

    --bg-bad-notif: #ff8080;
    --bg-good-notif: #80ff80;

    --transition-speed: 400ms;
    --fast-transition-speed: 150ms;

    --canvas-size: 16rem;
}

* {
    font-family: 'SignikaNegative';
    font-size: 1rem;
}

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

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    height: 100%;
    background-color: var(--bg-primary);
    color: var(--font-primary);
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
}

body.preload #bubble-menu * {
    animation-duration: 0s !important;
}

main {
    width: 100%;
    min-height: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
}

main#home {
    width: 100vw;
    height: var(--real-vh);
}

main#login-section,
main#account,
main#link {
    background: var(--bg-secondary);
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    min-height: 100%;
    overflow-y: scroll;
}

#home-body,
#notes-body {
    background-color: var(--bg-primary);
}

html:has(#login-body,
    #account-body,
    #link-body),
#login-body,
#account-body,
#link-body {
    background-color: var(--bg-secondary);
}

main#link {
    flex-direction: column;
    justify-content: center;
}

/* Page transition */
@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes come-from-top {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes come-from-bottom {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

main *:not(#transition-bg) {
    animation: fade-in 0.5s !important;
}

div#transition-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    opacity: 0;
    z-index: -10;
}

div#transition-bg[active-bg0='true'],
div#transition-bg[active-bg1='true'],
div#transition-bg[active-bg2='true'],
div#transition-bg[active-bg3='true'] {
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: 99;
    transform: translateY(0%);
    pointer-events: none;
}

div#transition-bg[active-bg0='true'] {
    background: var(--bg-primary);
    opacity: 1;
    transition: opacity 0.5s;
}

div#transition-bg[active-bg1='true'] {
    background: var(--bg-secondary);
    opacity: 1;
    transition: opacity 0.5s;
}

div#transition-bg[active-bg2='true'] {
    background: var(--bg-primary);
    animation: come-from-top 0.5s;
}

div#transition-bg[active-bg3='true'] {
    background: var(--bg-secondary);
    animation: come-from-bottom 0.5s;
}

/* Draw page */
canvas {
    width: var(--canvas-size);
    height: var(--canvas-size);
    cursor: crosshair;
    transition: filter 0.25s ease-in-out;
    /* prevent scroll/zoom and random pointercancel event */
    touch-action: none;
}

div#new-note-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

div#canvas-command,
div#draw-palette {
    display: flex;
    background: var(--theme-secondary);
    width: var(--canvas-size);
    height: 2rem;
    align-items: center;
    z-index: 3;
}

div#canvas-command span#cancel-btn,
div#canvas-command span#save-btn {
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    margin: 0 0.5rem;
}

div#canvas-command span svg,
div#draw-palette span svg {
    width: 100%;
    height: 100%;
    fill: var(--font-primary);
}

div#canvas-command span,
div#draw-palette span {
    width: 1rem;
    height: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform var(--transition-speed);
}

div#draw-palette #eraser-brush,
div#draw-palette #selected-brush {
    margin: 0 0.5rem;
}

div#brush-size-selector span[selected] span.icon-round-brush {
    outline: 2px solid var(--font-primary);
    outline-offset: 2px;
}

span.color-brush[selected] {
    transform-origin: 50% 50%;
    transform: scale(1.2);
}

span#eraser-brush[selected] {
    transform: scale(1.3);
}

div#canvas-command {
    justify-content: space-between;
    border-radius: 0.5rem 0.5rem 0 0;
}

div.undo-command {
    display: flex;
    flex-direction: row;
    gap: 2rem;
}

div.undo-command span {
    transition: opacity 0.5s;
}

span.inactive-btn {
    opacity: 0.5;
}

div#draw-palette {
    justify-content: space-between;
    gap: 1.2rem;
    border-radius: 0 0 0.5rem 0.5rem;
}

#brush-size-selector {
    height: 1rem;
    display: flex;
    flex-direction: row;
    gap: 0.8rem;
}

#brush-size-selector span.icon-round-brush {
    width: 0.8rem;
    height: 0.8rem;
    background: var(--font-primary);
    border-radius: 50%;
}

span#brush-size-1 span.icon-round-brush {
    transform-origin: 50% 50%;
    width: 0.4rem;
    height: 0.4rem;
}

span#brush-size-2 span.icon-round-brush {
    transform-origin: 50% 50%;
    width: 0.5rem;
    height: 0.5rem;
}

span#brush-size-3 span.icon-round-brush {
    transform-origin: 50% 50%;
    width: 0.6rem;
    height: 0.6rem;
}

span#selected-brush {
    background-color: #000;
    border-radius: 0.25rem;
}

span.color-brush[visible="false"] {
    opacity: 0;
    pointer-events: none;
}

span.color-brush[visible="true"] {
    opacity: 1;
}

canvas[palette-open="true"] {
    pointer-events: none;
    overflow: hidden;
}

#color-palette {
    position: absolute;
    display: none;
    grid-template-rows: repeat(3, 1fr);
    grid-auto-flow: column;
    gap: 0.5rem;
    padding: 0.5rem;
    width: calc(var(--canvas-size) - 2rem);
    margin: 0 1rem;
    height: auto;
    background: var(--theme-primary);
    border: 2px solid var(--theme-secondary);
    border-radius: 0.5rem;
    box-sizing: border-box;
    z-index: 1;
}

#color-palette-backdrop {
    position: absolute;
    display: none;
    width: var(--canvas-size);
    height: var(--canvas-size);
    background-color: var(--theme-shadow-transparent);
    backdrop-filter: blur(2px);
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    pointer-events: none;
}

#color-palette[visible="true"]+#color-palette-backdrop {
    display: flex;
}

span.color-brush {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    border-radius: 20%;
    cursor: pointer;
    transition: transform 0.2s, border 0.2s;
}

#color-palette[visible="false"] {
    display: none;
}

#color-palette[visible="true"] {
    display: grid;
}

div.canvas-wrapper {
    overflow: hidden;
}

/* live notes style */
div.notes {
    position: absolute;
    width: 20rem;
    height: 20rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    transform-origin: 50% 50%;
    z-index: 1;
    user-select: none;
    visibility: hidden;
    transition:
        top var(--transition-speed) ease,
        left var(--transition-speed) ease,
        translate var(--transition-speed) ease,
        rotate var(--transition-speed) ease,
        scale var(--transition-speed) ease var(--transition-speed);
}

div.notes.focused {
    top: calc(50% - 10rem) !important;
    left: calc(50% - 10rem) !important;
    rotate: 0deg !important;
    scale: 1.2;
    z-index: 2;
    transition:
        top var(--transition-speed) ease var(--fast-transition-speed),
        left var(--transition-speed) ease var(--fast-transition-speed),
        translate var(--transition-speed) ease var(--fast-transition-speed),
        rotate var(--transition-speed) ease var(--fast-transition-speed),
        scale var(--transition-speed) ease;
}

#notes-trigger {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 0;
    transition:
        background-color var(--fast-transition-speed) ease,
        backdrop-filter var(--fast-transition-speed) ease;
}

#notes-trigger.active {
    z-index: 2;
    background-color: var(--theme-shadow-transparent);
    backdrop-filter: blur(5px);
}

div.notes::after,
div.notes div.shadow {
    transition: opacity var(--fast-transition-speed) ease-in var(--transition-speed);
}

div.notes.focused::after,
div.notes.focused div.shadow {
    transition: opacity var(--fast-transition-speed) ease-out;
}

div.notes.focused::after {
    opacity: 0.4;
}

div.notes.focused div.shadow {
    opacity: 0.2;
}

div.notes.loaded {
    visibility: visible;
}

div.notes div.spotlight {
    position: absolute;
    width: 20rem;
    height: 20rem;
    background: radial-gradient(farthest-corner circle at 0% 70%, #ffffff2a 20%, #ffffff00 60%);
}

div.notes:hover {
    z-index: 2;
}

div.notes img {
    width: 20rem;
    height: 20rem;
}

div.notes span {
    height: 1rem;
    background-color: var(--theme-shadow);
    color: var(--font-on-dark);
    padding: 0.25rem 0.5rem;
    border-radius: 10px 0 0 0;
    pointer-events: none;
    transform: translateX(1px) translateY(calc(-100% + 1px));
    opacity: 0;
    transition: opacity var(--fast-transition-speed);
}

div.notes:hover span {
    opacity: 1;
}

div.notes::before {
    content: '';
    width: 20rem;
    height: 20rem;
    position: absolute;
    clip-path: polygon(100% 15%, 100% 100%, 0% 100%, 0% 80%);
    background: linear-gradient(147deg, transparent 60%, #66666616 70%, #66666633 100%);
    pointer-events: none;
}

div.notes div.shadow {
    position: absolute;
    width: 20.5rem;
    height: 15.55rem;
    background: linear-gradient(147deg, transparent 60%, #33333311 70%, #33333333 100%);
    clip-path: polygon(0% 0%, 0% 15.425rem, 100% 100%, 20.25rem 0%);
    transform: translate(0.25rem, 4.7rem);
    z-index: -1;
    border-radius: 3px;
    opacity: 1;
}

div.notes div.shadow::before {
    content: '';
    position: absolute;
    width: 20rem;
    height: 15.3rem;
    box-shadow: 5px 5px 10px -5px #333;
    transform: translateX(0.25rem);
}

div.notes::after {
    content: '';
    width: 20rem;
    height: 4.7rem;
    background: linear-gradient(#66666633 0%, #6666661b 80%, transparent 100%);
    position: absolute;
    pointer-events: none;
    opacity: 1;
}

div.memories-suggestion {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

#memories-reveal {
    width: 15rem;
    opacity: 1;
    font-size: 1.2rem;
    transition: opacity 0.5s;
}

div.memories-suggestion[drawn] #memories-reveal {
    opacity: 0;
}

div.memories-suggestion button img {
    width: 100%;
}

div.memories-suggestion span.memories-title {
    position: absolute;
    font-size: 1.2rem;
    transform: translateY(-11rem);
}

div.memories-suggestion span.memories-title,
div.memories-suggestion div.notes {
    opacity: 0 !important;
    filter: blur(20px);
    pointer-events: none;
    transition: filter 2s 0.5s ease-in, opacity 2s 0.5s ease-in;
}

div.memories-suggestion[drawn] span.memories-title,
div.memories-suggestion[drawn] div.notes {
    opacity: 1 !important;
    filter: none;
    pointer-events: initial;
}

/* bubble menu */
@keyframes hide-bubble-items {
    0% {
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    25% {
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    100% {
        visibility: visible;
        transform: translateY(var(--bubble-items-from-origin)) scale(1);
    }
}

div.bubble-action {
    position: fixed;
    background-color: var(--theme-secondary);
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 2px 2px 0px var(--theme-shadow);
}

div#bubble-menu-deployer,
div#bubble-action-home {
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 101;
}

div#bubble-action-refresh {
    top: 1.5rem;
    right: 1.5rem;
    z-index: 98;
}

div.bubble-action:hover {
    box-shadow: 1px 1px 0px var(--theme-shadow);
}

body.preload div#bubble-action-refresh svg {
    transform: rotate(0deg);
}

div#bubble-action-refresh svg {
    transform: rotate(360deg);
    transition: transform 0.5s ease-in-out;
}

body.preload div.bubble-action svg,
body.transition div.bubble-action svg {
    opacity: 0;
}

div.bubble-action svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--font-primary);
    opacity: 1;
    transition: opacity 0.5s;
}

header {
    position: absolute;
    background-color: transparent;
    width: 0;
    height: 0;
    z-index: 100;
    transition: background-color 0.5s,
        width 0s 0.5s,
        height 0s 0.5s;
}

header.darken {
    background-color: #33333388;
    width: 100%;
    height: 100%;
    transition: background-color 0.75s;
}

ul#bubble-menu {
    position: fixed;
    bottom: 4.75rem;
    right: 2rem;
    z-index: 100;
}

ul#bubble-menu li {
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: center;
    padding: 0.5rem 0rem;
}

ul#bubble-menu li * {
    cursor: pointer;
}

ul#bubble-menu li>* {
    box-shadow: 2px 2px 0px var(--theme-shadow);
}

ul#bubble-menu li:hover>* {
    box-shadow: 1px 1px 0px var(--theme-shadow);
}

div.bubble-menu-item-title {
    background-color: var(--theme-secondary);
    font-size: 0.75rem;
    border-radius: 0.2rem;
    padding: 0rem 0.2rem;
    margin: 0rem 0.75rem;
}

div.bubble-menu-item-icon {
    background-color: var(--theme-primary);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.bubble-menu-item-icon svg {
    width: 1rem;
    height: 1rem;
    fill: var(--font-secondary);
}

div#bubble-menu-container[selected="false"] ul#bubble-menu li div.bubble-menu-item-title,
body.transition div#bubble-menu-container ul#bubble-menu li div.bubble-menu-item-title {
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: all 0.25s;
}

div#bubble-menu-container[selected="false"] ul#bubble-menu,
body.transition div#bubble-menu-container ul#bubble-menu {
    visibility: hidden;
}

div#bubble-menu-container[selected="false"] ul#bubble-menu li:nth-child(3) {
    --bubble-items-from-origin: 4.25rem;
}

div#bubble-menu-container[selected="false"] ul#bubble-menu li:nth-child(2) {
    --bubble-items-from-origin: 7.75rem;
}

div#bubble-menu-container[selected="false"] ul#bubble-menu li:nth-child(1) {
    --bubble-items-from-origin: 11.25rem;
}

div#bubble-menu-container[selected="false"] ul#bubble-menu li,
body.transition div#bubble-menu-container ul#bubble-menu li {
    transform: translateY(var(--bubble-items-from-origin));
    animation: hide-bubble-items 0.5s;
}

div#bubble-menu-container[selected="true"] ul#bubble-menu li {
    transform: translateY(0);
    transition: all 0.5s;
}

div#bubble-menu-container[selected="true"] ul#bubble-menu li div.bubble-menu-item-title {
    transform: scaleX(1);
    transform-origin: 100% 50%;
    transition: all 0.25s 0.25s;
}

/* Forms */
form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 1rem 0;
}

form label {
    color: var(--font-primary);
}

form label,
form div,
form input {
    width: 15rem;
}

form input {
    margin: 0.25rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: none;
    box-shadow: 2px 2px 0px var(--theme-shadow);
}

form input[type="submit"] {
    background: var(--bg-btn);
    color: var(--font-primary);
    margin-top: 1.25rem;
    cursor: pointer;
    transition: filter 0.25s ease-in-out;
    box-shadow: 2px 2px 0px var(--theme-shadow);
}

form input[type="submit"]:hover,
form input:focus {
    outline: none;
    box-shadow: 1px 1px 0px var(--theme-shadow);
}

form label {
    margin-top: 1rem;
}

form div,
div.invalid {
    font-size: 0.9rem;
    color: var(--font-failed);
}

div.invalid {
    width: 80%;
    text-align: center;
}

form#link {
    width: 30rem;
    flex-direction: row;
    flex-wrap: wrap;
}

form#link>* {
    width: auto;
    margin: 0;
}

form#link input[type='text'] {
    width: 20rem;
    margin-right: 0.5rem;
}

form#link div {
    margin: 0.8rem 0;
}

form div.warning_field {
    margin-top: 1rem;
}

form input[type='password'][invalid] {
    border: 1px solid var(--font-failed);
    color: var(--font-failed);
}

form input[type='submit'][invisible] {
    filter: grayscale(1);
    pointer-events: none;
}

main#login-section input[type='submit'] {
    margin-bottom: 1rem;
}

form.hide {
    display: none;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
}

form.show {
    display: flex;
    z-index: 1;
    opacity: 1;
}

form.show button.login-register-switch {
    margin: 0;
    font-size: 0.9rem;
    color: var(--font-secondary);
    cursor: pointer;
    border: none;
    background: transparent;
}

/* cookie alert */
div.cookie-alert {
    position: absolute;
    bottom: 0;
    padding: 0.5rem 1rem;
    background-color: #333355a0;
    /* --bg-primary with alpha perso */
    backdrop-filter: blur(10px);
    color: var(--font-on-dark);
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
    align-items: center;
    border-radius: 0.5rem 0.5rem 0 0;
    transition: transform 0.5s,
        opacity 0.5s;
}

div.cookie-alert button {
    background: var(--bg-btn);
    color: var(--font-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    border: none;
    box-shadow: 2px 2px 0px var(--theme-shadow);
}

div.cookie-alert button:hover {
    outline: none;
    box-shadow: 1px 1px 0px var(--theme-shadow);
}

div.cookie-alert[hide='true'] {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

/* linking info */

div.explain {
    width: 30rem;
    background-color: var(--bg-primary);
    color: var(--font-primary);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 1rem;
    box-shadow: 2px 2px 0px var(--theme-shadow);
}

div.explain svg {
    width: 5rem;
    fill: var(--font-primary);
}

div.explain-text {
    width: 24rem;
}

div.token-action-wrapper {
    width: 28rem;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

div.user-token {
    background-color: var(--font-on-dark);
    padding: 0.2rem 0.3rem;
    border: 1px solid var(--theme-shadow);
    border-radius: 0.3rem;
}

button#copy-btn {
    padding: 0.25rem;
    background: var(--bg-btn);
}

button#copy-btn,
button#memories-reveal {
    color: var(--font-primary);
    border-radius: 0.5rem;
    border: none;
    box-shadow: 2px 2px 0px var(--theme-shadow);
}

button#copy-btn:hover,
button#memories-reveal:hover {
    box-shadow: 1px 1px 0px var(--theme-shadow);
}

button#memories-reveal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
    background: var(--theme-primary);
}

button#memories-reveal:hover {
    background: var(--theme-secondary);
}

#memories-reveal.no-memories {
    filter: grayscale(1);
    pointer-events: none;
}

div.account-stats {
    width: 15.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--bg-primary);
    color: var(--font-primary);
    border-radius: 0.5rem;
    border: none;
    box-shadow: 2px 2px 0px var(--theme-shadow);
}

/* bubble-notification */
@keyframes beatExpandHide {
    0% {
        z-index: 99;
        opacity: 0;
        color: transparent;
        width: 1.5rem;
        transform: scale(0);
    }

    5% {
        z-index: 99;
        opacity: 1;
        color: transparent;
        width: 1.5rem;
        transform: scale(1);
    }

    10% {
        z-index: 99;
        opacity: 1;
        color: transparent;
        width: 100%;
        transform: scale(1);
    }

    15% {
        z-index: 99;
        opacity: 1;
        color: var(--font-primary);
        width: 100%;
        transform: scale(1);
    }

    70% {
        z-index: 99;
        opacity: 1;
        color: var(--font-primary);
        width: 100%;
        transform: scale(1);
    }

    75% {
        z-index: 99;
        opacity: 1;
        color: transparent;
        width: 100%;
        transform: scale(1);
    }

    80% {
        z-index: 99;
        opacity: 1;
        color: transparent;
        width: 1.5rem;
        transform: scale(1);
    }

    85% {
        z-index: 99;
        opacity: 1;
        color: transparent;
        width: 1.5rem;
        transform: scale(1.3);
    }

    90% {
        z-index: 99;
        opacity: 1;
        color: transparent;
        width: 1.5rem;
        transform: scale(1);
    }

    95% {
        z-index: 99;
        opacity: 1;
        color: transparent;
        width: 1.5rem;
        transform: scale(1.3);
    }

    100% {
        z-index: 99;
        opacity: 1;
        color: transparent;
        width: 1.5rem;
        transform: scale(0);
    }
}

div.success-message,
div.error-message {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 5%;
    left: 50%;
    translate: -50% 0%;
    opacity: 0;
    height: 1.5rem;
    font-size: 1rem;
    padding: 1rem;
    text-align: center;
    max-width: fit-content;
    border-radius: 2rem;
    transform-origin: 50% 50%;
    overflow: hidden;
    animation: 7s beatExpandHide 0.5s !important;
    z-index: -10;
}

div.success-message {
    background-color: var(--bg-good-notif);
    color: var(--bg-good-notif);
}

div.error-message {
    background-color: var(--bg-bad-notif);
    color: var(--bg-bad-notif);
}


div.pres-img-waiting img {
    height: 15rem;
}


@media only screen and (max-width:720px) {
    :root {
        font-size: 16px;
        --canvas-size: 20rem;
    }

    canvas {
        width: var(--canvas-size);
        height: var(--canvas-size);
    }

    div#draw-palette {
        gap: unset;
    }

    main#login-section,
    main#link {
        flex-direction: column;
        justify-content: unset;
    }

    main#link input[type='submit'] {
        margin-bottom: 1rem;
    }

    main#login-section,
    main#link,
    main#account {
        justify-content: center;
        height: auto;
    }

    main#account {
        flex-direction: column-reverse;
    }

    main#account div.account-stats {
        margin-top: 1rem;
        margin-bottom: 5.5rem;
    }

    div#bubble-action-refresh {
        top: auto;
        right: auto;
        bottom: 1.5rem !important;
        left: 1.5rem !important;
    }

    div.pres-img-waiting img {
        height: 10rem;
        margin-top: 1rem;
    }

    form#link {
        flex-direction: column;
    }

    form#link input {
        margin: 0.25rem;
        padding: 0.5rem;
    }

    form#link input[type="submit"] {
        margin-top: 1rem;
        margin-bottom: 0;
    }

    div.explain {
        width: 80%;
        flex-direction: column;
        margin-bottom: 1rem !important;
    }

    div.explain-text {
        width: 90%;
    }

    div.token-action-wrapper {
        width: 90%;
        gap: 0.5rem;
    }

    div.token-action-wrapper div.user-token {
        width: auto;
        overflow-y: scroll;
    }

    div.token-action-wrapper button#copy-btn {
        width: 6rem;
    }

    div.success-message,
    div.error-message {
        font-size: 0.9rem;
        max-width: 60%;
    }

    div.memories-suggestion span.memories-title {
        font-size: 1rem;
        transform: translateY(-7.7rem);
    }

    div.memories-suggestion button {
        font-size: 1rem;
    }

    div.memories-suggestion div.notes {
        transform: scale(0.7);
    }
}