* {
    font-family: sans-serif, Arial;
}

body {
    margin: 0;
}

.infocnt {
    height: 86.5vh;
    width: 100vw;
    margin-top: 13vh;
    border-top: .5vh #000 solid;
}

#title { /* 11vh */
height: 10vh;
width: 96vw;
padding: 0vh 1vw 2vh 2vw;

position: fixed;
top: 0;
left: 0;
z-index: 10;

font-size: 6vh;
}

@keyframes tilt {
    from {transform: rotate(-4deg);}
    to {transform: rotate(-1deg);}
}

#stustaculum {
width: 25%;
display: inline-block;
transform: rotate(-3deg);
animation: tilt;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-direction: alternate;
}

#stustaculum img {
    width: 100%;
    height: auto;
}

@keyframes fadeinout {
    from {opacity: 1}
    to {opacity: 0}
}

#clock {
    position: relative;
    top: 3vh;
}

#clockdots {
animation: fadeinout;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

#temperature {
    position: relative;
    top: 3vh;
}

#progress_bar {
height: 1.5vh;

position: fixed;
top: 11.25vh;
left: 0;
z-index: 9;

background: #fff;
}
#progress_bar_inner {
width: 0vw;
height: 1.5vh;
background: #000;
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
}

.content_title { /* 12vh */
    height: 5vh;
    padding: 3vh 2vw;

    font-size: 5vh;
    font-weight: bold;
}

.content_full { /* 65vh */
    height: 62vh;
    padding: 1.5vh 0.5vw 0 0.5vw;
}
.content_full_notitle { /* 77vh */
    height: 77vh;
}
.content_full_bg_img { /* 65vh */
    height: 62vh;
    padding: 3vh 2vw 0 2vw;

    background-repeat: no-repeat;
    background-size: cover;
    filter: brightness(50%);
}

#acts_cnt { /* aim: 26vh */
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
align-content: stretch;
}
#acts_cnt > div {
width: 47vw;
margin-bottom: 1.5vh;
}
.acts_stagename { /* 6.5vh */
    height: 4vh;
    padding: 2vh;
    font-size: 4vh;
    font-weight: bold;
    text-align: center;
}
.acts_details { /* 9.5vh */
    height: 7.7vh;
    padding: 1.5vh 2vw;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    align-content: stretch;
}
.acts_details_curr {
    width: 11vw;
    font-size: 2vh;
}
.acts_details_artist {
    width: 28vw;
    padding-left: 1vw;
}
.acts_details_artist_name {
    font-size: 2.5vh;
    font-weight: bold;
}
.acts_details_artist_genre {
    font-size: 2vh;
}

#footer_urgent { /* 10vh */
height: 5vh;
width: 96vw;
padding: 2vh 2vw;

position: fixed;
bottom: 0;
left: 0;
z-index: 10;

background: #ff0;
color: #000;
font-size: 5vh;
font-weight: bold;
}

.footer_inactive {
    opacity: 0;
}

#news {
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
}

.newsTitle {
    font-size: 6vh;
    margin-bottom: 3vh;
    font-weight: bold;
}

.newsContent {
    font-size: 4vh;
    margin-bottom: 2vh;
}

.multicol {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-content: stretch;

    margin-top: 10vh;
}

.content_full_overlay {
    height: 62vh;
    padding: 3vh 2vw 0 2vw;
    margin-top: -65vh;
}

.content_full_overlay > div {
    width: 50vw;
    font-size: 4vh;
    color: #fff;
    backdrop-filter: blur(10px);
    padding: 5vh;
}

/* THEME */

/* root/default variables */
:root {
    --font-color: #000;
    --border-color: #000;
    --bg-color: #fff;
}
/* dark theme */
[data-theme="dark"] {
    --font-color: #fff;
    --border-color: #fff;
    --bg-color: #643c8c;
}

body {
    background: var(--bg-color);
}

#title {
background: #643c8c;/*#f0f;*/
color: #fff;
border-bottom: #000 .5vh solid;
}

#stustaculum {
background: transparent;
padding: 1vh 1vh .5vh 1vh;
}

#progress_bar {
border-bottom: #000 .5vh solid;
}

.content_title {
    border-bottom: var(--border-color) 1vh solid;
    color: #643c8c;
    background: #9df07d;
}

.content_full {
    background:  var(--bg-color);
    color:  var(--font-color);
}

#acts_cnt > div {
border: var(--border-color) .25vh solid;
}

.acts_stagename { /* 6.5vh */
    border-bottom: var(--border-color) .5vh solid;
}

#footer_urgent {
border-top: var(--border-color) 1vh solid;
}