@media only screen and (min-width:1280px) {
    .topSide {
        width: 100%;
    }
    .topSideLink {
        width: 100%;
        text-decoration: none;
        border: none;
    }
    .topSideImg {
        width: 100%;
        height: auto;
    }
    .sidePosts {
        width: 100%;
        height: auto;
        background-color: rgb(var(--main-1));
        padding-bottom: 10pt;
    }
    .side-h1 {
        width: 100%;
        padding: 12pt 8pt;
        font-size: 12pt;
        color: rgb(var(--white));
        background-color: rgb(var(--main-4));
        font-weight: bold;
    }
    .userLogin {
        display: grid;
        width: 100%;
        padding: 10pt 6pt;
        background-color: rgb(var(--main-1));
        grid-template-areas: 'photo header' 'photo posts' 'photo comments' 'photo signup';
        grid-template-columns: 100pt calc(100% - 105pt);
        column-gap: 5pt;
    }
    .userRegister {
        width: 100%;
        padding: 10pt 6pt;
        background-color: rgb(var(--main-1));
    }
    .profilePhoto {
        width: 100pt;
        height: 100pt;
        grid-area: photo;
    }
    .profileLinkPhoto {
        text-decoration: none;
        border: none;
    }
    .profileLinkPhoto:hover {
        cursor: pointer;
    }
    .profileLinkPhoto img {
        width: 100%;
        height: 100%;
    }
    .profileHeader {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        width: 100%;
        height: 25pt;
        background-color: rgb(var(--main-4));
    }
    .profileName {
        width: 90%;
        padding-left: 5pt;
        text-align: left;
    }
    .profileLinkName {
        text-decoration: none;
        font-size: 12pt;
        color: rgb(var(--white));
    }
    .profileLinkName:hover {
        cursor: pointer;
    }
    .profileLogout {
        width: 10%;
        padding-right: 5pt;
        text-align: center;
        color: rgb(var(--grey-6));
    }
    .profileLogout i:hover {
        cursor: pointer;
        color: rgb(var(--red-6));
    }
    .profileTotalPosts,
    .profileTotalComments,
    .profileSignup {
        width: 100%;
        height: 25pt;
        font-size: 12pt;
        color: rgb(var(--white));
        line-height: 25pt;
    }
    .profileTotalPosts i,
    .profileTotalComments i,
    .profileSignup i {
        color: rgb(var(--grey-5));
    }
    .userBtns {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        align-items: center;
        align-content: center;
        width: 100%;
        background-color: rgb(var(--main-1));
        padding: 5pt;
    }
    .profileBtn {
        text-decoration: none;
        color: rgb(var(--white));
        font-size: 12pt;
        padding: 6pt 12pt;
        background: rgb(var(--main-2));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
    }
    .profileBtn:hover {
        cursor: pointer;
        background: rgb(var(--main-3));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .profileBtn:active {
        background: rgb(var(--main-4));
        background: -webkit-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(180deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .loginBtns {
        width: 100%;
        padding: 12pt 0;
    }
    .loginBtn {
        display: block;
        width: 75%;
        margin: 6pt auto;
        text-decoration: none;
        font-size: 14pt;
        text-align: center;
        color: rgb(var(--white));
        padding: 4pt 0;
        background: rgb(var(--main-2));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
    }
    .loginBtn:first-child {
        margin-top: 0;
    }
    .loginBtn:last-child {
        margin-bottom: 0;
    }
    .loginBtn:hover {
        cursor: pointer;
        background: rgb(var(--main-3));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .loginBtn:active {
        background: rgb(var(--main-4));
        background: -webkit-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(180deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .socialLogin {
        margin: 16pt auto;
    }
    .facebookLogin {
        margin-bottom: 6pt;
        background: rgb(var(--fb-0));
        background: -webkit-linear-gradient(90deg, rgb(var(--fb-0)) 0%, rgb(var(--fb-1)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--fb-0)) 0%, rgb(var(--fb-1)) 100%);
        background: linear-gradient(0deg, rgb(var(--fb-0)) 0%, rgb(var(--fb-1)) 100%);
    }
    .facebookLogin:hover {
        background: rgb(var(--fb-1));
        background: -webkit-linear-gradient(90deg, rgb(var(--fb-1)) 0%, rgb(var(--fb-2)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--fb-1)) 0%, rgb(var(--fb-2)) 100%);
        background: linear-gradient(0deg, rgb(var(--fb-1)) 0%, rgb(var(--fb-2)) 100%);
    }
    .facebookLogin:active {
        background: rgb(var(--fb-2));
        background: -webkit-linear-gradient(-90deg, rgb(var(--fb-1)) 0%, rgb(var(--fb-2)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--fb-1)) 0%, rgb(var(--fb-2)) 100%);
        background: linear-gradient(180deg, rgb(var(--fb-1)) 0%, rgb(var(--fb-2)) 100%);
    }
    .googleLogin {
        margin-top: 6pt;
        color: rgb(var(--main-0));
        background: rgb(var(--grey-10));
        background: -webkit-linear-gradient(90deg, rgb(var(--grey-10)) 0%, rgb(var(--grey-11)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--grey-10)) 0%, rgb(var(--grey-11)) 100%);
        background: linear-gradient(0deg, rgb(var(--grey-10)) 0%, rgb(var(--grey-11)) 100%);
    }
    .googleLogin:hover {
        background: rgb(var(--grey-11));
        background: -webkit-linear-gradient(90deg, rgb(var(--grey-11)) 0%, rgb(var(--white)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--grey-11)) 0%, rgb(var(--white)) 100%);
        background: linear-gradient(0deg, rgb(var(--grey-11)) 0%, rgb(var(--white)) 100%);
    }
    .googleLogin:active {
        background: rgb(var(--grey-10));
        background: -webkit-linear-gradient(-90deg, rgb(var(--grey-11)) 0%, rgb(var(--white)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--grey-11)) 0%, rgb(var(--white)) 100%);
        background: linear-gradient(180deg, rgb(var(--grey-11)) 0%, rgb(var(--white)) 100%);
    }
    .loginForm,
    .loginPass,
    .loginRegister,
    .loginRegisterSuccess,
    .loginForgotSuccess {
        position: relative;
        width: 100%;
    }
    .sideLoading {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(var(--main-0), 0.5);
        z-index: 99;
    }
    .loadIcon {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 60pt;
        height: 60pt;
        -webkit-animation: load 2s linear infinite;
    }
    .loadIcon img {
        width: 100%;
        height: 100%;
    }
    .loginBoxHeader {
        width: 100%;
        height: 16pt;
        line-height: 16pt;
        text-align: right;
    }
    .loginBoxHeader i {
        font-size: 11pt;
        color: rgb(var(--grey-6));
    }
    .loginBoxHeader i:hover {
        cursor: pointer;
        color: rgb(var(--red-5));
    }
    #login {
        width: 100%;
    }
    .inputBox {
        width: 100%;
        margin: 5pt 0;
    }
    .inputBox:first-child {
        margin-top: 0;
    }
    .inputBox:last-child {
        margin-bottom: 0;
    }
    .inputBox label {
        display: block;
        width: 100%;
        font-size: 12pt;
        color: rgb(var(--white));
        text-align: left;
        height: 15pt;
        line-height: 15pt;
    }
    .inputLogin {
        width: 100%;
        border: none;
        border-bottom: 1pt solid rgb(var(--grey-5));
        padding: 5pt;
        font-size: 11pt;
        color: rgb(var(--white));
        background: rgb(var(--main-0));
    }
    .inputLogin:focus {
        border-bottom: 1pt solid rgb(var(--main-8));
    }
    input[type="submit"] {
        display: block;
        margin: 6pt auto;
        border: none;
        color: rgb(var(--white));
        font-size: 12pt;
        text-align: center;
        padding: 4pt 10pt;
        background: rgb(var(--main-2));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
    }
    input[type="checkbox"] {
        display: inline-block;
        width: 14pt;
        height: 14pt;
        background: rgb(var(--white));
        vertical-align: middle;
    }
    input[type="checkbox"]:checked {
        position: relative;
        background: rgb(var(--main-4));
    }
    input[type="checkbox"]:checked:before {
        content: "\f00c";
        font-family: var(--fa);
        color: rgb(var(--white));
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    input[type="checkbox"]+label {
        display: inline-block;
        width: auto;
    }
    input[type="submit"]:hover {
        cursor: pointer;
        background: rgb(var(--main-3));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    input[type="submit"]:active {
        background: rgb(var(--main-4));
        background: -webkit-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(180deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .loginLink {
        display: block;
        width: 100%;
        text-align: center;
        margin: 14pt 0;
        font-size: 9pt;
        color: rgb(var(--grey-5));
        text-decoration: none;
    }
    .loginLink:hover {
        cursor: pointer;
        color: rgb(var(--main-8));
    }
    .normalLink {
        color: rgb(var(--white));
        text-decoration: none;
    }
    .normalLink:hover {
        cursor: pointer;
        color: rgb(var(--main-8));
    }
    .wrong {
        display: none;
        font-size: 8pt;
        text-align: left;
        color: rgb(var(--red-5));
    }
    .registerSuccessText,
    .forgotSuccessText {
        width: 100%;
        text-align: center;
        font-size: 12pt;
        color: rgb(var(--white));
        margin: 12pt 0;
    }
    .loginForm,
    .loginPass,
    .loginRegister,
    .loginRegisterSuccess,
    .loginForgotSuccess {
        display: none;
    }
    .recomendedTags {
        width: 100%;
    }
    .tagBox {
        width: 100%;
        background: rgb(var(--main-1));
        padding: 8pt;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
        align-content: center;
    }
    .sideTag {
        font-size: 11pt;
        color: rgb(var(--white));
        text-decoration: none;
        background: rgb(var(--main-2));
        padding: 4pt 10pt;
        margin: 4pt;
        -webkit-border-radius: 4pt;
        -moz-border-radius: 4pt;
        border-radius: 4pt;
    }
    .sideTag:hover {
        cursor: pointer;
        background: rgb(var(--main-3));
    }
    .sideTag:active {
        background: rgb(var(--main-4));
    }
    .recLink {
        position: relative;
        width: calc(100% - 20pt);
        max-height: 200pt;
        display: block;
        text-decoration: none;
        border: none;
        overflow: hidden;
        margin: 10pt 10pt;
    }
    .recLink:first-child {
        margin-top: 0;
    }
    .recLink:last-child {
        margin-bottom: 0;
    }
    .recImg {
        width: 100%;
        height: auto;
    }
    .recText {
        position: absolute;
        left: 0;
        bottom: 0pt;
        width: 100%;
        height: 30pt;
        line-height: 22pt;
        padding: 4pt;
        font-size: 11pt;
        color: rgb(var(--white));
        background: rgba(var(--main-2), 0.8);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .recLink:hover {
        cursor: pointer;
        border: 2pt solid rgb(var(--main-6));
    }
    .sideComments {
        display: grid;
        width: calc(100% - 20pt);
        height: auto;
        grid-template-columns: 50pt calc(100% - 50pt);
        grid-template-areas: 'photo comment' 'photo date';
        text-decoration: none;
        margin: 10pt;
    }
    .sideComments:first-child {
        margin-top: 0;
    }
    .sideComments:last-child {
        margin-bottom: 0;
    }
    .sideComments:hover {
        cursor: pointer;
    }
    .sideCoUser {
        width: 50pt;
        height: 50pt;
        grid-area: photo;
    }
    .sideCoUser img {
        width: 100%;
        height: 100%;
    }
    .sideCoCom {
        display: -webkit-box;
        display: -moz-box;
        display: box;
        width: 100%;
        height: 35pt;
        color: rgb(var(--white));
        padding-left: 5pt;
        font-size: 12pt;
        line-height: 17.5pt;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -moz-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
    }
    .sideComments:hover .sideCoCom {
        font-weight: bold;
    }
    .sideCoDate {
        width: 100%;
        height: 15pt;
        padding-left: 5pt;
        font-size: 9pt;
        color: rgb(var(--grey-4));
    }
    @-webkit-keyframes load {
        0% {
            -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(1);
        }
        50% {
            -webkit-transform: translate(-50%, -50%) rotate(180deg) scale(1.25);
        }
        100% {
            -webkit-transform: translate(-50%, -50%) rotate(360deg) scale(1);
        }
    }
}

@media only screen and (min-width:900px) and (max-width:1279px) {
    .topSide {
        width: 100%;
    }
    .topSideLink {
        width: 100%;
        text-decoration: none;
        border: none;
    }
    .topSideImg {
        width: 100%;
        height: auto;
    }
    .sidePosts {
        width: 100%;
        height: auto;
        background-color: rgb(var(--main-1));
        padding-bottom: 10pt;
    }
    .side-h1 {
        width: 100%;
        padding: 12pt 8pt;
        font-size: 12pt;
        color: rgb(var(--white));
        background-color: rgb(var(--main-4));
        font-weight: bold;
    }
    .userLogin {
        display: grid;
        width: 100%;
        padding: 10pt 6pt;
        background-color: rgb(var(--main-1));
        grid-template-areas: 'photo header' 'photo posts' 'photo comments' 'photo signup';
        grid-template-columns: 60pt calc(100% - 62.5pt);
        column-gap: 2.5pt;
    }
    .userRegister {
        width: 100%;
        padding: 10pt 6pt;
        background-color: rgb(var(--main-1));
    }
    .profilePhoto {
        width: 60pt;
        height: 60pt;
        grid-area: photo;
    }
    .profileLinkPhoto {
        text-decoration: none;
        border: none;
    }
    .profileLinkPhoto:hover {
        cursor: pointer;
    }
    .profileLinkPhoto img {
        width: 100%;
        height: 100%;
    }
    .profileHeader {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        width: 100%;
        height: 20pt;
        background-color: rgb(var(--main-4));
    }
    .profileName {
        width: 80%;
        padding-left: 5pt;
        text-align: left;
    }
    .profileLinkName {
        text-decoration: none;
        font-size: 10pt;
        color: rgb(var(--white));
    }
    .profileLinkName:hover {
        cursor: pointer;
    }
    .profileLogout {
        width: 20%;
        padding-right: 5pt;
        text-align: center;
        color: rgb(var(--grey-6));
        font-size: 11pt;
    }
    .profileLogout i:hover {
        cursor: pointer;
        color: rgb(var(--red-6));
    }
    .profileTotalPosts,
    .profileTotalComments,
    .profileSignup {
        width: 100%;
        height: 13.33pt;
        font-size: 10pt;
        color: rgb(var(--white));
        line-height: 13.33pt;
    }
    .profileTotalPosts i,
    .profileTotalComments i,
    .profileSignup i {
        color: rgb(var(--grey-5));
    }
    .userBtns {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        align-items: center;
        align-content: center;
        width: 100%;
        background-color: rgb(var(--main-1));
        padding: 5pt;
    }
    .profileBtn {
        text-decoration: none;
        color: rgb(var(--white));
        font-size: 10pt;
        padding: 4pt 8pt;
        background: rgb(var(--main-2));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
    }
    .profileBtn:hover {
        cursor: pointer;
        background: rgb(var(--main-3));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .profileBtn:active {
        background: rgb(var(--main-4));
        background: -webkit-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(180deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .loginBtns {
        width: 100%;
        padding: 12pt 0;
    }
    .loginBtn {
        display: block;
        width: 75%;
        margin: 6pt auto;
        text-decoration: none;
        font-size: 14pt;
        text-align: center;
        color: rgb(var(--white));
        padding: 4pt 0;
        background: rgb(var(--main-2));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
    }
    .loginBtn:first-child {
        margin-top: 0;
    }
    .loginBtn:last-child {
        margin-bottom: 0;
    }
    .loginBtn:hover {
        cursor: pointer;
        background: rgb(var(--main-3));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .loginBtn:active {
        background: rgb(var(--main-4));
        background: -webkit-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(180deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .socialLogin {
        margin: 16pt auto;
    }
    .facebookLogin {
        margin-bottom: 6pt;
        background: rgb(var(--fb-0));
        background: -webkit-linear-gradient(90deg, rgb(var(--fb-0)) 0%, rgb(var(--fb-1)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--fb-0)) 0%, rgb(var(--fb-1)) 100%);
        background: linear-gradient(0deg, rgb(var(--fb-0)) 0%, rgb(var(--fb-1)) 100%);
    }
    .facebookLogin:hover {
        background: rgb(var(--fb-1));
        background: -webkit-linear-gradient(90deg, rgb(var(--fb-1)) 0%, rgb(var(--fb-2)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--fb-1)) 0%, rgb(var(--fb-2)) 100%);
        background: linear-gradient(0deg, rgb(var(--fb-1)) 0%, rgb(var(--fb-2)) 100%);
    }
    .facebookLogin:active {
        background: rgb(var(--fb-2));
        background: -webkit-linear-gradient(-90deg, rgb(var(--fb-1)) 0%, rgb(var(--fb-2)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--fb-1)) 0%, rgb(var(--fb-2)) 100%);
        background: linear-gradient(180deg, rgb(var(--fb-1)) 0%, rgb(var(--fb-2)) 100%);
    }
    .googleLogin {
        margin-top: 6pt;
        color: rgb(var(--main-0));
        background: rgb(var(--grey-10));
        background: -webkit-linear-gradient(90deg, rgb(var(--grey-10)) 0%, rgb(var(--grey-11)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--grey-10)) 0%, rgb(var(--grey-11)) 100%);
        background: linear-gradient(0deg, rgb(var(--grey-10)) 0%, rgb(var(--grey-11)) 100%);
    }
    .googleLogin:hover {
        background: rgb(var(--grey-11));
        background: -webkit-linear-gradient(90deg, rgb(var(--grey-11)) 0%, rgb(var(--white)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--grey-11)) 0%, rgb(var(--white)) 100%);
        background: linear-gradient(0deg, rgb(var(--grey-11)) 0%, rgb(var(--white)) 100%);
    }
    .googleLogin:active {
        background: rgb(var(--grey-10));
        background: -webkit-linear-gradient(-90deg, rgb(var(--grey-11)) 0%, rgb(var(--white)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--grey-11)) 0%, rgb(var(--white)) 100%);
        background: linear-gradient(180deg, rgb(var(--grey-11)) 0%, rgb(var(--white)) 100%);
    }
    .loginForm,
    .loginPass,
    .loginRegister,
    .loginRegisterSuccess,
    .loginForgotSuccess {
        position: relative;
        width: 100%;
    }
    .sideLoading {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(var(--main-0), 0.5);
        z-index: 99;
    }
    .loadIcon {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 60pt;
        height: 60pt;
        -webkit-animation: load 2s linear infinite;
    }
    .loadIcon img {
        width: 100%;
        height: 100%;
    }
    .loginBoxHeader {
        width: 100%;
        height: 16pt;
        line-height: 16pt;
        text-align: right;
    }
    .loginBoxHeader i {
        font-size: 11pt;
        color: rgb(var(--grey-6));
    }
    .loginBoxHeader i:hover {
        cursor: pointer;
        color: rgb(var(--red-5));
    }
    #login {
        width: 100%;
    }
    .inputBox {
        width: 100%;
        margin: 5pt 0;
    }
    .inputBox:first-child {
        margin-top: 0;
    }
    .inputBox:last-child {
        margin-bottom: 0;
    }
    .inputBox label {
        display: block;
        width: 100%;
        font-size: 12pt;
        color: rgb(var(--white));
        text-align: left;
        height: 15pt;
        line-height: 15pt;
    }
    .registerTermins {
        font-size: 10pt !important;
    }
    .inputLogin {
        width: 100%;
        border: none;
        border-bottom: 1pt solid rgb(var(--grey-5));
        padding: 5pt;
        font-size: 11pt;
        color: rgb(var(--white));
        background: rgb(var(--main-0));
    }
    .inputLogin:focus {
        border-bottom: 1pt solid rgb(var(--main-8));
    }
    input[type="submit"] {
        display: block;
        margin: 6pt auto;
        border: none;
        color: rgb(var(--white));
        font-size: 12pt;
        text-align: center;
        padding: 4pt 10pt;
        background: rgb(var(--main-2));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
    }
    input[type="checkbox"] {
        display: inline-block;
        width: 14pt;
        height: 14pt;
        background: rgb(var(--white));
        vertical-align: middle;
    }
    input[type="checkbox"]:checked {
        position: relative;
        background: rgb(var(--main-4));
    }
    input[type="checkbox"]:checked:before {
        content: "\f00c";
        font-family: var(--fa);
        color: rgb(var(--white));
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    input[type="checkbox"]+label {
        display: inline-block;
        width: auto;
    }
    input[type="submit"]:hover {
        cursor: pointer;
        background: rgb(var(--main-3));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    input[type="submit"]:active {
        background: rgb(var(--main-4));
        background: -webkit-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(180deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .loginLink {
        display: block;
        width: 100%;
        text-align: center;
        margin: 14pt 0;
        font-size: 9pt;
        color: rgb(var(--grey-5));
        text-decoration: none;
    }
    .loginLink:hover {
        cursor: pointer;
        color: rgb(var(--main-8));
    }
    .normalLink {
        color: rgb(var(--white));
        text-decoration: none;
    }
    .normalLink:hover {
        cursor: pointer;
        color: rgb(var(--main-8));
    }
    .wrong {
        display: none;
        font-size: 8pt;
        text-align: left;
        color: rgb(var(--red-5));
    }
    .registerSuccessText,
    .forgotSuccessText {
        width: 100%;
        text-align: center;
        font-size: 12pt;
        color: rgb(var(--white));
        margin: 12pt 0;
    }
    .loginForm,
    .loginPass,
    .loginRegister,
    .loginRegisterSuccess,
    .loginForgotSuccess {
        display: none;
    }
    .recomendedTags {
        width: 100%;
    }
    .tagBox {
        width: 100%;
        background: rgb(var(--main-1));
        padding: 8pt;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
        align-content: center;
    }
    .sideTag {
        font-size: 11pt;
        color: rgb(var(--white));
        text-decoration: none;
        background: rgb(var(--main-2));
        padding: 4pt 10pt;
        margin: 4pt;
        -webkit-border-radius: 4pt;
        -moz-border-radius: 4pt;
        border-radius: 4pt;
    }
    .sideTag:hover {
        cursor: pointer;
        background: rgb(var(--main-3));
    }
    .sideTag:active {
        background: rgb(var(--main-4));
    }
    .recLink {
        position: relative;
        width: calc(100% - 20pt);
        max-height: 200pt;
        display: block;
        text-decoration: none;
        border: none;
        overflow: hidden;
        margin: 10pt 10pt;
    }
    .recLink:first-child {
        margin-top: 0;
    }
    .recLink:last-child {
        margin-bottom: 0;
    }
    .recImg {
        width: 100%;
        height: auto;
    }
    .recText {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 30pt;
        line-height: 22pt;
        padding: 4pt;
        font-size: 11pt;
        color: rgb(var(--white));
        background: rgba(var(--main-2), 0.8);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .recLink:hover {
        cursor: pointer;
        border: 2pt solid rgb(var(--main-6));
    }
    .sideComments {
        display: grid;
        width: calc(100% - 20pt);
        height: auto;
        grid-template-columns: 50pt calc(100% - 50pt);
        grid-template-areas: 'photo comment' 'photo date';
        text-decoration: none;
        margin: 10pt;
    }
    .sideComments:first-child {
        margin-top: 0;
    }
    .sideComments:last-child {
        margin-bottom: 0;
    }
    .sideComments:hover {
        cursor: pointer;
    }
    .sideCoUser {
        width: 50pt;
        height: 50pt;
        grid-area: photo;
    }
    .sideCoUser img {
        width: 100%;
        height: 100%;
    }
    .sideCoCom {
        display: -webkit-box;
        display: -moz-box;
        display: box;
        width: 100%;
        height: 35pt;
        color: rgb(var(--white));
        padding-left: 5pt;
        font-size: 12pt;
        line-height: 17.5pt;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -moz-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
    }
    .sideComments:hover .sideCoCom {
        font-weight: bold;
    }
    .sideCoDate {
        width: 100%;
        height: 15pt;
        padding-left: 5pt;
        font-size: 9pt;
        color: rgb(var(--grey-4));
    }
    @-webkit-keyframes load {
        0% {
            -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(1);
        }
        50% {
            -webkit-transform: translate(-50%, -50%) rotate(180deg) scale(1.25);
        }
        100% {
            -webkit-transform: translate(-50%, -50%) rotate(360deg) scale(1);
        }
    }
}

@media only screen and (min-width:501px) and (max-width:899px) {
    .topSide {
        width: 100%;
    }
    .topSideLink {
        width: 100%;
        text-decoration: none;
        border: none;
    }
    .topSideImg {
        width: 100%;
        height: auto;
    }
    .sidePosts {
        width: 100%;
        height: auto;
        background-color: rgb(var(--main-1));
        padding-bottom: 10pt;
    }
    .side-h1 {
        width: 100%;
        padding: 12pt 8pt;
        font-size: 12pt;
        color: rgb(var(--white));
        background-color: rgb(var(--main-4));
        font-weight: bold;
    }
    .userLogin {
        display: grid;
        width: 100%;
        padding: 10pt 6pt;
        background-color: rgb(var(--main-1));
        grid-template-areas: 'photo header' 'photo posts' 'photo comments' 'photo signup';
        grid-template-columns: 80pt calc(100% - 85pt);
        column-gap: 5pt;
    }
    .userRegister {
        width: 100%;
        padding: 10pt 6pt;
        background-color: rgb(var(--main-1));
    }
    .profilePhoto {
        width: 80pt;
        height: 80pt;
        grid-area: photo;
    }
    .profileLinkPhoto {
        text-decoration: none;
        border: none;
    }
    .profileLinkPhoto:hover {
        cursor: pointer;
    }
    .profileLinkPhoto img {
        width: 100%;
        height: 100%;
    }
    .profileHeader {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        width: 100%;
        height: 20pt;
        background-color: rgb(var(--main-4));
    }
    .profileName {
        width: 85%;
        padding-left: 5pt;
        text-align: left;
    }
    .profileLinkName {
        text-decoration: none;
        font-size: 11pt;
        color: rgb(var(--white));
    }
    .profileLinkName:hover {
        cursor: pointer;
    }
    .profileLogout {
        width: 15%;
        padding-right: 5pt;
        text-align: center;
        font-size: 10pt;
        color: rgb(var(--grey-6));
    }
    .profileLogout i:hover {
        cursor: pointer;
        color: rgb(var(--red-6));
    }
    .profileTotalPosts,
    .profileTotalComments,
    .profileSignup {
        width: 100%;
        height: 20pt;
        font-size: 11pt;
        color: rgb(var(--white));
        line-height: 20pt;
    }
    .profileTotalPosts i,
    .profileTotalComments i,
    .profileSignup i {
        color: rgb(var(--grey-5));
    }
    .userBtns {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        align-items: center;
        align-content: center;
        width: 100%;
        background-color: rgb(var(--main-1));
        padding: 5pt;
    }
    .profileBtn {
        text-decoration: none;
        color: rgb(var(--white));
        font-size: 11pt;
        padding: 6pt 10pt;
        background: rgb(var(--main-2));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
    }
    .profileBtn:hover {
        cursor: pointer;
        background: rgb(var(--main-3));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .profileBtn:active {
        background: rgb(var(--main-4));
        background: -webkit-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(180deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .loginBtns {
        width: 100%;
        padding: 12pt 0;
    }
    .loginBtn {
        display: block;
        width: 75%;
        margin: 6pt auto;
        text-decoration: none;
        font-size: 14pt;
        text-align: center;
        color: rgb(var(--white));
        padding: 4pt 0;
        background: rgb(var(--main-2));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
    }
    .loginBtn:first-child {
        margin-top: 0;
    }
    .loginBtn:last-child {
        margin-bottom: 0;
    }
    .loginBtn:hover {
        cursor: pointer;
        background: rgb(var(--main-3));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .loginBtn:active {
        background: rgb(var(--main-4));
        background: -webkit-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(180deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .socialLogin {
        margin: 16pt auto;
    }
    .facebookLogin {
        margin-bottom: 6pt;
        background: rgb(var(--fb-0));
        background: -webkit-linear-gradient(90deg, rgb(var(--fb-0)) 0%, rgb(var(--fb-1)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--fb-0)) 0%, rgb(var(--fb-1)) 100%);
        background: linear-gradient(0deg, rgb(var(--fb-0)) 0%, rgb(var(--fb-1)) 100%);
    }
    .facebookLogin:hover {
        background: rgb(var(--fb-1));
        background: -webkit-linear-gradient(90deg, rgb(var(--fb-1)) 0%, rgb(var(--fb-2)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--fb-1)) 0%, rgb(var(--fb-2)) 100%);
        background: linear-gradient(0deg, rgb(var(--fb-1)) 0%, rgb(var(--fb-2)) 100%);
    }
    .facebookLogin:active {
        background: rgb(var(--fb-2));
        background: -webkit-linear-gradient(-90deg, rgb(var(--fb-1)) 0%, rgb(var(--fb-2)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--fb-1)) 0%, rgb(var(--fb-2)) 100%);
        background: linear-gradient(180deg, rgb(var(--fb-1)) 0%, rgb(var(--fb-2)) 100%);
    }
    .googleLogin {
        margin-top: 6pt;
        color: rgb(var(--main-0));
        background: rgb(var(--grey-10));
        background: -webkit-linear-gradient(90deg, rgb(var(--grey-10)) 0%, rgb(var(--grey-11)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--grey-10)) 0%, rgb(var(--grey-11)) 100%);
        background: linear-gradient(0deg, rgb(var(--grey-10)) 0%, rgb(var(--grey-11)) 100%);
    }
    .googleLogin:hover {
        background: rgb(var(--grey-11));
        background: -webkit-linear-gradient(90deg, rgb(var(--grey-11)) 0%, rgb(var(--white)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--grey-11)) 0%, rgb(var(--white)) 100%);
        background: linear-gradient(0deg, rgb(var(--grey-11)) 0%, rgb(var(--white)) 100%);
    }
    .googleLogin:active {
        background: rgb(var(--grey-10));
        background: -webkit-linear-gradient(-90deg, rgb(var(--grey-11)) 0%, rgb(var(--white)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--grey-11)) 0%, rgb(var(--white)) 100%);
        background: linear-gradient(180deg, rgb(var(--grey-11)) 0%, rgb(var(--white)) 100%);
    }
    .loginForm,
    .loginPass,
    .loginRegister,
    .loginRegisterSuccess,
    .loginForgotSuccess {
        position: relative;
        width: 100%;
    }
    .sideLoading {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(var(--main-0), 0.5);
        z-index: 99;
    }
    .loadIcon {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 60pt;
        height: 60pt;
        -webkit-animation: load 2s linear infinite;
    }
    .loadIcon img {
        width: 100%;
        height: 100%;
    }
    .loginBoxHeader {
        width: 100%;
        height: 16pt;
        line-height: 16pt;
        text-align: right;
    }
    .loginBoxHeader i {
        font-size: 11pt;
        color: rgb(var(--grey-6));
    }
    .loginBoxHeader i:hover {
        cursor: pointer;
        color: rgb(var(--red-5));
    }
    #login {
        width: 100%;
    }
    .inputBox {
        width: 100%;
        margin: 5pt 0;
    }
    .inputBox:first-child {
        margin-top: 0;
    }
    .inputBox:last-child {
        margin-bottom: 0;
    }
    .inputBox label {
        display: block;
        width: 100%;
        font-size: 12pt;
        color: rgb(var(--white));
        text-align: left;
        height: 15pt;
        line-height: 15pt;
    }
    .inputLogin {
        width: 100%;
        border: none;
        border-bottom: 1pt solid rgb(var(--grey-5));
        padding: 5pt;
        font-size: 11pt;
        color: rgb(var(--white));
        background: rgb(var(--main-0));
    }
    .registerTermins {
        font-size: 9pt !important;
    }
    .inputLogin:focus {
        border-bottom: 1pt solid rgb(var(--main-8));
    }
    input[type="submit"] {
        display: block;
        margin: 6pt auto;
        border: none;
        color: rgb(var(--white));
        font-size: 12pt;
        text-align: center;
        padding: 4pt 10pt;
        background: rgb(var(--main-2));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
    }
    input[type="checkbox"] {
        display: inline-block;
        width: 14pt;
        height: 14pt;
        background: rgb(var(--white));
        vertical-align: middle;
    }
    input[type="checkbox"]:checked {
        position: relative;
        background: rgb(var(--main-4));
    }
    input[type="checkbox"]:checked:before {
        content: "\f00c";
        font-family: var(--fa);
        color: rgb(var(--white));
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    input[type="checkbox"]+label {
        display: inline-block;
        width: auto;
    }
    input[type="submit"]:hover {
        cursor: pointer;
        background: rgb(var(--main-3));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    input[type="submit"]:active {
        background: rgb(var(--main-4));
        background: -webkit-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(180deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .loginLink {
        display: block;
        width: 100%;
        text-align: center;
        margin: 14pt 0;
        font-size: 9pt;
        color: rgb(var(--grey-5));
        text-decoration: none;
    }
    .loginLink:hover {
        cursor: pointer;
        color: rgb(var(--main-8));
    }
    .normalLink {
        color: rgb(var(--white));
        text-decoration: none;
    }
    .normalLink:hover {
        cursor: pointer;
        color: rgb(var(--main-8));
    }
    .wrong {
        display: none;
        font-size: 8pt;
        text-align: left;
        color: rgb(var(--red-5));
    }
    .registerSuccessText,
    .forgotSuccessText {
        width: 100%;
        text-align: center;
        font-size: 12pt;
        color: rgb(var(--white));
        margin: 12pt 0;
    }
    .loginForm,
    .loginPass,
    .loginRegister,
    .loginRegisterSuccess,
    .loginForgotSuccess {
        display: none;
    }
    .recomendedTags {
        width: 100%;
    }
    .tagBox {
        width: 100%;
        background: rgb(var(--main-1));
        padding: 8pt;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
        align-content: center;
    }
    .sideTag {
        font-size: 11pt;
        color: rgb(var(--white));
        text-decoration: none;
        background: rgb(var(--main-2));
        padding: 4pt 10pt;
        margin: 4pt;
        -webkit-border-radius: 4pt;
        -moz-border-radius: 4pt;
        border-radius: 4pt;
    }
    .sideTag:hover {
        cursor: pointer;
        background: rgb(var(--main-3));
    }
    .sideTag:active {
        background: rgb(var(--main-4));
    }
    .recLink {
        position: relative;
        width: calc(100% - 20pt);
        max-height: 200pt;
        display: block;
        text-decoration: none;
        border: none;
        overflow: hidden;
        margin: 10pt 10pt;
    }
    .recLink:first-child {
        margin-top: 0;
    }
    .recLink:last-child {
        margin-bottom: 0;
    }
    .recImg {
        width: 100%;
        height: auto;
    }
    .recText {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 30pt;
        line-height: 22pt;
        padding: 4pt;
        font-size: 11pt;
        color: rgb(var(--white));
        background: rgba(var(--main-2), 0.8);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .recLink:hover {
        cursor: pointer;
        border: 2pt solid rgb(var(--main-6));
    }
    .sideComments {
        display: grid;
        width: calc(100% - 20pt);
        height: auto;
        grid-template-columns: 50pt calc(100% - 50pt);
        grid-template-areas: 'photo comment' 'photo date';
        text-decoration: none;
        margin: 10pt;
    }
    .sideComments:first-child {
        margin-top: 0;
    }
    .sideComments:last-child {
        margin-bottom: 0;
    }
    .sideComments:hover {
        cursor: pointer;
    }
    .sideCoUser {
        width: 50pt;
        height: 50pt;
        grid-area: photo;
    }
    .sideCoUser img {
        width: 100%;
        height: 100%;
    }
    .sideCoCom {
        display: -webkit-box;
        display: -moz-box;
        display: box;
        width: 100%;
        height: 35pt;
        color: rgb(var(--white));
        padding-left: 5pt;
        font-size: 12pt;
        line-height: 17.5pt;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -moz-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
    }
    .sideComments:hover .sideCoCom {
        font-weight: bold;
    }
    .sideCoDate {
        width: 100%;
        height: 15pt;
        padding-left: 5pt;
        font-size: 9pt;
        color: rgb(var(--grey-4));
    }
    @-webkit-keyframes load {
        0% {
            -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(1);
        }
        50% {
            -webkit-transform: translate(-50%, -50%) rotate(180deg) scale(1.25);
        }
        100% {
            -webkit-transform: translate(-50%, -50%) rotate(360deg) scale(1);
        }
    }
}

@media only screen and (max-width:500px) {
    .topSide {
        width: 100%;
    }
    .topSideLink {
        width: 100%;
        text-decoration: none;
        border: none;
    }
    .topSideImg {
        width: 100%;
        height: auto;
    }
    .sidePosts {
        width: 100%;
        height: auto;
        background-color: rgb(var(--main-1));
        padding-bottom: 10pt;
    }
    .side-h1 {
        width: 100%;
        padding: 12pt 8pt;
        font-size: 12pt;
        color: rgb(var(--white));
        background-color: rgb(var(--main-4));
        font-weight: bold;
    }
    .userLogin {
        display: grid;
        width: 100%;
        padding: 10pt 6pt;
        background-color: rgb(var(--main-1));
        grid-template-areas: 'photo header' 'photo posts' 'photo comments' 'photo signup';
        grid-template-columns: 80pt calc(100% - 85pt);
        column-gap: 5pt;
    }
    .userRegister {
        width: 100%;
        padding: 10pt 6pt;
        background-color: rgb(var(--main-1));
    }
    .profilePhoto {
        width: 80pt;
        height: 80pt;
        grid-area: photo;
    }
    .profileLinkPhoto {
        text-decoration: none;
        border: none;
    }
    .profileLinkPhoto:hover {
        cursor: pointer;
    }
    .profileLinkPhoto img {
        width: 100%;
        height: 100%;
    }
    .profileHeader {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        width: 100%;
        height: 20pt;
        background-color: rgb(var(--main-4));
    }
    .profileName {
        width: 85%;
        padding-left: 5pt;
        text-align: left;
    }
    .profileLinkName {
        text-decoration: none;
        font-size: 11pt;
        color: rgb(var(--white));
    }
    .profileLinkName:hover {
        cursor: pointer;
    }
    .profileLogout {
        width: 15%;
        padding-right: 5pt;
        text-align: center;
        font-size: 10pt;
        color: rgb(var(--grey-6));
    }
    .profileLogout i:hover {
        cursor: pointer;
        color: rgb(var(--red-6));
    }
    .profileTotalPosts,
    .profileTotalComments,
    .profileSignup {
        width: 100%;
        height: 20pt;
        font-size: 11pt;
        color: rgb(var(--white));
        line-height: 20pt;
    }
    .profileTotalPosts i,
    .profileTotalComments i,
    .profileSignup i {
        color: rgb(var(--grey-5));
    }
    .userBtns {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-evenly;
        align-items: center;
        align-content: center;
        width: 100%;
        background-color: rgb(var(--main-1));
        padding: 5pt;
    }
    .profileBtn {
        text-decoration: none;
        color: rgb(var(--white));
        font-size: 11pt;
        padding: 6pt 10pt;
        background: rgb(var(--main-2));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
    }
    .profileBtn:hover {
        cursor: pointer;
        background: rgb(var(--main-3));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .profileBtn:active {
        background: rgb(var(--main-4));
        background: -webkit-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(180deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .loginBtns {
        width: 100%;
        padding: 12pt 0;
    }
    .loginBtn {
        display: block;
        width: 75%;
        margin: 6pt auto;
        text-decoration: none;
        font-size: 14pt;
        text-align: center;
        color: rgb(var(--white));
        padding: 4pt 0;
        background: rgb(var(--main-2));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
    }
    .loginBtn:first-child {
        margin-top: 0;
    }
    .loginBtn:last-child {
        margin-bottom: 0;
    }
    .loginBtn:hover {
        cursor: pointer;
        background: rgb(var(--main-3));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .loginBtn:active {
        background: rgb(var(--main-4));
        background: -webkit-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(180deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .socialLogin {
        margin: 16pt auto;
    }
    .facebookLogin {
        margin-bottom: 6pt;
        background: rgb(var(--fb-0));
        background: -webkit-linear-gradient(90deg, rgb(var(--fb-0)) 0%, rgb(var(--fb-1)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--fb-0)) 0%, rgb(var(--fb-1)) 100%);
        background: linear-gradient(0deg, rgb(var(--fb-0)) 0%, rgb(var(--fb-1)) 100%);
    }
    .facebookLogin:hover {
        background: rgb(var(--fb-1));
        background: -webkit-linear-gradient(90deg, rgb(var(--fb-1)) 0%, rgb(var(--fb-2)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--fb-1)) 0%, rgb(var(--fb-2)) 100%);
        background: linear-gradient(0deg, rgb(var(--fb-1)) 0%, rgb(var(--fb-2)) 100%);
    }
    .facebookLogin:active {
        background: rgb(var(--fb-2));
        background: -webkit-linear-gradient(-90deg, rgb(var(--fb-1)) 0%, rgb(var(--fb-2)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--fb-1)) 0%, rgb(var(--fb-2)) 100%);
        background: linear-gradient(180deg, rgb(var(--fb-1)) 0%, rgb(var(--fb-2)) 100%);
    }
    .googleLogin {
        margin-top: 6pt;
        color: rgb(var(--main-0));
        background: rgb(var(--grey-10));
        background: -webkit-linear-gradient(90deg, rgb(var(--grey-10)) 0%, rgb(var(--grey-11)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--grey-10)) 0%, rgb(var(--grey-11)) 100%);
        background: linear-gradient(0deg, rgb(var(--grey-10)) 0%, rgb(var(--grey-11)) 100%);
    }
    .googleLogin:hover {
        background: rgb(var(--grey-11));
        background: -webkit-linear-gradient(90deg, rgb(var(--grey-11)) 0%, rgb(var(--white)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--grey-11)) 0%, rgb(var(--white)) 100%);
        background: linear-gradient(0deg, rgb(var(--grey-11)) 0%, rgb(var(--white)) 100%);
    }
    .googleLogin:active {
        background: rgb(var(--grey-10));
        background: -webkit-linear-gradient(-90deg, rgb(var(--grey-11)) 0%, rgb(var(--white)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--grey-11)) 0%, rgb(var(--white)) 100%);
        background: linear-gradient(180deg, rgb(var(--grey-11)) 0%, rgb(var(--white)) 100%);
    }
    .loginForm,
    .loginPass,
    .loginRegister,
    .loginRegisterSuccess,
    .loginForgotSuccess {
        position: relative;
        width: 100%;
    }
    .sideLoading {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(var(--main-0), 0.5);
        z-index: 99;
    }
    .loadIcon {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 60pt;
        height: 60pt;
        -webkit-animation: load 2s linear infinite;
    }
    .loadIcon img {
        width: 100%;
        height: 100%;
    }
    .loginBoxHeader {
        width: 100%;
        height: 16pt;
        line-height: 16pt;
        text-align: right;
    }
    .loginBoxHeader i {
        font-size: 11pt;
        color: rgb(var(--grey-6));
    }
    .loginBoxHeader i:hover {
        cursor: pointer;
        color: rgb(var(--red-5));
    }
    #login {
        width: 100%;
    }
    .inputBox {
        width: 100%;
        margin: 5pt 0;
    }
    .inputBox:first-child {
        margin-top: 0;
    }
    .inputBox:last-child {
        margin-bottom: 0;
    }
    .inputBox label {
        display: block;
        width: 100%;
        font-size: 12pt;
        color: rgb(var(--white));
        text-align: left;
        height: 15pt;
        line-height: 15pt;
    }
    .inputLogin {
        width: 100%;
        border: none;
        border-bottom: 1pt solid rgb(var(--grey-5));
        padding: 5pt;
        font-size: 11pt;
        color: rgb(var(--white));
        background: rgb(var(--main-0));
    }
    .registerTermins {
        font-size: 9pt !important;
    }
    .inputLogin:focus {
        border-bottom: 1pt solid rgb(var(--main-8));
    }
    input[type="submit"] {
        display: block;
        margin: 6pt auto;
        border: none;
        color: rgb(var(--white));
        font-size: 12pt;
        text-align: center;
        padding: 4pt 10pt;
        background: rgb(var(--main-2));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
    }
    input[type="checkbox"] {
        display: inline-block;
        width: 14pt;
        height: 14pt;
        background: rgb(var(--white));
        vertical-align: middle;
    }
    input[type="checkbox"]:checked {
        position: relative;
        background: rgb(var(--main-4));
    }
    input[type="checkbox"]:checked:before {
        content: "\f00c";
        font-family: var(--fa);
        color: rgb(var(--white));
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    input[type="checkbox"]+label {
        display: inline-block;
        width: auto;
    }
    input[type="submit"]:hover {
        cursor: pointer;
        background: rgb(var(--main-3));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    input[type="submit"]:active {
        background: rgb(var(--main-4));
        background: -webkit-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(180deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .loginLink {
        display: block;
        width: 100%;
        text-align: center;
        margin: 14pt 0;
        font-size: 9pt;
        color: rgb(var(--grey-5));
        text-decoration: none;
    }
    .loginLink:hover {
        cursor: pointer;
        color: rgb(var(--main-8));
    }
    .normalLink {
        color: rgb(var(--white));
        text-decoration: none;
    }
    .normalLink:hover {
        cursor: pointer;
        color: rgb(var(--main-8));
    }
    .wrong {
        display: none;
        font-size: 8pt;
        text-align: left;
        color: rgb(var(--red-5));
    }
    .registerSuccessText,
    .forgotSuccessText {
        width: 100%;
        text-align: center;
        font-size: 12pt;
        color: rgb(var(--white));
        margin: 12pt 0;
    }
    .loginForm,
    .loginPass,
    .loginRegister,
    .loginRegisterSuccess,
    .loginForgotSuccess {
        display: none;
    }
    .recomendedTags {
        width: 100%;
    }
    .tagBox {
        width: 100%;
        background: rgb(var(--main-1));
        padding: 8pt;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
        align-content: center;
    }
    .sideTag {
        font-size: 11pt;
        color: rgb(var(--white));
        text-decoration: none;
        background: rgb(var(--main-2));
        padding: 4pt 10pt;
        margin: 4pt;
        -webkit-border-radius: 4pt;
        -moz-border-radius: 4pt;
        border-radius: 4pt;
    }
    .sideTag:hover {
        cursor: pointer;
        background: rgb(var(--main-3));
    }
    .sideTag:active {
        background: rgb(var(--main-4));
    }
    .recLink {
        position: relative;
        width: calc(100% - 20pt);
        max-height: 200pt;
        display: block;
        text-decoration: none;
        border: none;
        overflow: hidden;
        margin: 10pt 10pt;
    }
    .recLink:first-child {
        margin-top: 0;
    }
    .recLink:last-child {
        margin-bottom: 0;
    }
    .recImg {
        width: 100%;
        height: auto;
    }
    .recText {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 30pt;
        line-height: 22pt;
        padding: 4pt;
        font-size: 11pt;
        color: rgb(var(--white));
        background: rgba(var(--main-2), 0.8);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .recLink:hover {
        cursor: pointer;
        border: 2pt solid rgb(var(--main-6));
    }
    .sideComments {
        display: grid;
        width: calc(100% - 20pt);
        height: auto;
        grid-template-columns: 50pt calc(100% - 50pt);
        grid-template-areas: 'photo comment' 'photo date';
        text-decoration: none;
        margin: 10pt;
    }
    .sideComments:first-child {
        margin-top: 0;
    }
    .sideComments:last-child {
        margin-bottom: 0;
    }
    .sideComments:hover {
        cursor: pointer;
    }
    .sideCoUser {
        width: 50pt;
        height: 50pt;
        grid-area: photo;
    }
    .sideCoUser img {
        width: 100%;
        height: 100%;
    }
    .sideCoCom {
        display: -webkit-box;
        display: -moz-box;
        display: box;
        width: 100%;
        height: 35pt;
        color: rgb(var(--white));
        padding-left: 5pt;
        font-size: 12pt;
        line-height: 17.5pt;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -moz-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
    }
    .sideComments:hover .sideCoCom {
        font-weight: bold;
    }
    .sideCoDate {
        width: 100%;
        height: 15pt;
        padding-left: 5pt;
        font-size: 9pt;
        color: rgb(var(--grey-4));
    }
    @-webkit-keyframes load {
        0% {
            -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(1);
        }
        50% {
            -webkit-transform: translate(-50%, -50%) rotate(180deg) scale(1.25);
        }
        100% {
            -webkit-transform: translate(-50%, -50%) rotate(360deg) scale(1);
        }
    }
}