@media screen and (max-width: 768px) {
    html {
        min-height: 100% !important;
    }

    body {
        margin: 0;
    }

    #decorations {
        display: none;
    }

    #headerlinks {
        bottom: 5px;
        float: right;
        font-size: 90%;
        max-width: 80%;
        position: absolute;
        right: 10px;
        text-align: right;
    }

    #main {
        margin: 12% auto 5%;
    }

    #logotext {
        height: auto;
    }

    #logoimg {
        height: 100%;
        max-height: 36px;
        position: relative;
        width: auto;
    }

    #headerlinks,
    #footerlinks {
        display: none;
    }

    .hamburger {
        cursor: pointer;
        display: block;
        float: right;
        margin: 10px 32px 32px auto;
    }

    .hamburgerlinks {
        background-color: #f0f8ff;
        display: block;
        max-height: 0;
        overflow: hidden;
        padding-right: 10px;
        text-align: right;
        top: 0;
        transition: max-height 0.3s ease;
        width: 100%;
    }

    .hamburger:checked ~ .hamburgerlinks {
        max-height: 22em;
        padding-bottom: 1em;
    }

    .hamburger:before {
        background: #f0f8ff url("/includes/img/hamburger.png") no-repeat center/cover;
        content: " ";
        cursor: pointer;
        display: inline-block;
        height: 34px;
        opacity: 1;
        pointer-events: none;
        width: 32px;
    }

    .hamburger:checked:before {
        background: #f0f8ff url("/includes/img/hamburger-pressed.png") no-repeat center/cover;
    }

    #adminpanelbiglist {
        word-break: break-all;
    }

    #headermobilehack {
        display: block;
        height: 55px;
        position: absolute;
        width: 85%;
    }

    #leaderboardlinksholder {
        margin: 1em auto 2em;
        text-align: center;
    }
}

@media screen and (max-width: 620px) {
    .coloreditor {
        flex-flow: column nowrap;
    }

    .colorsliders {
        width: 100%;
    }

    .colorslider {
        min-width: 200px;
    }

    .colorswatches {
        width: 100%;
    }

    .itemdescription {
        display: none;
    }

    .homepage table,
    .homepage tbody,
    .homepage tr,
    .homepage td,
    #lead-mini table,
    #lead-mini table tbody {
        display: block;
    }

    #mobilead {
        display: block;
        font-size: small;
        margin: 20px auto 40px;
        max-height: 260px;
        max-width: 300px;
        text-align: center;
    }

    #ad {
        display: none;
    }

    #main,
    #announcements,
    #footer {
        max-width: 300px;
        min-width: 100%;
    }

    #main {
        margin: 15% auto 5%;
    }

    #title {
        font-size: 135%;
        text-align: center;
    }

    #lead-mini tr,
    #leaderboard tr {
        clear: both;
        display: block;
        list-style: none;
        margin: 1px 0;
        text-align: center;
    }

    #lead-mini tr:after,
    #leaderboard tr:after {
        clear: both;
        content: "";
        display: block;
    }

    #lead-mini td.tabletitle {
        background-color: rgba(255, 255, 255, 0.75);
        margin-bottom: 4px;
        text-align: center;
    }

    #lead-mini td,
    #leaderboard td {
        display: block;
        padding-left: 0;
    }

    #lead-mini td.colname,
    #leaderboard td.colname {
        display: none;
    }

    #lead-mini .rank,
    #leaderboard .rank {
        display: block;
        float: left;
        font-size: 150%;
        left: 0;
        line-height: 33px;
        min-width: 58px;
        padding: 5px 5px;
        text-align: center;
        top: 0;
    }

    #lead-mini .petname,
    #leaderboard .petname {
        display: block;
        margin-left: 63px;
        margin-top: 2px;
        padding-left: 0;
        padding-top: 10px;
    }

    #lead-mini .ownername:before,
    #leaderboard .ownername:before {
        content: none;
    }

    #lead-mini .ownername,
    #leaderboard .ownername {
        clear: none;
        font-size: 80%;
        margin-bottom: -11px;
        margin-left: 63px;
        padding-bottom: 13px;
    }

    #lead-mini .clicks,
    #leaderboard .clicks {
        clear: both;
        float: left;
        margin-top: -14px;
        min-width: 58px;
        padding: 0 0 5px;
        position: relative;
        text-align: center;
    }

    #lead-mini .clicks:before #leaderboard clicks:before {
        content: none;
    }

    #lead-mini tr.odd,
    #lead-mini tr.even,
    #leaderboard tr.odd,
    #leaderboard tr.even {
        background-color: transparent;
        min-height: 63px;
        position: relative;
    }

    #lead-mini tr.odd td,
    #leaderboard tr.odd td {
        background-color: rgba(255, 255, 255, 0.35);
    }

    #lead-mini tr.even td,
    #leaderboard tr.even td {
        background-color: rgba(255, 255, 255, 0.6);
    }

    #leaderboardlinksholder {
        margin: 1em auto 0;
        text-align: center;
    }

    #accountsettings,
    #adoptpagepw {
        width: 100%;
    }

    #adoptpagepw {
        margin-bottom: 5%;
    }

    #content > a {
        text-align: center;
    }

    #petprofilemain {
        height: 400px;
        position: relative;
    }

    #petprofiletext {
        float: none;
        height: 200px;
        position: absolute;
        top: 200px;
        width: 100%;
    }

    #petprofileadopt {
        height: 275px;
        position: relative;
    }

    #petprofiletextadopt {
        float: none;
        height: 50px;
        position: absolute;
        top: 200px;
        width: 100%;
    }

    #petholder {
        float: none;
        height: 200px;
        position: absolute;
        top: 0;
        width: 100%;
    }

    #embedmain {
        float: none;
        position: relative;
    }

    #stats #statsleft,
    #stats #statsright {
        float: none;
        width: 100%;
    }

    #stats {
        height: auto;
    }

    #petmakermain {
        display: flex;
        flex-flow: column-reverse nowrap;
        height: auto;
    }

    #petpreview {
        height: 200px;
        margin-bottom: 20px;
        top: unset;
        width: 100%;
    }

    #petmodifier {
        float: none;
        position: unset;
        top: unset;
        width: 100%;
    }

    .editequip table td {
        display: table-row;
        text-align: center;
        width: 100%;
    }

    #headerlogo {
        height: 55px;
        text-align: center;
        vertical-align: bottom;
        width: 100%;
        z-index: -3;
    }

    #logotext {
        display: inline-block;
        height: auto;
        margin-left: -2.4em;
        max-height: 40px;
        max-width: 249px;
        right: auto !important;
        top: 16%;
        width: 60% !important;
    }

    #logoimg {
        bottom: -10px;
        float: left;
        margin-left: 0.6em;
    }
}

@media screen and (max-width: 425px) {
    #content {
        padding: 10px;
    }

    #main {
        margin: 20% auto 5%;
    }
}