/* 	COPYRIGHT ©	NAT MEDIA 2024.*/
/*	WSZELKIE PRAWA ZASTRZEŻONE */


 body {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
	display: flex;
	flex-direction: column; 
	height: 100vh; 
}

#left-column {
	flex: 1;
	background-color: #202024;
	margin-right: 370px;
	height: 100vh;
	padding: 0px;
	overflow: hidden;
}


#right-column {
	flex: 0 0 370px;
	min-width: 370px;
	max-width: 370px;
	background-color: #18181b;
	padding: 0 5px 5px 5px;
	height: 100%;
	position: fixed; 
	right: 0; 
	box-sizing: border-box;
	overflow-y: auto;
	overflow-x: hidden;
	font-family: 'Roobert', Arial, sans-serif;
	font-size: 14px;
	color: #dcdedf;
}
	
@font-face {
	font-family: 'Roobert';
	src: url('roobert.ttf') format('ttf'),
	font-weight: normal;
	font-style: normal;
}
	
#sticky-top {
	display: flex;
	position: sticky;
	top: 0;
	background-color: #1f1f23;
	padding: 0px;
	justify-content: space-between;
	align-items: center;
}

@media (max-width: 768px) {
	#left-column {
		order: 1; 
		flex: 1;
		height: 45vh;
		width: 100%; 
	}

	#right-column {
		position: relative;
		order: 2; 
		min-height: 55vh;
		max-height: 55vh; 
		height: auto; 
		min-width: 100%;
		max-width: 100%;
	}
}

.custom-icon {
	width: 20px; 
	height: 20px;
	margin-right: 5px; 
	vertical-align: middle;
}
	
#toggle-button:hover {
	background-color: #a52ed8;
}

#toggle-button {
	display: inline-block;
	padding: 10px 20px;
	background-color: darkviolet;
	color: white;
	border: none;
	border-radius: 5px;
	font-size: 16px;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.3s ease;
}
	
	
#toggle-button.disabled {
	background-color: darkred;
	color: white;
}

.alert {
	padding: 20px;
	background-color: #f44336;
	color: white;
	margin-bottom: 15px;
}

.twitch-button {
  background-color: #9146FF;
  color: #fff;
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.twitch-button:hover {
  background-color: #772ce8;
  transform: scale(1.03);
}

.twitch-button:active {
  transform: scale(0.98);
}