body{
    background: var(--bg);
    cursor:crosshair;
}
#d3crete{
    overflow-x: scroll;
    width: 94%;
    position: absolute;
    display: flex;
    flex-wrap: nowrap;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
}
#d3crete::-webkit-scrollbar{
    display: none;  /* Older Safari and Chromium */
}
#navsection{
    filter: url(#wavy);

    position: fixed;
    left: calc(100vw / 3);
    top: 0px;
    width: calc(calc(100vw / 3) * 2);
    height: 100vh;    

}
#navsection:hover{
    cursor:none;
}

.lignedecrete{
 /*   width: 680%;
    margin-bottom: 10%;
    margin-top: 10%;*/
}

.cretecont{
    width: 680%;
  margin-bottom: 10%;
  margin-top: 10%;
  flex-shrink: 0;
  border: 2px solid var(--hilight);
  border-left: 0px;
  border-right: 0px;
  padding-top:4%
}

path{
    stroke: var(--hilight) !important;
  stroke-width: 1px !important;
}

.cretecont span{
    width: 680%;
  height: 30px;
  position: absolute;
  top: 14%;
  left: auto;
  color: var(--hilight);
  text-align: center;
  text-align-last: justify;
  font-family: "Peix";
  font-variation-settings: "VOID" 589, "BLCK" 99, "LONG" 400, "ROND" 0;
  font-size: 3vh;
  text-wrap: nowrap;
 b {
    opacity: 0%;
  }
}
.pointchemin{
    border: 0px solid #f2245e;
    background-color: #f2245e;
    width: 20px;
    height: 20px;
    position: absolute;
    margin-top: 14%;
    transform: rotate(45deg);

}

.sent{
    filter: sepia(0.7);
}

.pointchemin:hover{
    cursor:none;
    pointer-events: all;
    border: 0px solid #eaeaea;
    background-color: #eaeaea;    
    animation: rotate infinite linear 5s;
    filter: drop-shadow(0px 0px 5px white) brightness(200%);

}

#txtsquare{
    width: 50vh;
    height: 30vh;
    position: fixed;
    border: 2px solid var(--hilight);
    background: transparent;
    bottom: 13vh;
    left: calc(calc(calc(100vw / 3) * 2 ) - 25vh);
    transform: rotate(45deg) skewY(-2009deg);
    z-index: 0;
    text-align: center;
    padding: 0% 2%;
    box-sizing: border-box;
    font-size: 2.7rem;
    font-family: "Peix";
    color: var(--hilight);
    line-height: 95%;
    filter: brightness(1.3);
    transition: transform ease 0.5s;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */}
/*
#txtsquare:after{
    content: ">>>>";
  transform: rotate(-90deg) translateX(-20%) translateY(160%);
  position: absolute;
  font-size: 5rem;
  background: var(--hilight);
  color: var(--bg);
}*/
#txtsquare:hover{
    cursor: none;
    transform: rotate(45deg) skewY(-2009deg) translateY(5%);

}
#questsection{
    width: calc( calc(100vw / 3) + 2.75vw);
    left: 0px;
    position: absolute;
    height: 100%;
    top: 0px;
    border-right: 4px solid var(--hilight);
    box-sizing: border-box;
    background: var(--bg);
    z-index: 10;
    padding: 1% 0% 6% 0%;
    display: flex;
    justify-content: safe end;
    flex-direction: column;
    gap: 0%;
    overflow-y: scroll;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
    scroll-behavior: smooth;
}
#questsection::-webkit-scrollbar{
    display: none;  /* Older Safari and Chromium */
}
/*
#questsection p:last-child:after{
    content:">>";
    position: relative;
    display: block;
    margin-top: 1%;
    margin-inline-start: auto;
    animation: blink 4s infinite linear;
    transform: rotateX(90deg);
}   
*/
.you{
    height: auto;
    color: var(--hilight);
    margin: 0;
    font-family: "Amiamie";
    border-top-left-radius: 12px;
    padding: 0% 15%;
    border-bottom-left-radius: 12px;
    align-self: center;
    width: 81%;
    opacity: 25%;

    animation: newchat 0.6s ease-out;
}
#questsection p{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
#questsection p:last-child{
opacity: 100%;
}

.youi{
    height: auto;
    color: var(--bg);
    background: var(--hilight);
    font-family: "Amiamie";
    padding: 2% 6% 2% 1%;
    align-self: start;
    width: 100%;
    flex-shrink: 0;
    flex-grow: 0;
    animation: newchat 0.6s ease-out;
    font-size: smaller;
    margin: 2% 0%;
    text-wrap: balance;
    text-align: center;
    overflow: visible;
    opacity: 25%;
    filter:grayscale(1)
}

.them{
    height: auto;
    color: var(--bg);
    background: var(--hilight);
    font-family: "Amiamie";
    padding: 2% 6% 2% 1%;
    align-self: start;
    width: 100%;
    flex-shrink: 0;
    flex-grow: 0;
    animation: newchat 0.6s ease-out;
    font-size: smaller;
    margin: 2% 0%;
    text-wrap: balance;
    text-align: center;
    overflow: visible;
    opacity: 25%;

}

.cretecont svg{
   
}

:root{
    --hilight: #eda581;
    --bg: #06010a;

}

@keyframes rotate {
    0%{
        transform: rotate(45deg);
    }
    100%{
        transform: rotate(405deg);
    }
}

@keyframes newchat {
    0%{
        text-shadow:
  0px 0px 12px var(--hilight);

    }
    100%{
        text-shadow:
  0px 0px 0px var(--hilight);

    }
}

.badresponse{
    animation: badresponse 1.5s ease-out
}

.goodresponse{
    animation: goodresponse 1.5s ease-out;
}

@keyframes badresponse {
    0%{
        background: #f2245e;
        transform: rotate(45deg) skewY(-2009deg) translateY(10px);
    }
    35%{
        background-color: transparent;
        transform: rotate(45deg) skewY(-2009deg) translateY(-10px);
    }
    70%{
        background: #f2245e;
        transform: rotate(45deg) skewY(-2009deg) translateY(10px);
    }
    100%{
        background: #f2245e;
        transform: rotate(45deg) skewY(-2009deg) translateY(0px);
    }
}

@keyframes goodresponse {
    0%{
        background: #49da25;
        transform: rotate(45deg) skewY(-2009deg);
    }
    50%{
        background: #49da25;
        transform: rotate(45deg) skewY(-1009deg);
    }
    100%{
        background-color: transparent;
        transform: rotate(45deg) skewY(-2009deg);
    }
}

@keyframes blink {
    0%{
        opacity: 100;
    }    
    50%{
        opacity: 0;
    }
    100%{
        opacity: 100;
    }
}