/* grid */
.container {
    max-width: 1000px;
    margin: 50px auto;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 250px auto;
    grid-template-rows: 200px 1fr auto auto auto;
}

.movabletab1 {
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: 1;
}

.scrolling-afies {
    margin: 100px auto;
    width: 90%;
    display: flex;
    overflow-x: auto;
}

.scrolling-afies::-webkit-scrollbar {
    display: none;
}

.group {
    display: flex;
    flex-direction: row;
    gap: 10px;
    animation: spin 20s linear infinite;
}
.card {
    height: 31px;
    flex: 0 0 88px;
}

.container header {
    grid-row: 1;
    grid-column: 1 / -1;
}

.container nav {
    position: absolute;
    top: 270px;
    grid-row: 3;
    grid-column: 1;
}

.container .playlist
{
    grid-row: 4;
    grid-column: 2 / -1;
}

.container main {
    grid-row: 2;
    grid-column: 2;;
    overflow: auto;
}

.status {
    grid-row: 2;
    grid-column: 1;
    padding-bottom: 10px;
}

.container .chat {
    grid-row: 4;
    grid-column: 1;
}

.container footer {
    grid-row: 5;
    grid-column: 1 / -1;
}

/* fonts */
@font-face {
  font-family: 'MS San Serif';
  src: local('MS Sans Serif'), url('https://cdn.glitch.me/9bbfdfb3-4bfa-4c39-8743-5621c8b9df21/MS%20Sans%20Serif.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'PixeARG';
  src: url('https://rexxx.neocities.org/PIXEARG.TTF') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'PixeAB';
  src: url('https://rexxx.neocities.org/PIXEAB.TTF') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* animations */
@keyframes spin {
    from { translate: 0; }
    to { translate: -100%; }
}