* {
  box-sizing: border-box;
}

.flex-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  margin-top: 25px;
margin-left: 100px;
margin-right: 100px;
text-align: center;
max-height: 1000px;
}

.header {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  background: none;
  border: none;
  margin: 0px;
}

.left {
  margin: 10px;
  flex: 33.33%;
  max-width:300px;
  overflow: scroll;
}
.middle {margin: 10px;
overflow: scroll;
max-width:500px;
flex:33.33%;}

.right {
  margin: 10px;
  overflow: scroll;
  flex: 33.33%;
  max-width:300px;
}

.div2
{background-image: url("/images/back01.gif");
background-position: top left;
background-repeat: repeat;
overflow: scroll;
}
#statuscafe {
    padding: .5em;
    background-color: azure;
    border: 1px solid midnightblue;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}



.audio-player {
    width: 300px;
    text-align: center;
    background: #00e5ff;
background: linear-gradient(180deg, rgba(0, 229, 255, 1) 0%, rgba(148, 255, 250, 1) 35%, rgba(255, 255, 255, 1) 83%);
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}



/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 1500px) {
  .left, .middle, .right {
    flex: 100%;
  }
}

        :-webkit-scrollbar {
        width: 16px;
        height: 16px;
        }

        ::-webkit-scrollbar-track {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
        image-rendering: optimizeSpeed;
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        }

        ::-webkit-scrollbar-track:active {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==");
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        }

        ::-webkit-scrollbar-thumb {
        border-top: 1px solid #cccccc;
        border-left: 1px solid #cccccc;
        border-right: 1px solid black;
        border-bottom: 1px solid black;
        box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
        width: 16px;
        height: 16px;
        background-color: #cccccc;
        z-index: 1;
        }

        ::-webkit-scrollbar-corner {
        background-color: #cccccc;
        }

        ::-webkit-resizer {
        width: 16px;
        height: 16px;
        background-color: #cccccc;
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
        background-position: bottom right;
        background-repeat: no-repeat;
        image-rendering: optimizeSpeed;
        }

        ::-webkit-scrollbar-button,
        .scroll::-webkit-scrollbar-button {
        border-top: 1px solid #cccccc;
        border-left: 1px solid #cccccc;
        border-right: 1px solid black;
        border-bottom: 1px solid black;
        box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
        display: block;
        width: 16px;
        height: 16px;
        background-color: #cccccc;
        image-rendering: optimizeSpeed;
        background-repeat: no-repeat;
        background-position: center center;
        }

        ::-webkit-scrollbar-button:active,
        .scroll::-webkit-scrollbar-button:active {
        background-position: 2px 2px;
        }

        ::-webkit-scrollbar-button:horizontal:decrement,
        .scroll::-webkit-scrollbar-button:horizontal:decrement {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
        }

        ::-webkit-scrollbar-button:horizontal:increment,
        .scroll::-webkit-scrollbar-button:horizontal:increment {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
        }

        ::-webkit-scrollbar-button:vertical:decrement,
        .scroll::-webkit-scrollbar-button:vertical:decrement {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");
        }

        ::-webkit-scrollbar-button:vertical:increment,
        .scroll::-webkit-scrollbar-button:vertical:increment {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");
        }

        ::-webkit-scrollbar-button:horizontal:increment:start,
        .scroll::-webkit-scrollbar-button:horizontal:increment:start {
        display: none;
        }

        ::-webkit-scrollbar-button:horizontal:decrement:end,
        .scroll::-webkit-scrollbar-button:horizontal:decrement:end {
        display: none;
        }

        ::-webkit-scrollbar-button:vertical:increment:start,
        .scroll::-webkit-scrollbar-button:vertical:increment:start {
        display: none;
        }

        ::-webkit-scrollbar-button:vertical:decrement:end,
        .scroll::-webkit-scrollbar-button:vertical:decrement:end {
        display: none;
        }

        ::-webkit-scrollbar-button:active,
        .scroll::-webkit-scrollbar-button:active {
        border-top: 1px solid #868a8e;
        border-left: 1px solid #868a8e;
        border-bottom: 1px solid #868a8e;
        border-right: 1px solid #868a8e;
        box-shadow: none;
        }

.wiggle {
  animation: wiggle 2s;
  animation-iteration-count: infinite;
}

@keyframes wiggle {
  0% { transform: translate(1px, 1px) rotate(5deg); }
  10% { transform: translate(-1px, -2px) rotate(10deg); }
  20% { transform: translate(-3px, 0px) rotate(15deg); }
  30% { transform: translate(3px, 2px) rotate(20deg); }
  40% { transform: translate(1px, -1px) rotate(15deg); }
  50% { transform: translate(-1px, 2px) rotate(5deg); }
  60% { transform: translate(-3px, 1px) rotate(-15deg); }
  70% { transform: translate(3px, 1px) rotate(-20deg); }
  80% { transform: translate(-1px, -1px) rotate(-15deg); }
  90% { transform: translate(1px, 2px) rotate(-10deg); }
  100% { transform: translate(1px, -2px) rotate(5deg); }
}