:root {
    --color1: linear-gradient(195deg, #ec407a, #d81b60);
    --color2: #d70c1c;
    --color3: #f5f3f4;
    --color4: rgba(136, 152, 170, .15);
    --color5: linear-gradient(195deg, #42424a 0%, #191919 100%);
    --color6: linear-gradient(195deg, #66BB6A 0%, #43A047 100%);
    --color7: linear-gradient(195deg, #49a3f1 0%, #1A73E8 100%);
    --font1: "Questrial", sans-serif;
    --font2: "Open Sans", sans-serif;
    --font3: "Inter", sans-serif;
    --font4: "Quicksand", sans-serif;
}

body {
    margin: 0;
    padding: 0;
}

.dark {
    background: var(--color5) !important;
    color: var(--color3);
}

.red {
    background: var(--color1) !important;
    color: var(--color3);
}

.blue {
    background: var(--color7) !important;
    color: var(--color3);
}

.semiDark {
    background: var(--color4) !important;
    color: var(--color3);
}


.cardLogin {
    width: 300px;
    max-width: 90%;
    margin: 40px;
    border-radius: 15px;
}

.imgLogin {
    top: -50px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.imgLogin img {
    border-radius: 12px;
    opacity: 0.8;
}

.section-page {
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
}

.appradio {
    background: #000D13FE;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
}

.boton {
    background: transparent;
    width: 50px;
    height: 50px;
    border: none;
    color: #fff;
    font-size: 24pt;
}

#imgMeta {
    border-radius: 16px;
    -webkit-box-reflect: below 0 linear-gradient(transparent, transparent 60%, rgba(0, 0, 48, 0.2) 80%);
}

#title {
    color: #fff;
    font-size: 18pt;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
}

.player {
    width: 120px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 20pt;
    border-radius: 12px;
}

.items ul {
    padding: 0;
    list-style: none;
}

.items ul li a {
    color: #fff;
    text-decoration: none;
}

.items ul li a i {
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20pt;
    border-radius: 50%;
}

.Whatsapp {
    bottom: 20px;
    right: 20px;
}

.Whatsapp a {
    text-decoration: none;
}

.Whatsapp a i {
    width: 50px;
    height: 50px;
    background: var(--color6);
    font-size: 20pt;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.television {
    bottom: 20px;
    left: 20px;
}

.television a {
    text-decoration: none;
}

.television a i {
    width: 50px;
    height: 50px;
    background: var(--color1);
    font-size: 20pt;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}