/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap');

* {
    border: 0px;
    padding: 0px;
}

html {
    --bgcolor: #111;
    --fgcolor: #c0c0c0;
    --primary: #593fb9;
    --font: "Atkinson Hyperlegible Next", sans-serif;
}

body {
    background: linear-gradient(180deg, #000, var(--bgcolor));
    color: var(--fgcolor);
    font-family: var(--font);
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

header {
    background: #222;
    text-align: center;
    transform: translateY(-1.2rem);
    background-image: url("header.bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 1rem;
}

img.logotype {
    width: 800px;
    height: fit-content;
}

div.status {
    font-family: var(--font);
}

aside {
    font-size: 2.2rem;
    text-align: center;
}
aside p.nobcast {
    color: var(--fgcolor);
}
.hide {
    display: none;
}
aside p.bcast {
    color: #eee;
}
aside p span {
    font-size: 1.5rem;
    /* color: var(--fgcolor); */
    color: var(--primary);
}
aside p.nobcast i {
    display: inline-block;
    background: var(--primary);
    color: var(--fgcolor);
    padding: 6px;
    border-radius: 3px;
    border: 2px solid #eee;
}
aside p.bcast i {
    display: inline-block;
    background: var(--primary);
    color: #eee;
    padding: 6px;
    border-radius: 3px;
    border: 2px solid #eee;
}

a,
a:visited {
   color: var(--fgcolor);
   transition: all 0.3s ease-in;
}
a:hover {
   color: #fff;
}

div.player {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: #000;
    width: 400px;
    height: 400px;
    border: 2px solid #222;
    text-align: center;
    border-radius: 6px;
    background-image: url("player0player.png");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
    cursor: pointer;
}
div.player i {
    text-align: center;
}
i.fa-circle-play {
    z-index: 2;
}
div.player::after {
    content: "";
    z-index: 1;
    position: absolute;
    left: 10rem;
    right: 10rem;
    top: 10rem;
    bottom: 10rem;
    background-color: #111;
    color: #111;
}

div.noclick {
    cursor: not-allowed;
}

p#idltr {
    margin-top: 0px;
}
span#nbcast {
 color: #fff;
}