:root {
    /* letra */    
    --v_white: white;
    /* fondo */
    --v_grey: rgb(26, 26, 26);
    --v_silver: silver;
    /* botones */
    --v_lightGrey: #333333;
    --v_lightBlue: #0045a1;
    --v_darkBlue: #092443;
    --v_lightRed: #ce2a37;
    --v_darkRed: #431d20;
    /* tabla */
    --v_darkBlue-05: rgba(9, 36, 67, 0.5);
    --v_darkRed-05: rgba(67, 29, 32, 0.5);
    --v_black: black;
    /* spotify */
    --v_yellow: #ffc31f;
}

@font-face {
    font-family: 'gowun';
    src: url('../assets/fonts/GowunDodum-Regular.ttf');
}

* {
    color: var(--v_white);
    font-family: gowun;
}

*:not(h1):not(h2):not(h3):not(h4) {
    font-size: 16px;
}

body {
    background: var(--v_silver) url("../assets/img/basic/background.png") no-repeat fixed center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0 auto;
    min-height: 100vh;
}

.header {
    background: var(--v_grey);
    padding: 5px 0;
}

.header>.logo, .header>.logo2 {
    cursor: pointer;
    float: left;
    height: 50px;
    margin: 2px 20px 0px;
    width: 50px;
}

.header>.logo2 {
    float: right;
}

.header>.logo2:hover, .header>.logo2.rotate {
    animation: rotation 2s linear;
}

.header>.logo2.rotateInfinite {
    animation: rotation 2s linear infinite;
}

@keyframes rotation {
    100% {transform: rotate(-360deg);}
  }

.header>ul {
    cursor: pointer;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.header>ul>li, .navbar {
    background: var(--v_lightGrey);
    border-radius: 15px;
    cursor: pointer;
    font-weight: bold;
    margin: 5px;
    padding: 10px;
}

.header>ul>li {
    float: left;
}

.navbar::first-letter, .subnav::first-letter {
    text-transform: uppercase;
}

.navbar.collapsable .icoCollapsed {
    float: right;
    width: 23px;
}

.subnav {
    border-radius: 15px;
    display: none;
    margin: 2px 0px 2px 20px;
    padding: 5px 10px;
}

.header>ul>li:hover, .navbar:hover, #spotify>.container>.item:hover {
    background: var(--v_darkBlue);
}

.navbar>.subnav:hover {
    background: var(--v_lightBlue) !important;
}

.header>ul>li.selected, .navbar.selected, #spotify>.container>.item.selected {
    background: var(--v_darkRed);
}

.navbar>.subnav.selected {
    background: var(--v_lightRed) !important;
}

.main {
    display: flex;
    flex: 1;
    flex-grow: 1;
    overflow-y: hidden;
}

.aside, .content {
    background: var(--v_grey);
    border-radius: 15px 9px 9px 15px;
    overflow-y: scroll;
    visibility: hidden;
}

.aside {
    flex: 2 2 10px;
    margin: 10px 5px 10px 10px;
    padding: 10px;
}

.aside .imgContainer {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.content {
    flex: 5 5;
    margin: 10px 10px 10px 5px;
    padding: 0px 10px 10px;
}

#spotify {
    background: linear-gradient(145deg, var(--v_lightBlue) 0 33%, var(--v_lightRed) 0 66%, var(--v_yellow) 33% 100%);
    border-radius: 15px;
    padding: 10px 10px 0 10px;
    position: absolute;
    right: 7px;
    top: 70px;
    visibility: hidden;
    width: 400px;
    z-index: 999;
}

#spotify>.container {
    border-radius: 15px;
    display: flex;
    font-weight: bold;
    justify-content: space-between;
    margin-bottom: 6px;
}

#spotify>.container>.item {
    background: var(--v_grey);
    border-radius: 15px;
    margin-bottom: 3px;
    padding: 5px;
    text-align-last: center;
    width: 20%;
}

#lang-selector {
    background: linear-gradient(145deg, var(--v_darkRed), var(--v_darkBlue));
    border-radius: 15px;
    bottom: 43px;
    min-height: 75px;
    max-height: 150px;
    position: absolute;
    left: 7px;
    visibility: hidden;
    width: 120px;
    z-index: 999;
}

.lang-item {
    border-radius: 15px;
    cursor: pointer;
    display: flex;
    margin: 10px;
}

.lang-disabled {
    pointer-events: none;
    opacity: 0.3;
    cursor: not-allowed;
}

.lang-item>div {
    margin-left: 5px;
}

.footer #lang {
    cursor: pointer;
    display: flex;
    flex: 1;
    text-align: left;
}

.footer {
    align-items: center;
    background: var(--v_grey);
    display: flex;
    font-weight: bold;
    justify-content: center;
    padding: 5px;
}

.footer #version {
    cursor: pointer;
    flex: 1;
    margin: 0 10px;
    text-align-last: right;
}

.footer #copyrigth {
    flex: 2;
    text-align: center;
}

.footer a {
    color: inherit;
    text-decoration: none;
}

.footer img, #lang-selector img {
    border-radius: 50%;
    margin-bottom: -5px;
    padding: 0px 5px;
    width: 25px;
}

/* scrollbar */
::-webkit-scrollbar {
    /* width */
    width: 12px;
}

::-webkit-scrollbar-track {
    /* Track */
    box-shadow: inset 0 0 5px var(--v_lightGrey);
    border-radius: 0 10px 10px 0;
}

::-webkit-scrollbar-thumb {
    /* Handle */
    background: var(--v_darkRed);
    border-radius: 0 10px 10px 0;
}

::-webkit-scrollbar-thumb:hover {
    /* Handle on hover */
    background: var(--v_darkBlue);
}