@keyframes stripes {
    from {
        background-position: 0 0;
    }
    to {
        background-position: var(--stripe-calc) 0;
    }
}

:root {
    --bg: white;
    --txt: black;
    --stripe-width: 8em;
    --stripe-calc: calc(var(--stripe-width) * 1.41421356237);
    --anim-time: 8s;
}


[data-theme='dark'] {
    --bg: black;
    --txt: white;
}

h1 {
    color: black;
}
.sendput {
    position: absolute;
}

.roomsList {
    list-style: none;
    padding-left: 0;
    margin-left: 0;

}
.roomsList li {
    cursor: pointer;
    width: fit-content;
}
.roomsList li:hover {
    text-decoration: underline;
}
.roomsListDiv {
    margin-left: 1vw;
}
.rooms {
    height: 85vh;
    width: 8vw;
    color: black;
    border: 1px black solid;
    overflow: hidden;
}

.messages {
    height: 80vh;
    overflow: scroll;
    overflow-x: hidden;
    overflow-wrap: break-word;
    width: 85vw;
    font-size: 14px;
}

body {
    background-color: white;
    font-family: Arial, Helvetica, sans-serif;
}
.usernameBg {
    color: black;
    padding: 4px;
    border-radius:2px;
    border: 1px solid black;
}
@media(max-width:500px) {
    .desktopDiv {
        display: none;
        color: white;
        position: absolute;
        left: 30px;
        top: 20vh;
    }

    .rooms {
        display: none;
        width: 50vw;
        overflow: scroll;
    }

    .sendput {
        bottom: 30px;
    }

    .showUsersMobile {
        display: block;
        position: absolute;
        bottom: 30px;
        right: 5px;
    }
    .showRoomsMobile {
        display: block;
        position: absolute;
        bottom: 60px;
        right: 5px;
    }
}

@media(min-width:500px) {
    .desktopDiv {
        color: white;
        position: absolute;
        right: 5px;
        top: 5px;
    }

    .showUsersMobile, .showRoomsMobile {
        display: none;
    }

    .messages {
        height: 85vh;
        position: absolute;
        left: 10vw;
        top: 80px;
    }

    .sendput {
        left: 10vw;
    }
}


.userP {
    color: black;
}

.msgText {
    color: black;
}
.iden{
    display: none;
}
#messages[data-show=true] div p .iden {
    display: inline;
    text-decoration: underline;
    font-size: 0.8em;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  
  @keyframes wave {
    0%   { transform: rotate(0deg) translateY(0px); }
    25%  { transform: rotate(5deg) translateY(-2px); }
    50%  { transform: rotate(0deg) translateY(0px); }
    75%  { transform: rotate(-5deg) translateY(2px); }
    100% { transform: rotate(0deg) translateY(0px); }
  }
  
  @keyframes glitch {
    0% { text-shadow: 2px 0 red, -2px 0 blue; }
    20% { text-shadow: -2px 0 red, 2px 0 blue; }
    40% { text-shadow: 2px 0 red, -2px 0 blue; }
    60% { text-shadow: -2px 0 red, 2px 0 blue; }
    80% { text-shadow: 2px 0 red, -2px 0 blue; }
    100% { text-shadow: none; }
  }
  
  .glitch {
    position: relative;
    animation: glitch 1s infinite;
  }
  
  .spoiler {
    background: black;
    color: black;
    cursor: pointer;
  }
  .spoiler:hover {
    color: white;
  }
  

@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-3px); }
}
.shake { display:inline-block; animation: shake 0.5s infinite; }

@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.bounce { display:inline-block; animation: bounce 0.8s infinite; }

@keyframes fade {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}
.fade { animation: fade 2s infinite; }

.rainbowtext {
  background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbowShift 3s linear infinite;
}
@keyframes rainbowShift {
  to { background-position: 200% center; }
}
@keyframes glow {
  from { text-shadow: 0 0 5px #ff66cc; }
  to { text-shadow: 0 0 20px #ff66cc; }
}
.glow { animation: glow 1.5s infinite alternate; }

@keyframes zoom {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.5); }
}
.zoom { display:inline-block; animation: zoom 1s infinite; }