@media only screen and (min-width:1280px) {
    .content {
        width: 68%;
    }
    .sidebar {
        width: 30%;
    }
    .contact {
        width: 100%;
        background: rgb(var(--main-1));
        padding: 10pt;
    }
    .small {
        font-size: 9pt;
        color: rgb(var(--grey-5));
        font-style: italic;
    }
    .textareaLogin {
        width: 100%;
        height: 100pt;
        border: none;
        background: rgb(var(--main-0));
        color: rgb(var(--white));
        font-size: 11pt;
        padding: 5pt;
        resize: none;
        border-bottom: 1pt solid rgb(var(--grey-5));
    }
    .textareaLogin:focus {
        border-bottom: 1pt solid rgb(var(--main-8));
    }
    input[type="submit"] {
        width: 100%;
    }
    .success {
        display: none;
        width: 100%;
        padding: 15pt 0;
        text-align: center;
        color: rgb(var(--white));
        background: rgb(var(--main-6));
    }
    .uploadingBox {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(var(--main-0), 0.5);
        z-index: 9;
    }
    .uploadIcon {
        position: fixed;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 100pt;
        height: 100pt;
        z-index: 10;
        -webkit-animation: spin 4s linear infinite;
        -moz-animation: spin 4s linear infinite;
        animation: spin 4s linear infinite;
    }
    @-webkit-keyframes spin {
        0% {
            -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(1);
        }
        50% {
            -webkit-transform: translate(-50%, -50%) rotate(180deg) scale(1.5);
        }
        100% {
            -webkit-transform: translate(-50%, -50%) rotate(360deg) scale(1);
        }
    }
    @-moz-keyframes spin {
        0% {
            -moz-transform: translate(-50%, -50%) rotate(0deg) scale(1);
        }
        50% {
            -moz-transform: translate(-50%, -50%) rotate(180deg) scale(1.5);
        }
        100% {
            -moz-transform: translate(-50%, -50%) rotate(360deg) scale(1);
        }
    }
    @keyframes spin {
        0% {
            transform: translate(-50%, -50%) rotate(0deg) scale(1);
        }
        50% {
            transform: translate(-50%, -50%) rotate(180deg) scale(1.5);
        }
        100% {
            transform: translate(-50%, -50%) rotate(360deg) scale(1);
        }
    }
}

@media only screen and (min-width:900px) and (max-width:1279px) {
    .content {
        width: 68%;
    }
    .sidebar {
        width: 30%;
    }
    .contact {
        width: 100%;
        background: rgb(var(--main-1));
        padding: 10pt;
    }
    .small {
        font-size: 9pt;
        color: rgb(var(--grey-5));
        font-style: italic;
    }
    .textareaLogin {
        width: 100%;
        height: 100pt;
        border: none;
        background: rgb(var(--main-0));
        color: rgb(var(--white));
        font-size: 11pt;
        padding: 5pt;
        resize: none;
        border-bottom: 1pt solid rgb(var(--grey-5));
    }
    .textareaLogin:focus {
        border-bottom: 1pt solid rgb(var(--main-8));
    }
    input[type="submit"] {
        width: 100%;
    }
    .success {
        display: none;
        width: 100%;
        padding: 15pt 0;
        text-align: center;
        color: rgb(var(--white));
        background: rgb(var(--main-6));
    }
    .uploadingBox {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(var(--main-0), 0.5);
        z-index: 9;
    }
    .uploadIcon {
        position: fixed;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 100pt;
        height: 100pt;
        z-index: 10;
        -webkit-animation: spin 4s linear infinite;
        -moz-animation: spin 4s linear infinite;
        animation: spin 4s linear infinite;
    }
    @-webkit-keyframes spin {
        0% {
            -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(1);
        }
        50% {
            -webkit-transform: translate(-50%, -50%) rotate(180deg) scale(1.5);
        }
        100% {
            -webkit-transform: translate(-50%, -50%) rotate(360deg) scale(1);
        }
    }
    @-moz-keyframes spin {
        0% {
            -moz-transform: translate(-50%, -50%) rotate(0deg) scale(1);
        }
        50% {
            -moz-transform: translate(-50%, -50%) rotate(180deg) scale(1.5);
        }
        100% {
            -moz-transform: translate(-50%, -50%) rotate(360deg) scale(1);
        }
    }
    @keyframes spin {
        0% {
            transform: translate(-50%, -50%) rotate(0deg) scale(1);
        }
        50% {
            transform: translate(-50%, -50%) rotate(180deg) scale(1.5);
        }
        100% {
            transform: translate(-50%, -50%) rotate(360deg) scale(1);
        }
    }
}

@media only screen and (min-width:501px) and (max-width:899px) {
    .content {
        width: 100%;
    }
    .sidebar {
        display: none;
    }
    .contact {
        width: 100%;
        background: rgb(var(--main-1));
        padding: 10pt;
    }
    .small {
        font-size: 9pt;
        color: rgb(var(--grey-5));
        font-style: italic;
    }
    .textareaLogin {
        width: 100%;
        height: 100pt;
        border: none;
        background: rgb(var(--main-0));
        color: rgb(var(--white));
        font-size: 11pt;
        padding: 5pt;
        resize: none;
        border-bottom: 1pt solid rgb(var(--grey-5));
    }
    .textareaLogin:focus {
        border-bottom: 1pt solid rgb(var(--main-8));
    }
    input[type="submit"] {
        width: 100%;
    }
    .success {
        display: none;
        width: 100%;
        padding: 15pt 0;
        text-align: center;
        color: rgb(var(--white));
        background: rgb(var(--main-6));
    }
    .uploadingBox {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(var(--main-0), 0.5);
        z-index: 9;
    }
    .uploadIcon {
        position: fixed;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 100pt;
        height: 100pt;
        z-index: 10;
        -webkit-animation: spin 4s linear infinite;
        -moz-animation: spin 4s linear infinite;
        animation: spin 4s linear infinite;
    }
    @-webkit-keyframes spin {
        0% {
            -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(1);
        }
        50% {
            -webkit-transform: translate(-50%, -50%) rotate(180deg) scale(1.5);
        }
        100% {
            -webkit-transform: translate(-50%, -50%) rotate(360deg) scale(1);
        }
    }
    @-moz-keyframes spin {
        0% {
            -moz-transform: translate(-50%, -50%) rotate(0deg) scale(1);
        }
        50% {
            -moz-transform: translate(-50%, -50%) rotate(180deg) scale(1.5);
        }
        100% {
            -moz-transform: translate(-50%, -50%) rotate(360deg) scale(1);
        }
    }
    @keyframes spin {
        0% {
            transform: translate(-50%, -50%) rotate(0deg) scale(1);
        }
        50% {
            transform: translate(-50%, -50%) rotate(180deg) scale(1.5);
        }
        100% {
            transform: translate(-50%, -50%) rotate(360deg) scale(1);
        }
    }
}

@media only screen and (max-width:500px) {
    .content {
        width: 100%;
    }
    .sidebar {
        display: none;
    }
    .contact {
        width: 100%;
        background: rgb(var(--main-1));
        padding: 10pt;
    }
    .small {
        font-size: 9pt;
        color: rgb(var(--grey-5));
        font-style: italic;
    }
    .textareaLogin {
        width: 100%;
        height: 100pt;
        border: none;
        background: rgb(var(--main-0));
        color: rgb(var(--white));
        font-size: 11pt;
        padding: 5pt;
        resize: none;
        border-bottom: 1pt solid rgb(var(--grey-5));
    }
    .textareaLogin:focus {
        border-bottom: 1pt solid rgb(var(--main-8));
    }
    input[type="submit"] {
        width: 100%;
    }
    .success {
        display: none;
        width: 100%;
        padding: 15pt 0;
        text-align: center;
        color: rgb(var(--white));
        background: rgb(var(--main-6));
    }
    .uploadingBox {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(var(--main-0), 0.5);
        z-index: 9;
    }
    .uploadIcon {
        position: fixed;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 100pt;
        height: 100pt;
        z-index: 10;
        -webkit-animation: spin 4s linear infinite;
        -moz-animation: spin 4s linear infinite;
        animation: spin 4s linear infinite;
    }
    @-webkit-keyframes spin {
        0% {
            -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(1);
        }
        50% {
            -webkit-transform: translate(-50%, -50%) rotate(180deg) scale(1.5);
        }
        100% {
            -webkit-transform: translate(-50%, -50%) rotate(360deg) scale(1);
        }
    }
    @-moz-keyframes spin {
        0% {
            -moz-transform: translate(-50%, -50%) rotate(0deg) scale(1);
        }
        50% {
            -moz-transform: translate(-50%, -50%) rotate(180deg) scale(1.5);
        }
        100% {
            -moz-transform: translate(-50%, -50%) rotate(360deg) scale(1);
        }
    }
    @keyframes spin {
        0% {
            transform: translate(-50%, -50%) rotate(0deg) scale(1);
        }
        50% {
            transform: translate(-50%, -50%) rotate(180deg) scale(1.5);
        }
        100% {
            transform: translate(-50%, -50%) rotate(360deg) scale(1);
        }
    }
}