@font-face {
    font-family: 'iA Writer Quattro';
    src: url('iAWriterQuattroV.woff2');
}
:root {
    --font: 'iA Writer Quattro';
    --fontSize: clamp(12px,.9vw,14px);
    --fontSizeMedium: 1.15em;
    --fontSizeBig: 1.5em;
    --fontWeight: 500;
    --fontWeightMedium:420;
    --fontWeightThin: 410;
    --lineHeight: 1.5;
    --letterSpacing:-.005em;
    --letterSpacingSmall:-.03em;
    --wordSpacing: -.1em;
    --wordSpacingMedium: -.15em;
    --wordSpacingSmall: -.2em;
    --bgColor:#d2d2c8;
    --bgColor2:#d2d2c8df;
    --bgColor3:#80808d;
    --bgColor4: #898994e5;
    --bgColor5: #898994c2;
    --textColor: #252525;
    --textColor2: #9595a1;
    --buttonMargin: 10px;
    --margin: 8px;
    --marginBig: 16px;
    --borderColor1: #cadc78;
    --borderColor2: #302c5a;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scrollbar-width: none;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
}
body {
    scrollbar-width: none;
    font-family: var(--font);
    font-size: var(--fontSize);
    font-weight: var(--fontWeight);
    line-height: var(--lineHeight);
    letter-spacing: var(--letterSpacing);
    word-spacing: var(--wordSpacing);
    background: var(--bgColor);
    color: var(--textColor);
}
html,body{
    height:100vh;
    width:100vw;
    overflow-y: hidden;
    overflow-x: hidden;
}
main {
    position: relative;
}
nav {
    z-index:1000;
    position: fixed;
    display: flex;
    line-height:1;
}
nav .button {
    background: var(--textColor);
    color: honeydew;
    font-weight: var(--fontWeightThin);
    transition: width 120ms ease;
}
nav .button.selected {
    opacity: 1 !important;
}
nav .add-now{
    background: red;
}
nav :is(.add-now,.clear-all) {
    position: relative;
    pointer-events: none;
}
nav :is(.add-now,.clear-all).selected {
    pointer-events: all;
}
nav .clear-all {
    color: gray;
}
nav .add-tally > div {
    display: flex;
    justify-content: space-between;
}
nav .add-tally .separator {
    flex: 1;
    /* border-bottom: 1px dotted honeydew; */
    border-bottom: 1px dotted var(--textColor);
    margin: 0 2px;
}
nav .add-tally .count {
    max-width: 2ch;
}
nav .add-tally .max::before{
    content:'/';
}
nav .add-tally .max:empty:before{
    content:'';
}
nav .add-tally .max {
    width: 2ch;
}
a,a:active {
    color:inherit;
    text-decoration: none;
}
canvas {
    pointer-events: none;
    image-rendering: pixelated;
}
p {
    text-wrap:balance;
}
#canvas-wrapper {
    position: relative;
}
#canvas-wrapper #myths-canvas {
    position: fixed;
    left:0;
    top:0;
}
#canvas-wrapper :is(#mycelium-canvas,#mushroom-canvas,#limbo-canvas) {
    display: block !important;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
}
#limbo-canvas {
    filter: blur(1px) contrast(70%) brightness(.85) grayscale(.6);
    opacity: .9;
}
#intro {
    position: fixed;
    top:0;
    left:0;
    display: block;
    width: 100vw;
    height: 100%;
    text-align: center;
    z-index:999;
}
#selector {
    position: fixed;
    left:0;
    top:0;
    width: 100vw;
    height:100%;
    display:flex;
    justify-content: end;
    align-items: center;
    background: var(--bgColor4);
    user-select: none;
}
#selector .wheel {
    position: relative;
    display: inline-block;
    z-index:900;
    transition: all 100ms ease;
}
#selector .buttons .button {
    position: absolute;
    background: var(--textColor);
    color: honeydew;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    z-index:1000;
}
#selector .buttons .button:is(.top,.bottom){
    font-size: 2em;
}
#selector .myth-wrapper{
    background: red;
}
#selector .myth-wrapper.selected {
    background: linear-gradient(to right,fuchsia, red);
}
#selector .myth-wrapper .myth-name {
    color: salmon;
}
#selector .myth-wrapper.selected .myth-name {
    color: honeydew;
}
#selector .myth-wrapper {
    position: absolute;
    right:50%;
    top:50%;
    transform-origin: right;
    padding: .2ch 5ch .2ch .7ch;
}
#selector .myth-wrapper.selected {
    z-index:999;
}
#selector .myth-wrapper .myth-name {
    text-transform: lowercase;
    white-space: nowrap;
}
#selector .myth-wrapper.selected .myth-name {
    margin-right: clamp(9ch,8vw,30ch);
    transition: margin-right 50ms ease 50ms;
}
#selector #profile {
    pointer-events: none;
    position: absolute;
    right: 25%;
    bottom:0;
    transform: translateX(50%); 
    width: 40vw;
}
#selector #profile #profile-canvas {
    display: block !important;
}
#selector #profile .desc-wrapper {
    width:55ch;
    position:absolute;
    left:50%;
    bottom:25vh;
    transform: translate(-50%,100%);
}
#selector #profile .myth-desc {
    padding: 3ch;
    width: inherit;
    text-align: center;
    background:honeydew;
}
@keyframes scaleSmall {
    0% {
        opacity:0;
        transform: scale(1.8);
    }
    100% {
        opacity:1;
        transform: none;
    }
}
#selector .myth-head {
    position:relative;
    background-position: center;
    background-repeat: no-repeat;
    transform-origin: center;
    background-size: cover;
    animation: scaleSmall 150ms ease-out;
}
@keyframes appear {
    0% {
        opacity:.5;
        transform: translate(120%,-50%) scale(.8);
    }
    100% {
        opacity:1;
        transform: translate(120%,-50%);
    }
}
#selector .myth-head .delete.button {
    position:absolute;
    right:25%;
    top:0;
    transform: translate(120%,-50%);
    line-height:1;
    background: var(--textColor);
    color: #c3c6ae;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5ch;
    height: 1.5ch;
    padding-bottom: .2ch;
    border-radius: 100%;
    font-size: 2em;
    font-weight: var(--fontWeightThin);
    animation: appear 70ms ease;
}
#selector .notes {
    font-weight:480;
    max-width: 68ch;
    color: honeydew;
    opacity: .8;
    position: absolute;
    /* left: calc(var(--marginBig) + var(--margin)); */
    text-align: end;
    right: 32%;
    top: 50%;
    transform: translate(0,-50%);
}
#selector .notes .close.button {
    border-bottom: 1px solid #cbcdd8;
    position: absolute;
    right:0;
    bottom:0;
    transform: translateY(calc(100% + .55ch));
}
#controls { 
    position: fixed;
    bottom: 0;
    left:0;
    width: 100vw;
    display: flex;
}
.button {
    line-height:1;
    cursor: pointer;
    user-select: none;
}
.medium-texts {
    font-size: var(--fontSizeMedium);
    font-weight: var(--fontWeightMedium);
    word-spacing: var(--wordSpacingMedium);
}
.big-texts {
    font-size: var(--fontSizeBig);
    word-spacing: var(--wordSpacingSmall);
    letter-spacing: var(--letterSpacingSmall);
    font-weight: var(--fontWeightThin);
}
.hidden {
    display:none !important;
}
body.dark {
    background:#2b2b36;
}
.dark :is(#mycelium-canvas,#mushroom-canvas){
    filter:invert(100%);
}

@media (max-width:505px){
    :root {
        --fontSizeBig: 1.3em;
        --fontWeight:480;
        --fontWeightMedium: 480;
        --fontWeightThin: 430;
        --letterSpacing:-.008em;
    }
    .dark #intro {
        background: linear-gradient(to bottom, var(--bgColor4),#1ba492e8);
    }
    .dark #controls {
        color: var(--textColor2);
    }
    nav {
        width: 100vw;
        right:0;
        top: 0;
        justify-content: space-between;
        align-items: start;
        padding-top: calc(var(--margin) + .2ch);
    }
    nav .mode-sound.desktop {
        display: none;
    }
    nav > div.one {
        display: flex;
        justify-content: end;
        gap: 1ch;
    }
    nav .button {
        padding: .6ch var(--margin);
        background:transparent;
        color: var(--textColor);
    }
    nav .button.off {
        text-decoration: line-through;
    }
    nav.light-texts .button {
        color: var(--textColor2);
    }
    nav .about {
        text-align: center;
    }
    nav .myths {
        text-align: end;
    }
    nav .myths.pop {
        background:#d03333;
        color: honeydew;
    }
    nav .add-new {
        position: absolute;
        width: 100vw;
        display:flex;
        align-items: end;
        right:0;
        margin-top: 1ch;
        gap: var(--margin);
    }
    nav .add-new .button {
        flex:2;
        width: inherit;
        opacity: .3;
        text-align: end;
        border-bottom: 1px solid var(--textColor);
    }
    nav .add-new .add-now.selected::before{
        content: '☻';
        opacity: .15;
        color: yellow;
    }
    nav .add-new .clear-all.selected::before{
        content: '☹︎';
        opacity: .12;
        color: red;
    }
    nav .add-new .button.selected::before{
        display: inline-block;
        position: absolute;
        left: 0;
        top: 50%;
        font-size: 5em;
        transform: translate(0,-58%);
        z-index: -1;
    }
    nav .add-tally {
        flex:3;
        padding: 1.25ch var(--margin) 0 var(--margin);
        display: flex;
        flex-direction: column;
        gap: 1ch;
        line-height: .7;
    }
    nav .add-tally .separator {
        border-bottom: 1px solid var(--textColor);
        margin: 0 2px;
    }
    #intro {
        background: linear-gradient(to bottom,var(--bgColor2),#ff6127e8);
    }
    #intro #about {
        text-align: left;
        padding: var(--margin);
        padding-right: 2ch;
        padding-top: 5ch;
        height: 100%;
        width: 100vw;
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: center;
        gap: 3ch;
    }
    #intro #about .close.button {
        position: absolute;
        bottom: calc(var(--marginBig)*2);
        right:0;
        width: 12ch;
        border-bottom: 1px solid var(--textColor);
        font-size: 1.1em;
        font-weight: var(--fontWeightThin);
    }
    #selector {
        background: linear-gradient(to bottom, var(--bgColor4),#7a768be8);
    }
    #selector .wheel {
        top: 5vh;
        left:calc(var(--margin) *-1 - 2.5ch);
    }
    #selector .buttons .button {
        color: #e0e8e0;
        font-weight: 400 !important;
        width: 32px;
        height: 32px;
        right: var(--marginBig);
        box-shadow: 0 0 8px 9px var(--textColor),
            0 0 15px 16px #7260e4;
    }
    #selector .buttons .button.top {
        top:calc(50% + 5vh - 9ch);
    }
    #selector .buttons .button.bottom {
        bottom:calc(50% - 5vh - 9ch);
    }
    #selector .buttons .button.pin {
        padding-right: .1ch;
        top: calc(50% + 5vh);
        transform: translateY(-50%);
    }
    #selector #profile {
        right:auto;
        left:0;
        transform: none;
        width:85vw;
        min-width:300px;
    }
    #selector #profile .desc-wrapper {
        width: 85vw;
        left:50%;
        bottom:calc(var(--margin) + 20ch);
        transform:translate(-50%,100%);
    }
    #selector #profile .myth-desc {
        color: var(--textColor);
        font-weight: var(--fontWeight);
        padding: 3ch 2ch;
    }
    #selector .myth-head .delete.button {
        display: none;
    }
    #selector .myth-head:last-child .delete.button{
        display: flex;
    }
    #selector .notes {
        display: none;
    }
    #controls {
        justify-content: space-between;
        flex-direction: row-reverse;
    }
    #controls .button {
        padding: var(--margin);
    }
    .button {
        text-transform: uppercase;
    }
}
@media (min-width:505px){
    .dark :is(nav,#controls) .button {
        opacity: .5;
    }
    nav {
        top:0;
        left:0;
        justify-content: space-between;
        width: 100vw;
    }
    nav :is(.mode,.sound).mobile {
        display: none;
    }
    nav .mode-sound.desktop {
        position: fixed;
        left:0;
        bottom: var(--marginBig);
        text-align: end;
        display: flex;
        flex-direction: column;
        align-items:stretch;
        gap: .5ch;
    }
    nav .mode-sound.desktop .button {
        padding-left: calc(var(--marginBig) + 1ch);
        width:auto;
    }
    nav .mode-sound.desktop .button.off {
        text-decoration: line-through;
        text-decoration-color: honeydew;
    }
    nav .button {
        opacity: .3;
        padding: .4ch .6ch;
    }
    nav > div.one {
        display: flex;
        flex-direction: column;
        gap: .5ch;
        margin-left: var(--marginBig);
        align-items: end;
        transform: rotate(-90deg) translateX(-100%);
        transform-origin: top left;
    }
    nav > div.one .button {
        width: 7ch;
    }
    nav > div.one .button.selected {
        width: 10ch;
    }
    nav > div.two {
        margin-top: var(--marginBig);
        display: flex;
        flex-direction: column;
        align-items: end;
        gap: .5ch;
    }
    nav > div.two .button {
        width: 9ch;
    }
    nav > div.two .button.selected,
    nav .add-new .button {
        width: 12ch !important;
    }
    nav .add-tally {
        padding: 1ch var(--marginBig) 1.6ch .9ch;
        display: flex;
        flex-direction: column;
        gap: 1.2ch;
        line-height: .7;
    }
    nav :is(.add-now,.clear-all)::before {
        content:'⃠';
        position: absolute;
        left:0;
        transform:translateX(calc(-100% - .5ch));
        color: honeydew;
    }
    nav :is(.add-now,.clear-all).selected::before{
        content:'';
    }
    @keyframes slam {  
        0% {
            transform: translate(calc(-100% - 5ch),-45%) scale(-1,.9);
        }
        15% {
            transform: translate(-100%,-45%) scale(-.5,1.3);
        }
        30% {
            transform: translate(-100%,-45%) scale(-1,1);
        }
        100% {
            transform: translate(calc(-100% - 5ch),-45%) scale(-1,.8);
        }
    }
    @keyframes dented {
        12% {
            left:0;
        }
        16% {
            left:6px;
        }
        40% {
            left:0;
        }
    }
    nav .myths.button.pop {
        opacity: 1!important;
        position: relative;
        transition: all 500ms ease;
        animation: dented 650ms ease infinite forwards;
    }
    nav .myths.button.pop::before {
        content:'👀';
        position: absolute;
        left:0;
        top:50%;
        font-size: 1.2em;
        background: #ed3d3d;
        border-radius: 100%;
        padding-right: .4ch;
        padding-left: .1ch;
        box-shadow: 0 0 4px 8px #ed3d3d;
        animation: slam 650ms ease infinite forwards;
        z-index:-1;
    }
    #canvas-wrapper::after {
        content: ' ';
        position:absolute;
        left:0;
        top:0;
        width: 100vw;
        height:100vh;
        box-shadow: inset 0 0 var(--marginBig) calc(var(--marginBig)*.75) var(--borderColor1);
    }
    .dark #canvas-wrapper::after{
        box-shadow: inset 0 0 var(--marginBig) calc(var(--marginBig)*.75) var(--borderColor2);
    }
    #intro {
        /* background: #673c1e; */
        background: radial-gradient(transparent,#673c1e);
    }
    #intro #about {
        color: honeydew;
        padding: var(--marginBig);
        height: 100vh;
        width:100vw;
        display: flex;
        flex-direction: column;
        gap: 3ch;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 2ch;
        padding-top: 7ch;
        border-radius: 100%;
        background: var(--textColor);
        box-shadow: 0 0 50px 60px var(--textColor),
            0 0 80px 90px #4e4bff,
            0 0 90px 100px #ff751f;
    }
    #intro #about p {
        max-width:78ch;
    }
    #intro #about .close.button {
        position: absolute;
        bottom: 50%;
        right: 0;
        font-size: 1.3em;
        font-weight: var(--fontWeightThin);
        text-align: left;
        width: 15vw;
        border-bottom: 1.5px solid honeydew;
    }
    #selector {
        background:radial-gradient(#7e78a1de,#8d8f71de);
        background-size: 5px;
        box-shadow: inset 0 0 var(--marginBig) calc(var(--marginBig)*.75) #8284d0;
    }
    #selector .wheel {
        width: 30ch;
        height: 30ch;
        left:12ch;
    }
    #selector .buttons .button{
        right: calc(var(--marginBig) + var(--margin));
        width: 35px;
        height: 32px;
        box-shadow: 0 0 9px 10px var(--textColor),
            0 0 17px 18px #7260e4;
        z-index:999;
    }
    #selector .buttons .button.top {
        top:calc(50% - 10ch);
    }
    #selector .buttons .button.bottom {
        bottom:calc(50% - 10ch);
    }
    #selector .buttons .button.pin {
        top: 50%;
        transform: translateY(-50%);
    }
    #controls {
        flex-direction: column;
        align-items: end;
        bottom: var(--marginBig);
        gap: .5ch;
    }
    #controls .button {
        opacity: .3;
        background: var(--textColor);
        color: honeydew;
        padding: .4ch .6ch;
        width: 10ch;
    }
}
@media (hover:hover){
    .button:hover {
        opacity: 1 !important;
    }
    .clear-all:hover{
        color: honeydew;
    }
}