@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
    background-color: hsl(0, 0%, 12%);
    color: hsl(0, 0%, 94%);
    font-family: "Roboto Condensed", sans-serif;
    /*overflow:hidden breaks any page with long content*/
}

.mm-svg-social {
    fill: hsl(0, 0%, 94%);
}

.mm-svg-social:hover {
    fill: hsl(216, 98%, 52%);
}

.mm-logo {
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s;
}

.mm-logo:hover {
    border-bottom-color: hsl(216, 98%, 52%);
}

.mm-nav-link {
    padding-top: 5px;
    padding-bottom: 0px;
    margin: 0;
    transition: color 0.3s;
}

.mm-nav-link:hover {
    color: hsl(216, 98%, 52%);
}

.mm-panel {
    background-color: hsl(0, 0%, 7%);
}

.mm-panel-nav {
    background-color: hsl(0, 0%, 7%);
    border-bottom: 1px solid hsl(216, 98%, 52%);
}

.mm-panel-footer {
    background-color: hsl(0, 0%, 7%);
    border-top: 1px solid hsl(216, 98%, 52%);
}

.mm-panel-error {
    background-color: hsl(0, 100%, 10%);
    border-top: 1px solid hsl(354, 70%, 54%);
}

.mm-carousel {
    /*preserve 16:9 ratio here*/
    max-width: 800px;
    max-height: 450px;
    margin: 0 auto;
    overflow: hidden;
}

.mm-sidebar-panel {
    background-color: hsl(0, 0%, 7%);
    min-width: 328px; /*fixed size to accommodate twitch embed*/
    max-width: 328px;
}

.mm-sidebar-link {
    text-decoration: none;
}

.mm-sidebar-link:hover .mm-sidebar-heading{
    color: hsl(216, 98%, 52%);
}

.mm-sidebar-heading {
    color: hsl(0, 0%, 94%);
    padding: 0;
    margin: 0;
}

.mm-sidebar-text {
    color: hsl(0, 0%, 94%);
    padding: 0;
    margin: 0;
}

.mm-sidebar-image {
    min-width: 75px;
    min-height: 75px;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    overflow: hidden;
}

.mm-embed-hidden {
    display: none;
}