@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;500;700&display=swap');

:root {
    /* + --- + [color] + --- + */

    --color-dark: #383838;
    --color-light: #ffffff;
    --color-turquoise: #1ABC9C;
    --color-greenSea: #16A085;
    --color-emerald: #2ECC71;
    --color-nephritis: #27AE60;
    --color-peterRiver: #3498DB;
    --color-belizeHole: #2980B9;
    --color-amethyst: #9B59B6;
    --color-wisteria: #8E44AD;
    --color-wetAsphalt: #34495E;
    --color-midnightBlue: #2C3E50;
    --color-sunFlower: #F1C40F;
    --color-orange: #F39C12;
    --color-carrot: #E67E22;
    --color-pumpkin: #D35400;
    --color-alizarin: #E74C3C;
    --color-pomegranate: #C0392B;
    --color-clouds: #FAFAFA;
    --color-silver: #ECECEC;
    --color-concrete: #95A5A6;
    --color-asbestos: #7F8C8D;
}

html {
    min-width: vw;
    min-height: vh;
}

*,
*::before,
*::after {
    margin: 0px;
    padding: 0px;
    border: 0px;
    text-decoration: none;
    font-family: 'Archivo', sans-serif;
    font-weight: 500;
    outline: none;
    box-sizing: border-box;
    user-select: none;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
}

body {
    min-width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    background-color: #000;
}

video#loginBackground-video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
}

div#content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    justify-items: center;
    position: fixed;
    top: 0px;
    left: 0px;
    float: left;
    z-index: 1;
    background-color: rgb(0 0 0 / 25%);
}

div#content div#head {
    width: 100%;
    flex: 1;
    max-height: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

div#content div#head div.container {
    width: 100%;
    max-width: 980px;
    padding: 0 20px;
    display: flex;
    margin: auto;
    flex-direction: row;
}

div#head div#nav {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

div#head div#nav a {
    margin: 0 0 0 10px;
    color: #c4bfbf;
    line-height: 30px;
    font-size: 14px;
}

div#head div#nav a:hover,
div#head div#nav a[active] {
    text-decoration: underline;
    color: #fff;
}

div#content div#head a#logo {
    min-width: 170px;
    max-width: 170px;
    min-height: 20px;
    max-height: 20px;
    margin: 5px 0;
    display: flex;
    flex: 1;
    background-image: url('/file/quniverse/public/image/quniverse.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
}

div#text-content {
    width: 100%;
    flex: 1;
    display: flex;
    overflow: auto;
    border-top: 1px solid #1a1a1a;
}

div#text-content div.container {
    line-height: 1.6;
    color: #fff;
    max-width: 980px;
    margin: 20px auto;
    padding: 20px;
}

div#text-content div.container a
{
    color: #fff;
    font-weight: bold;
    text-decoration: underline;
}

div#text-content div.container h1 {
    font-size: 24px;
    margin-bottom: 10px;
}

div#text-content div.container h2 {
    font-size: 18px;
    margin-bottom: 5px;
}

div#text-content div.container p {
    margin-bottom: 20px;
}

div#text-content div.container ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
}

div#text-content div.container li {
    margin-bottom: 5px;
}

div#foot {
    width: 100%;
    ;
    padding: 10px;
    max-height: 80px;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
}

div#foot div#description {
    padding: 10px;
    flex: 1;
    color: #c4bfbf;
    line-height: 25px;
    font-size: 14px;
    text-align: center;
}

div#foot div#description b {
    color: #fff;
    font-size: 16px;
    margin: 0 5px;
}