@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg: #040404;
    --container: #181818;
    --container2: #333333;
    --container-border: #36363644;
    --text: #ffffff;
    --link: #a7a7ff;
    --sub-text: #d5d5d5;
    --nav: #22222288;
    --nav-border: #aaaaaa16;
    --t-btn: #30303088;
    --t-btn-border: #aaaaaa44;
    --t-btn-hover: #40404088;
    --t-btn-active: #50505088;
    --ls-btn-hover: #38383888;
    --ls-btn-active: #50505088;
    --container-btn: #30303088;
    --container-btn-border: #aaaaaa44;
    --container-btn-hover: #40404088;
    --container-btn-active: #50505088;
    --container-textarea-focus: #bebebe44;
    --anim-bg: #12121250;
    --anim-rotator: #eeeeee;
    --footer: #111111;

    --info-box-good-bg: #16d11644;
    --info-box-good-border: #16d116;
    --info-box-error-bg: #d1161644;
    --info-box-error-border: #d11616;

    --discord: #6571f3;
    --discord-t: #ffffff;
    --discord-hover: #5865f2;
    --discord-press: #7781f0;
    --github: #000000;
    --github-t: #ffffff;
    --github-hover: #101010;
    --github-press: #212121;
}

*::selection {
  color: var(--bg);
  background-color: var(--text);
}

input[type="file"] {
    display: none;
}

.center {
    text-align: center;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    /* By default all fields are non selectable */
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 0;
}

a {
    color: var(--link);
}

nav.main-nav {
    position: fixed;
    left: 0;
    top: 0;
    height: 65px;
    width: 100%;
    background-color: var(--nav);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--nav-border);
    z-index: 1024;
}

nav.main-nav a {
    text-decoration: none;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
}

nav.main-nav .logo {
    width: 45px;
    height: 45px;
    padding: 5px;
}

nav.main-nav .logo-text {
    font-size: 25px;
    position: relative;
}

nav.main-nav ul {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

nav.main-nav ul li {
    float: none;
    display: flex;
    align-items: center;
}

nav.main-nav ul li span {
    font-size: 12px;
}

nav.main-nav ul li .btn {
    font-size: 16px;
    background-color: var(--t-btn);
    border: none;
    border-radius: 5px;
    height: 45px;
    width: 100px;
    cursor: pointer;
    transition: 0.25s;
    padding: 9px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
nav.main-nav ul li .btn:hover {
    background-color: var(--t-btn-hover);
}
nav.main-nav ul li .btn:active {
    background-color: var(--t-btn-active);
    transform: scale(0.95);
}

nav.main-nav ul li .btn img {
    width: 27px;
    height: 27px;
    border-radius: 16px;
    justify-content: flex-start;
    margin-left: 4px;
    transition: 0.5s;
}
nav.main-nav ul li .btn:active img {
    filter: saturate(2);
} 

nav.main-nav ul li .btn.login-btn {
    width: 45px;
}

nav.main-nav ul li .btn.login-btn img {
    border-radius: 0;
    margin: 0;
}

nav.main-nav ul li .btn span {
    justify-content: flex-end;
    color: var(--text);
    display: inline-block;
    font-size: 22px;
    margin-right: 4px;
    font-weight: 500;
}

nav.lang-selector {
    width: 200px;
    max-height: 500px;
    position: fixed;
    top: 75px;
    right: 10px;
    background-color: var(--nav);
    border: 0.5px solid var(--nav-border);
    border-radius: 7px;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    padding: 10px;
    display: none;
    overflow: hidden;
}

@keyframes lang-selector-show {
    0% {
        padding: 0;
        width: 180px;
        max-height: 0;
        opacity: 0;
    }
    100% {
        padding: 10px;
        width: 200px;
        max-height: 500px;
        opacity: 1;
    }
}

@keyframes lang-selector-hide {
    0% {
        padding: 10px;
        width: 200px;
        max-height: 500px;
        opacity: 1;
    }
    100% {
        padding: 0;
        width: 180px;
        max-height: 0;
        opacity: 0;
    }
}

nav.lang-selector.active {
    display: block;
    animation: lang-selector-show 0.5s;
}
nav.lang-selector.hide {
    display: block;
    padding: 0;
    width: 180px;
    max-height: 0;
    opacity: 0;
    animation: lang-selector-hide 0.5s;
}

nav.lang-selector ul {
    list-style: none;
}

nav.lang-selector ul li button {
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 9px;
    background-color: #00000000;
    border: none;
    border-radius: 5px;
    transition: 0.25s;
    cursor: pointer;
}
nav.lang-selector ul li button:hover {
    background-color: var(--ls-btn-hover);
}
nav.lang-selector ul li button:active {
    background-color: var(--ls-btn-active);
    transform: scale(0.95);
}

nav.lang-selector ul li button img {
    width: 27px;
    height: 27px;
    border-radius: 16px;
    filter: grayscale(0.5);
    transition: 0.5s;
}
nav.lang-selector ul li button:hover img {
    filter: none;
}
nav.lang-selector ul li button:active img {
    filter: saturate(2);
}

nav.lang-selector ul li button span {
    font-size: 18px;
    margin-left: 5px;
    color: var(--text);
}

.main-page {
    margin-top: 65px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 65px);
    flex-direction: column;
}

.main-page .container {
    width: 600px;
    background-color: var(--container);
    border: 0.5px solid var(--container-border);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 5px;
}

.main-page .container.small {
    width: 350px;
}
.main-page .container.wide {
    width: 800px;
}

.main-page .container h2 {
    display: block;
    width: 100%;
    font-size: 35px;
    font-weight: 600;
    margin-bottom: 5px;
}

.main-page .container span.text {
    display: block;
    width: 100%;
    font-size: 18px;
}

.main-page .container input {
    width: 300px;
    height: 40px;
    margin: 10px;
    margin-left: 30px;
    margin-right: 30px;
    border-radius: 20px;
    border: 0.5px solid var(--container-btn-border);
    font-size: 16px;
    padding: 10px;
    margin-bottom: 0;
    background-color: var(--container-btn);
    color: var(--text);
    transition: 0.25s;
    font-weight: 600;
    outline: none;
}
.main-page .container input:hover {
    background-color: var(--container-btn-hover);
}
.main-page .container input:focus {
    background-color: var(--container-btn-active);
    transform: scale(1.05);
}

.main-page .container button.btn {
    width: 300px;
    height: 40px;
    margin: 10px;
    margin-left: 30px;
    margin-right: 30px;
    border: 0.5px solid var(--container-btn-border);
    border-radius: 20px;
    font-size: 16px;
    padding: 10px;
    margin-bottom: 0;
    background-color: var(--container-btn);
    color: var(--text);
    cursor: pointer;
    transition: 0.25s;
    font-weight: 600;
}
.main-page .container button.btn:hover {
    background-color: var(--container-btn-hover);
}
.main-page .container button.btn:active {
    background-color: var(--container-btn-active);
    transform: scale(0.95);
}

.main-page .container ul.selectors {
    width: 325px;
    height: 40px;
    background-color: var(--container2);
    border-radius: 20px;
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.main-page .container ul.selectors li {
    flex: 1 1 0;
    min-width: 0;
}

.main-page .container ul.selectors li button.btn {
    height: 100%;
    width: 100%;
    background-color: #00000000;
    border: none;
    margin: 0;
    padding: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-weight: 600;
}
.main-page .container ul.selectors li button.btn.active {
    background-color: var(--container-btn-active)
}
.main-page .container ul.selectors li button.btn:hover {
    background-color: var(--container-btn-hover);
}
.main-page .container ul.selectors li button.btn:active {
    background-color: var(--container-btn-active);
}

.main-page .container ul.selectors li button.btn img {
    width: 20px;
    height: 20px;
    display: inline-block;
}

.main-page .container ul.selectors li button.btn span {
    display: inline-block;
}

.main-page .container .form {
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    text-align: center;
}
.main-page .container .form.active {
    display: flex;
}

.main-page .container .form span.text {
    margin: 10px;
    margin-bottom: 0;
}

.main-page .container textarea {
    font-family: "Roboto Mono", monospace;
    width: 90%;
    resize: none;
    height: 400px;
    background-color: var(--container-btn);
    border: 0.5px solid var(--container-btn-border);
    border-radius: 20px;
    font-size: 16px;
    padding: 10px;
    transition: 0.25s;
    color: var(--text);
    margin: 10px;
}

.main-page .container textarea:active {
    background-color: var(--container-btn-hover);
}

.main-page .container textarea:focus {
    outline: none;
    border: 0.5px solid var(--container-textarea-focus);
    background-color: var(--container-btn-active);
    transform: scale(1.02);
}

.main-page .container .link-input {
    position: relative;
    display: flex;
    width: 300px;
    align-items: center;
    justify-content: center;
    z-index: 128;
}

.main-page .container .input-combiner {
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    margin-top: 20px;
    margin-bottom: 0;
    transition: 0.25s;
    z-index: 129;
    background-color: var(--container-btn);
    border: 0.5px solid var(--container-btn-border);
    border-radius: 20px;
    padding: 0;
}

.main-page .container .input-combiner button.btn-selector {
    margin: 0;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    padding: 10px;
    padding-right: 0;
    font-size: 16px;
    width: 33.3%;
    background-color: #00000000;
    border: none;
    cursor: pointer;
    color: var(--text);
    font-weight: 600;
    transition: 0.25s;
}

.main-page .container .input-combiner input {
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding-left: 0;
    padding-right: 0;
    width: calc(66.7% - 40px);
    background-color: #00000000;
    border: none;
}
.main-page .container .input-combiner input:hover {
    background-color: #00000000;
}
.main-page .container .input-combiner input:focus {
    background-color: #00000000;
    transform: none;
    border: none;
}

.main-page .container .input-combiner button.btn-regenerate {
    width: 40px;
    height: 40px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    padding-right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    background-color: #00000000;
    border: none;
    cursor: pointer;
    transition: 0.25s;
}
.main-page .container .input-combiner button.btn-regenerate img {
    width: 20px;
    height: 20px;
}

.main-page .container .input-combiner:hover {
    background-color: var(--container-btn-hover);
}

.main-page .container .input-combiner:has(button.btn-selector:hover) button.btn-selector,
.main-page .container .input-combiner:has(button.btn-regenerate:hover) button.btn-selector,
.main-page .container .input-combiner:has(input:hover) button.btn-selector,
.main-page .container .input-combiner:has(button.btn-selector:hover) button.btn-regenerate,
.main-page .container .input-combiner:has(button.btn-regenerate:hover) button.btn-regenerate,
.main-page .container .input-combiner:has(input:hover) button.btn-regenerate,
.main-page .container .input-combiner:has(button.btn-selector:hover) input,
.main-page .container .input-combiner:has(button.btn-regenerate:hover) input,
.main-page .container .input-combiner:has(input:hover) input {
    background-color: var(--container-btn-hover);
}
.main-page .container .input-combiner:has(button.btn-selector:active) button.btn-selector,
.main-page .container .input-combiner:has(button.btn-regenerate:active) button.btn-selector,
.main-page .container .input-combiner:has(input:focus) button.btn-selector,
.main-page .container .input-combiner:has(button.btn-selector:active) button.btn-regenerate,
.main-page .container .input-combiner:has(button.btn-regenerate:active) button.btn-regenerate,
.main-page .container .input-combiner:has(input:focus) button.btn-regenerate,
.main-page .container .input-combiner:has(button.btn-selector:active) input,
.main-page .container .input-combiner:has(button.btn-regenerate:active) input,
.main-page .container .input-combiner:has(input:focus) input {
    background-color: var(--container-btn-active);
}
.main-page .container .input-combiner:has(button.btn-selector:active),
.main-page .container .input-combiner:has(button.btn-regenerate:active) {
    transform: scale(0.95);
}
.main-page .container .input-combiner:has(input:focus) {
    transform: scale(1.05);
}

@keyframes links-selector-show {
    0% {
        padding: 0;
        width: 80px;
        max-height: 0;
        opacity: 0;
        left: 20px;
    }
    100% {
        padding: 10px;
        width: 100px;
        max-height: 250px;
        opacity: 1;
        left: 0;
    }
}

@keyframes links-selector-hide {
    0% {
        padding: 10px;
        width: 100px;
        max-height: 250px;
        opacity: 1;
        left: 0;
    }
    100% {
        padding: 0;
        width: 80px;
        max-height: 0;
        opacity: 0;
        left: 20px;
    }
}

.main-page .container .link-input .links {
    position: absolute;
    top: 60px;
    left: 0;
    background-color: var(--nav);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 0.5px solid var(--nav-border);
    border-radius: 15px;
    border-top-right-radius: 0;
    width: 100px;
    max-height: 250px;
    padding: 10px;
    display: none;
}
.main-page .container .link-input .links.active {
    display: block;
    animation: links-selector-show 0.5s;
}
.main-page .container .link-input .links.hide {
    display: block;
    padding: 0;
    width: 100px;
    max-height: 0;
    opacity: 0;
    animation: links-selector-hide 0.5s;
}

.main-page .container .link-input .links ul {
    list-style: none;
}

.main-page .container .link-input .links ul li {
    display: inline-block;
    width: 100%;
}

.main-page .container .link-input .links ul li button {
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 9px;
    background-color: #00000000;
    border: none;
    border-radius: 5px;
    transition: 0.25s;
    cursor: pointer;
    margin: 0;
}
.main-page .container .link-input .links ul li button:hover {
    background-color: var(--ls-btn-hover);
}
.main-page .container .link-input .links ul li button:active {
    background-color: var(--ls-btn-active);
    transform: scale(0.95);
}

.main-page .container .file-input {
    width: 300px;
    height: 300px;
    margin: 10px;
    margin-left: 30px;
    margin-right: 30px;
    border: 0.5px solid var(--container-btn-border);
    border-radius: 20px;
    font-size: 20px;
    padding: 10px;
    margin-bottom: 0;
    background-color: var(--container-btn);
    color: var(--text);
    cursor: pointer;
    transition: 0.25s;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}
.main-page .container .file-input:hover {
    background-color: var(--container-btn-hover);
}
.main-page .container .file-input:active {
    background-color: var(--container-btn-active);
    transform: scale(0.95);
}

.main-page .container .file-input img {
    width: 100px;
    height: 100px;
    margin: 30px;
}

.main-page .container .file-input span {
    font-size: 14px;
    font-weight: 400;
}

.main-page .container ul.login-select {
    width: 100%;
    list-style: none;
}

.main-page .container ul.login-select li a.lbtn {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    transition: 0.25s;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    border-radius: 5px;
    text-decoration: none;
}

.main-page .container ul.login-select li a.lbtn img {
    width: 30px;
    height: 30px;
    display: inline-block;
}

.main-page .container ul.login-select li a.lbtn span {
    display: inline-block;
    width: auto;
    margin-left: 10px;
}

.main-page .container ul.login-select li a.lbtn.discord {
    background-color: var(--discord);
    color: var(--discord-t);
}
.main-page .container ul.login-select li a.lbtn.discord:hover {
    background-color: var(--discord-hover);
}
.main-page .container ul.login-select li a.lbtn.discord:active {
    background-color: var(--discord-press);
    transform: scale(0.95);
}

.main-page .container ul.login-select li a.lbtn.github {
    background-color: var(--github);
    color: var(--github-t);
}
.main-page .container ul.login-select li a.lbtn.github:hover {
    background-color: var(--github-hover);
}
.main-page .container ul.login-select li a.lbtn.github:active {
    background-color: var(--github-press);
    transform: scale(0.95);
}

.main-page .container .info-box {
    display: none;
    width: 100%;
    height: auto;
    padding: 10px;
    margin: 10px;
    margin-left: 40px;
    margin-right: 40px;
    border-radius: 20px;
    font-size: 18px;
    font-weight: 600;
    
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
.main-page .container .info-box.good {
    display: block;
    background-color: var(--info-box-good-bg);
    border: 1px solid var(--info-box-good-border);
}
.main-page .container .info-box.error {
    display: block;
    background-color: var(--info-box-error-bg);
    border: 1px solid var(--info-box-error-border);
}

.main-page .container ul.file-action-btns {
    list-style: none;
    width: 100%;
    display: flex;
    gap: 20px;
}
.main-page .container ul.file-action-btns li {
    display: block;
    min-width: 0;
}

.main-page .container ul.file-action-btns li:nth-child(1) {
    flex: 2 1 0;
}

.main-page .container ul.file-action-btns li:nth-child(2) {
    flex: 1 1 0;
}

.main-page .container ul.file-action-btns li a {
    height: 40px;
    width: 100%;
    border: 0.5px solid var(--container-btn-border);
    border-radius: 20px;
    font-size: 16px;
    padding: 10px;
    margin-bottom: 0;
    background-color: var(--container-btn);
    color: var(--text);
    cursor: pointer;
    transition: 0.25s;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 10px;
}
.main-page .container ul.file-action-btns li a:hover {
    background-color: var(--container-btn-hover);
}
.main-page .container ul.file-action-btns li a:active {
    background-color: var(--container-btn-active);
    transform: scale(0.95);
}

.main-page .container ul.file-action-btns li a img {
    width: 20px;
    height: 20px;
    display: inline-block;
}
.main-page .container ul.file-action-btns li a span {
    width: auto;
    display: inline-block;
}
.main-page .container #file-block {
    width: 100%;
}
.main-page .container #file-block img.image {
    width: 100%;
    margin-top: 20px;
    border-radius: 20px;
}
.main-page .container #file-block .goq-video {
    width: 100%;
    margin-top: 20px;
    border-radius: 30px;
}
.main-page .container #file-block .goq-audio {
    width: 100%;
    height: auto;
    margin-top: 20px;
}
.main-page .container #file-block iframe {
    width: 100%;
    height: 450px;
    margin-top: 20px;
}
.main-page .container #file-block embed {
    width: 100%;
    height: 450px;
    margin-top: 20px;
}

.main-page .flex-container-cluster {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 800px;
    text-align: left;
    align-items: center;
    justify-content: center;
}

.main-page .flex-container-cluster .flex-container-small {
    height: 130px;
    background-color: var(--container);
    border: 0.5px solid var(--container-border);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 10px;
}

.main-page .flex-container-cluster .flex-container-small img {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    float: left;
}
.main-page .flex-container-cluster .flex-container-small img.avatar {
    width: 70px;
    height: 70px;
    border-radius: 35px;
}

.main-page .flex-container-cluster .flex-container-small h5 {
    font-size: 20px;
}

.main-page .flex-container-cluster .flex-container-small time {
    font-size: 18px;
}

.main-page .flex-container-cluster .flex-container-small span {
    font-size: 18px;
}

.main-page .container.markdown {
    text-align: left;
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: 18px;
}
.main-page .container.markdown h1 {
    font-size: 32px;
    font-weight: 600;
    margin-top: 3px;
    margin-bottom: 3px;
}
.main-page .container.markdown h2 {
    font-size: 28px;
    font-weight: 600;
    margin-top: 3px;
    margin-bottom: 3px;
}
.main-page .container.markdown h3 {
    font-size: 24px;
    font-weight: 600;
    margin-top: 3px;
    margin-bottom: 3px;
}
.main-page .container.markdown h4 {
    font-size: 22px;
    font-weight: 600;
    margin-top: 3px;
    margin-bottom: 3px;
}
.main-page .container.markdown h5 {
    font-size: 20px;
    font-weight: 600;
    margin-top: 3px;
    margin-bottom: 3px;
}
.main-page .container.markdown h6 {
    font-size: 18px;
    font-weight: 600;
    margin-top: 3px;
    margin-bottom: 3px;
}
.main-page .container.markdown p {
    font-size: 18px;
    margin-top: 3px;
    margin-bottom: 3px;
}
.main-page .container.markdown blockquote {
    position: relative;
    padding-left: 20px;
}
.main-page .container.markdown blockquote::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    width: 5px;
    background-color: var(--container-btn-border);
    border-radius: 2.5px;
}
.main-page .container.markdown pre {
    width: 100%;
}
.main-page .container.markdown code {
    width: 100%;
    height: auto;
    padding: 5px;
    border-radius: 5px;
    display: inline-block;
    background-color: var(--container-btn);
    border: 0.5px solid var(--container-border);
}
.main-page .container.markdown ul,
.main-page .container.markdown ol {
    width: 100%;
    margin: 3px 0;
    padding-inline-start: 1.4em;
    list-style-position: inside;
}
.main-page .container.markdown li {
    margin: 2px 0;
}
.main-page .container.markdown img {
    border-radius: 20px;
}

.loading-anim-container {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 100vw;
    background-color: var(--anim-bg);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2048;
}

.loading-anim-container .acon1 {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

@keyframes rotator {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes loading-hide {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.loading-anim-container .acon1 .rotator {
    width: 40px;
    height: 300px;
    background-color: var(--anim-rotator);
    animation: infinite rotator 2s;
}
.loading-anim-container .acon1 .rotator:nth-child(2) {
    opacity: 0.66;
}
.loading-anim-container .acon1 .rotator:nth-child(3) {
    opacity: 0.33;
}

.loading-anim-container.hide {
    opacity: 0;
    animation: loading-hide 0.25s;
}
.loading-anim-container.hidden {
    display: none;
}

footer {
    width: 100%;
    background-color: var(--footer);
    color: var(--text);
    font-size: 14px;
    text-align: center;
    padding: 10px;
}

footer p {
    margin: 5px;
}

footer ul {
    list-style: none;
}
footer ul li {
    display: inline-block;
    margin: 5px;
}
footer ul li a {
    text-decoration: none;
}
footer ul li a img {
    width: 35px;
    height: 35px;
}

.cookie-widget {
    width: 400px;
    height: auto;
    padding: 16px;
    border-radius: 12px;
    background-color: var(--nav);
    border: 0.5px solid var(--nav-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: fixed;
    right: 10px;
    bottom: 10px;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    z-index: 512;
}

.cookie-widget .heading {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.cookie-widget .heading .icon {
    width: 28px;
    height: 28px;
}

.cookie-widget .heading .header {
    display: flex;
    height: 28px;
    font-size: 22px;
    font-weight: 600;
    justify-content: center;
    align-items: center;
}

.cookie-widget .cookie-text {
    font-size: 18px;
    width: 100%;
    height: auto;
}

.cookie-widget .btn {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--t-btn);
    border-radius: 20px;
    transition: 0.25px;
    color: var(--text);
    border: none;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.25s;
}
.cookie-widget .btn:hover {
    background-color: var(--t-btn-hover);
}
.cookie-widget .btn:active {
    background-color: var(--t-btn-active);
    transform: scale(0.9);
}

@media only screen and (max-width: 860px) {
    .main-page .container.wide {
        margin-left: 5%;
        margin-right: 5px;
        width: 90%;
    }
}

@media only screen and (max-width: 640px) {
    .main-page .container {
        width: 100%;
    }
    .main-page .container #file-block .goq-video .controls .sound-combiner {
        display: none;
    }
    .main-page .container #file-block .goq-audio .controls .sound-combiner {
        display: none;
    }
}

@media only screen and (max-width: 520px) {
    .main-page .container ul.file-action-btns {
        flex-direction: column;
    }

    .main-page .container ul.file-action-btns li:nth-child(1) {
        flex: 1 1 0;
    }

    .main-page .container ul.file-action-btns li:nth-child(2) {
        flex: 1 1 0;
    }

    .main-page .flex-container-cluster {
        flex-direction: column;
        width: 100%;
    }

    .main-page .flex-container-cluster .flex-container-small {
        margin-left: 5%;
        margin-right: 5px;
        width: 90%;
    }

    .main-page .container #file-block .goq-video .controls .video-time {
        display: none;
    }

    .main-page .container #file-block .goq-audio .controls .audio-total-time {
        display: none;
    }

    .cookie-widget {
        width: calc(100% - 20px);
    }
}

@media only screen and (max-width: 450px) {
    nav.main-nav ul li span {
        display: none;
    } 
}

@media only screen and (max-width: 410px) {
    .main-page .container ul.selectors {
        flex-direction: column;
        width: 200px;
        height: 150px;
        justify-content: center;
        padding: 5px;
        align-items: center;
    }
    .main-page .container ul.selectors li {
        width: 100%;
    }
    .main-page .container ul.selectors li button.btn {
        margin: 0;
        margin-top: 5px;
        margin-bottom: 5px;
        width: 100%;
    }
}

@media only screen and (max-width: 400px) {
    .main-page .container button.btn {
        width: 100%;
    }
    .main-page .container input {
        width: 100%;
    }
    .main-page .container .link-input {
        width: 100%;
    }
    .main-page .container .file-input {
        width: 100%;
    }
    .main-page .container #file-block .goq-video .controls .pip-btn {
        display: none;
    }
    .main-page .container #file-block .goq-audio .controls .audio-part-time {
        display: none;
    }
}

@media only screen and (max-width: 390px) {
    .main-page .container.small {
        width: 100%;
    }
}


@media only screen and (max-width: 355px) {
    .main-page .container .link-input .input-combiner button.btn {
        width: 50%;
    }
    .main-page .container .link-input .input-combiner input {
        width: 50%;
    }
}

@media only screen and (max-width: 300px) {
    nav.main-nav .logo-text {
        display: none;
    } 
    .main-page .container ul.selectors {
        width: 100%;
    }
}