* {
    box-sizing: border-box;
}

html {
    margin: auto;
    scroll-behavior: smooth;
}

body.light {
    --text: dark;
    --background: white;

}

body.dark {
    --text: white;
    --background: black;
}

body {
    color: var(--text);
    background: var(--background);
    text-rendering: optimizeLegibility;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    font-size: 16px;
    margin: 0;
    cursor: default;
}

nav {
    font-size: 20px;
    top: 0;
    z-index: 1;
    border-bottom-style: groove;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    width: max-content;
    margin: auto;
    /* display: flex; */
    /* background-color: rgb(0,0,0,95);
    color: rgb(255,255,255); */
}

nav a {
    text-decoration: none;
    padding: 8px;
}

nav a:hover {
    text-decoration: underline;
}

nav a:link, nav a:visited {
    color: var(--text);
    /* text-decoration: none; */
}

nav img {
    display: inline;
    max-height: 44px;
}

.main {
    padding: 25px 25px;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

.main h1 {
    font-size: 2.2rem;
    margin: 0;
    padding-top: 30px;
    text-align: center;
}

.main p {
    font-size: 1.5em;
    margin: 0;
    padding-top: 10px;
}

.lists, .news, .resources, .topics, .songs, .videos {
    padding: 95px 25px;
    /* padding-bottom: 300px; */
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    /* border-bottom-style: solid;
    border-bottom-width: 1px; */
}

.lists h1, .news h1 , .resources h1, .topics h1, .songs h1, .videos h1 {
    font-size: 40px;
    margin: 0;
}

.resources h2, .topics h2, .songs h2, .videos h2 {
    font-size: 28px;
    font-weight: initial;
    margin: 0;
}

.lists p, .news p , .resources p, .topics p, .songs p, .videos p {
    font-size: 20px;
    margin: 0;
}

.topics a {
    text-decoration: none;
    padding: 8px;
}

.topics a:hover {
    text-decoration: underline;
}

.topics h2 a:link, .topics a:visited {
    color: var(--text);
    /* text-decoration: none; */
}

.songs .post, .topics .post {
    display: inline-block;
}


.post {
    /* background-color: rgb(146, 252, 252); */
    border-collapse: collapse;
    border-style: solid;
    /* border-width: 1px; */
    /* filter: drop-shadow(0 0 2px rgb(0, 0, 0)); */
    width: auto;
    padding: 16px;
    margin: 20px;
    border-radius: 10px;
}

.post h1 {
    /* text-align: center; */
}

.post h2 {
    text-align: center;
    margin: 0;
}

.post h3 {
    margin: 0;
    font-size: 24px;
    text-align: center;
}

.post h4 {
    margin: 0;
    font-size: 24px;
    text-align: center;
    font-weight: lighter;
}

.post h5 {
    margin: 0;
    font-size: 20px;
    text-align: center;
}

.post p {
    padding-bottom: 10px;
    text-align: center;
}

.post a {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    margin: auto;
    padding: inherit;
}

.post a:link, a:visited {
    color: var(--text);
}

.post a:hover {
    text-decoration:overline;
}

.songs img, .topics img {
    display: grid;
    align-content: center;
    padding: auto;
}

.post img {
    margin: 10px;
    /* padding-left: 2.5px;
    padding-right: 2.5px; */
    margin-left: auto;
    margin-right: auto;
    max-height: 40px;
    filter: drop-shadow(0 0 2px rgb(0, 0, 0));
}



footer {
    text-align: center;
    text-align: -webkit-center;
    position: relative;
    bottom: 0;
    width: 100%;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px) grayscale(10) opacity(1);
    padding-top: 200px;
}


footer a {
    /* text-decoration: none; */
    padding: 8px;
}

footer a:hover {
    font-weight: bold;
}

footer a:link, footer a:visited {
    color: var(--text);
    /* text-decoration: none; */
}

@media (max-width: 850px) {
    .content {
        overflow-x: scroll;
        white-space: nowrap;
    }

    .hide-scrollbar::-webkit-scrollbar {
        display: none;
    }
    
    .content::-webkit-scrollbar {
        display: none;
      }

    .songs a {
        /* margin: inherit; */
    }
}