﻿@media screen and (max-width:500px)
{
    .brand-name
    {
        color: White;
        word-spacing:7px;
        letter-spacing:1px;
        font-size: 1.2rem;
        text-decoration:none;
    }
    .flipcard
    {
        width: 150px;
        height: 100px;
        perspective: 1000px;
    }
    #qc .d-flex
    {
        display:inline-block!important;
    }
    #qc .quiz-overlay
    {
        padding-top: 6.5rem;
        font-size: 1.1rem;
    }
    #menu .nav-link
    {
        border:1px solid white;
        border-radius:10px;
        text-align:center;
        margin-bottom:10px !important;
    }
    #menu button
    {
        margin-left: 150px;
    }
    #qc .play-now
    {
        font-size: 4rem !important;
    }
    #leaderboard-table .fs-4
    {
        font-size: 10px !important;
    }
    #leaderboard-table td,th
    {
        padding: 15px 0px !important;
    }
    #leaderboard-page
    {
        padding:0 !important;
        margin:0 !important;
    }
    #leaderboard-page h1,i
    {
        font-size: 1.5rem !important;
        padding-bottom:0 !important;
        padding-top: 10px;
    }
    #popup-play-btn
    {
        display:none;
    }
    #social-media-btns
    {
        margin-bottom: 2rem;
    }
    #feedback
    {
        margin-top: 2rem;
    }
    #admin
    {
        width: 90% !important;
        margin: 1rem !important;
    }
    #admin-dashboard
    {
        margin:10px !important;
    }
    #admin-dashboard .fs-5
    {
        font-size: 10px !important;
    }
    #admin-dashboard th,td
    {
        padding: 15px 0px !important;
    }
    #admin-dashboard tr td a
    {
        text-decoration:none;
        border-radius: 5px !important;
        background-color: white !important;
        padding: 5px !important;
        color: black;
        margin-right: 3px !important;
        font-size: 10px !important;
        font-weight:bold !important;
    }
    #admin-container
    {
        padding: 0 !important;
        margin: 0 !important;
    }
}
@media screen and (max-width:900px)
{
    .planets-col
    {
        display : block !important;
    }
}