/* latin-ext */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(fonts/latin-ext.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(fonts/latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
    box-sizing: border-box;
    text-transform: uppercase;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

html, body {
    margin: 0;
    padding: 0;
}

.bg-wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

.bg-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: bg-effect 4s infinite;
}

.content .left-side, .content .right-side {
    position: fixed;
    top: 50%;
    font-size: 25px;
}

.content .left-side {
    transform: rotate(-90deg) translate3d(0,-50%,0);
    left: -345px;
}

.content .right-side {
    transform: rotate(90deg) translate3d(0,-50%,0);
    right: -152px;
}

.content .right-side span:first-child {
    margin-right: 20px;
}

.content .left-side ul {
    font-size: 25px;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.content .left-side li {
    display: inline-block;
}

.content .left-side li:after{
    content: ' | ';
    margin: 0 10px;
}

.content .left-side li:last-child:after{
    content: '';
    margin: 0;
}

.content .main-content {
    width: calc(100% - 140px);
    margin: 100px auto
}

.content .main-content .title {
    font-size: 100px;
    line-height: 110px;
}

.content .main-content .title h1 {
    margin: 0 0 50px 0;
    font-size: inherit;
}

.content .main-content .title .star {
    font-size: 170px;
}

.content .main-content .date {
    font-size: 100px;
    line-height: 110px;
    text-align: right;
}

.content .main-content .lineup {
    font-size: 50px;
    margin-left: 120px;
    margin-bottom: 100px;
}

.content .main-content .lineup ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.content .main-content .lineup li:before{
    content : '|';
    margin-right: 15px;
}

.content .main-content .lineup li.empty:before{
    content : ' ';
    margin-right: 15px;
}

.content .main-content .stay-tuned {
    font-size: 50px;
    margin-left: 120px;
}

.content .main-content .stay-tuned p {
    margin: 0
}

@media screen and (max-width: 1250px) {
    .content .main-content .lineup {
        margin-top: 100px;
        font-size: 30px;
        margin-left: 50px;
    }
    .content .main-content .stay-tuned {
        font-size: 30px;
        margin-left: 50px;
    }
    .content .main-content .stay-tuned p {
        margin-bottom: 20px;
    }
    .content .main-content .date, 
    .content .main-content .title {
        font-size: 80px;
        line-height: 90px;
    }
    .content .main-content .lineup li:before{
        margin-right: 7px;
    }
}

@media screen and (max-width: 700px) {
    .content .main-content {
        width: calc(100% - 100px);
    }

    .content .main-content .date, 
    .content .main-content .title {
        font-size: 40px;
        line-height: 50px;
    }
    .content .main-content .lineup {
        margin: 50px 0;
        font-size: 21px;
    }
    .content .main-content .lineup li:before{
        content: '';
    }
    .content .main-content .stay-tuned {
        font-size: 21px;
        margin-left: 0;
    }

    .content .left-side {
        left: -285px;
    }
    .content .left-side ul {
        font-size: 15pt
    }
}

@keyframes bg-effect {
    0% {
        filter: hue-rotate(45deg)
    }
    20% {
        filter: hue-rotate(90deg) brightness(1.5)
    }
    48% {
        filter: hue-rotate(180deg) brightness(1)
    }
    50% {
        filter: hue-rotate(200deg) brightness(5)
    }
    52% {
        filter: hue-rotate(240deg) brightness(1)
    }
    80% {
        filter: hue-rotate(25deg)
    }
    90% {
        filter: hue-rotate(0deg)
    }
}