body {
    height: 100vh;
    margin: 0;
    color: #fff;
    background-color: #0f0f0f;
    font-family: 'Roboto', sans-serif;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto; 
    z-index: 0;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto-Thin';
    src: url('fonts/Roboto-Thin.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.container {
    background: #000;
    overflow: hidden;
    /*height: 100vh*/;
}

@keyframes logoAnim {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.centered-block {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    animation: logoAnim 7s forwards;
    z-index: 1;
}

@keyframes LineRedAnimation {
	from {
		top: 40%;
		left: -10px;
		width: 0;
		height: 14px;
		background-color: #ff0000;
		transform-origin: top left;
		transform: rotate(-22deg);
	}
	to {
		top: 40%;
		left: -10px;
		width: 120vw;
		height: 14px;
		background-color: #ff0000;
		transform-origin: top left;
		transform: rotate(-22deg);
	}
	0% {opacity: 0;}
	20% {opacity: 1;}
}
		

.line-red {
	position: absolute;
	animation: LineRedAnimation 7s linear forwards;
	z-index: 1;
}

@keyframes LineWhiteAnimation {
	from {
		top: 30%;
		left: -10px;
		width: 0;
		height: 14px;
		background-color: #fff;
		transform-origin: top left;
		transform: rotate(-11deg);
	}
	to {
		top: 30%;
		left: -10px;
		width: 120vw;
		height: 14px;
		background-color: #fff;
		transform-origin: top left;
		transform: rotate(-11deg);
	}
	0% {opacity: 0;}
	20% {opacity: 1;}
}
		
.line-white {
	position: absolute;
	animation: LineWhiteAnimation 7s linear forwards;
}

.logo-block {
    background: url("img/lr_logo.png") no-repeat center;
    background-size: contain;
    width: 250px;
    height: 200px;
    margin: 0 auto;
}

.under-construct-block {
    color: #ffffe2;
    opacity: 0.4;
    font-size: 12px;
    font-family: "Roboto-Thin";
    letter-spacing: 2px;
    margin-top: 15px;
}

ul {
    list-style-type: none; padding: 0;
    margin: 0;
}

a {
    color: #fff;
    text-decoration: none;
}

.youtube-block {
    border-radius: 5px;
    background-color: #212121;
    margin: 25px auto 10px auto;
    border: 1px solid #717171;
    padding: 0 5px 10px 5px;
}

.youtube-block-head {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
}

.youtube-logo {
    background-image: url("data:image/png;base64,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");
    height: 40px;
    width: 45px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 7px;
}

.youtube-block p {
    width: max-content;
    font-size: 14px;
}

.youtube-channel-list {
    display: flex;
    flex-direction: row;
    list-style: none;
    margin: 0;
    padding: 0;    
}

.youtube-channel-list li {
    display: flex;
    align-content: center;
    justify-content: space-between;
    border: 1px solid #717171;
    background: #383838;
    height: max-content;
    border-radius: 5px;
    margin: 0 5px;
}

.youtube-channel-list a {
    text-decoration: none;
    color: #fff;
    display: flex;
}

.youtube-channel-list li:hover {
    background: #424242;
}

.channel-img {
    border-radius: 50%;
    height: 64px;
    width: 64px;
    margin: 5px 0 5px 5px;
}

.ch1, .ch2, .ch3, .ch4 {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.ch1 {
    background-image: url("img/ch1.webp");
}

.ch2 {
    background-image: url("img/ch2.webp");
}

.ch3 {
    background-image: url("img/ch3.webp");
}

.ch4 {
    background-image: url("img/ch4.webp");
}

.channel-name {
    font-size: 16px;
    line-height: 18px;
    text-align: left;
    margin: auto 10px;
    width: max-content;
}

.stream{
	border-radius: 4px;
	background-color: #e1002d;
	max-width: fit-content;
	padding: 0px 4px 4px 4px;
	position: unset;
	margin: 0 auto;
}

.stream a{
}

.donation a{
    margin: 5px;
}

.VK{
	color: yellow;
    padding-left: 20px;
    background-image: url('/img/vk_logo.png');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: left center;
	display: inline-block;
}

.DA{
	display: inline-block;
    padding-left: 20px;
    background-image: url('https://www.donationalerts.com/static/donations/dist/favicon.ico');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: left center;
	color: #fb8c2b;
}

.sber{
	color: #08a652;
    padding-left: 20px;
    background-image: url('/img/sb.webp');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: left center;
	display: inline;
}

.boosty{
	display: inline-block;
    padding-left: 20px;
    background-image: url('https://boosty.to/favicon.png?v=14');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: left center;
	color: #f15f2c;
}


@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.gear {
    font-size: 16px;
    animation: rotate 2s linear infinite;
    height: 16px;
    width: 16px;
}

@media (max-width: 768px) {
    .youtube-channel-list {
        display: block;
    }
    .line-red,
    .line-white {
        display: none;
    }
	.ytbifrm{
		width: 100%;
	}
	.sber{
		display: inline-block;
    }
    
    .logo-block {
        width: 150px;
        height: 150px;
    }
    
    .streamblock {
    width: 100%;
    }
#live-streams {
    display: flex;
}

#live-streams-list {
    list-style: none;
    padding: 0;
    margin-right: 20px;
    width: 200px;
}

#live-streams-list li {
    cursor: pointer;
    padding: 10px;
    border-bottom: 1px solid #eee;
}

#live-stream-player iframe {
    width: 640px;
    height: 360px;
}