@font-face {
    font-family: 'fuzzy'; 
    src: url('https://snorlax.space/fonts/fuzzy.tff'); /*URL to font*/
}

@font-face {
    font-family: 'Pixeloid'; 
    src: url('https://snorlax.space/fonts/Pixeloid.tff'); /*URL to font*/
}


@media only screen and (min-width: 700px) {
#skip-to-content-link {
  position: fixed;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 0.375rem 0.75rem;
  line-height: 1;
  font-size: 1.25rem;
  background-color: var(--content-background-color);
  color: var(--text-color);
  transform: translateY(-3rem);
  transition: transform 0.1s ease-in;
  z-index: 99999999999;
}

#skip-to-content-link:focus,
#skip-to-content-link:focus-within {
  transform: translateY(0);
}

#statuscafe {
    padding: .5em;
    border: var(--c-bord);
    background-color: var(--c-bg);
    border-radius: 25px;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}

.topnav {
  display: none;
}

.topnav #myLinks {
  display: none;
}

body {
    background-image: url(/img/bg.jpg);
    background-size: cover;
    background-color: #f28841;
    color: var(--text);
    width: auto;
    height: 90vh;
    margin: auto;
    font-family: Verdana, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    text-align: center;
}

hr {
    border: var(--c-bord);
}

a {
    color: var(--link);
}

a:visited {
    color: var(--link-v);
}


.page {
    display: grid;
    grid-template-rows: [header] 1fr [body] 2fr [extra] 2fr [footer] auto;
    grid-template-columns: [menu] 31vh [content] 1fr [info] 31vh;
    grid-template-areas:
        "logo title feed"
        "menu main status"
        "credit main music"
        "theme main music";
    gap: 10px;
    margin: 1.5em 10em;
    padding: 1em;
    width: fit-content;
    height: 88vh;
    border: var(--b-bord);
    background-color: var(--b-bg);
    background-image: var(--b-bg-img);
    border-radius: 25px;
}

.logo {
    grid-column: menu;
    grid-row: header;
    grid-area: logo;
    padding: 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logoimg {
    width: 200px;
    height: auto;
    margin: auto;
}

.title {
    grid-column: content;
    grid-row: body;
    grid-area: title;
    padding: 1em;
    text-align: center;
}

.feed {
    grid-column: info;
    grid-row: header;
    grid-area: feed;
    padding: 1em;
    overflow-y: scroll;
}

.menu {
    grid-column: menu;
    grid-row: body;
    grid-area: menu;
    padding: 1em;
    text-align: center;
}

.theme {
    grid-column: menu;
    grid-row: extra;
    grid-area: theme;
    padding: 1em;
    text-align: center;
    align-self: end;
}

.btn:hover {
  background-image: -webkit-linear-gradient(top, var(--btn-h1), var(--btn-h2));
  background-image: -moz-linear-gradient(top, var(--btn-h1), var(--btn-h2));
  background-image: -ms-linear-gradient(top, var(--btn-h1), var(--btn-h2));
  background-image: -o-linear-gradient(top, var(--btn-h1), var(--btn-h2));
  background-image: linear-gradient(to bottom, var(--btn-h1), var(--btn-h2));
}

.btn {
  background-color: var(--btn-clr);
  color: #000000;
  font-family: 'Pixeloid';
  background-image: linear-gradient(
    180deg,
    var(--btn-clr) 0%,
    rgba(238, 238, 238, 0.008) 100%
  );
  display: inline-block;
  width: auto;
  text-decoration: none;
  padding: 5px;
  line-height: 1;
  border: var(--btn-b);
  border-radius: 0.5em 0.5em 0.5em 0.5em;
  box-shadow: inset 0px 0px 6px -10px #42424244,
    inset -13px 0px 6px -10px #42424242,
    inset 0px 13px 6px -10px #ffffff80,
    inset 0px -13px 6px -10px #42424227;
  margin: 0.2em auto;
}

.music {
    grid-column: info;
    grid-row: extra;
    grid-area: music;
    padding: 2px 1em;
    overflow-y: scroll;
}

.main {
    grid-column: content / span 2;
    grid-row: body;
    grid-area: main;
    padding: 1em;
    overflow-y: scroll;
}

.fan {
    grid-column: info;
    grid-row: body;
    grid-area: fan;
    padding: 5px;
}

.status {
    grid-column: info;
    grid-row: extra;
    grid-area: status;
}

.credit {
    grid-column: info;
    grid-row: footer;
    grid-area: credit;
    padding: 0.5em 1em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-self: end;
}

.title, .feed, .theme, .music, .main, .credit {
    border: var(--c-bord);
    background-color: var(--c-bg);
    border-radius: 25px;
}


::-webkit-scrollbar {
width: 0px;
background-clip: padding-box;
}


.marquee {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 150px;
  overflow-x: hidden;
  overflow-y: hidden;
}

.track {
  position: absolute;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 10s linear infinite;
}

.track:hover {
    animation-play-state: paused;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marq {
    height: 150px;
    width: auto;
}

.music-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
}