#left_side {
	float: left;
	margin-top: 100px;
	width: 1100px;
	height: auto;
}

#left_side_content {
	float: left;
	width: 100%;
	height: auto;
}

#left_side h1 {
	font-size: var(--font-size-1);
	line-height: calc(var(--font-size-1) * 1.3);
	text-align: center;
	padding: 30px 0px;
	color: var(--main-text);
	font-weight: 900;
}

#left_side h2 {
	font-size: var(--font-size-3);
	line-height: calc(var(--font-size-3) * 1.3);
	padding: 15px 20px;
	color: var(--main-text);
}

#left_side h3 {
	font-size: var(--font-size-4);
	line-height: calc(var(--font-size-4) * 1.3);
	padding: 10px 20px;
	color: var(--main-text);
}

h2 span, h3 span {
	color: var(--awaits-you_3);
	font-weight: 900;
}

p span {
	font-weight: bold;
}

#left_side p {
	font-size: var(--font-size-5);
	line-height: calc(var(--font-size-5) * 1.3);
	padding: 5px 20px;
	color: var(--main-text);
}

#left_side .source {
	font-size: calc(var(--font-size-5) - 2px);
	line-height: calc((var(--font-size-5) - 2px) * 1.3);
	padding: 0px 20px;
	font-family: serif;
}

#right_side {
	position: fixed;
	top: 110px;
	right: calc((100% - 1440px) / 2);;
	width: 340px;
	z-index: 1;
	height: auto;
	max-height: calc(100vh - 170px);
	box-shadow: inset 0px 0px 2px 0px var(--main-text);
	background-color: var(--bg-color);
	padding: 25px 0px;
}

#right_side_content {
	width: 100%;
	height: auto;
	max-height: calc(100vh - 170px);
	overflow: hidden;
	overflow-y: auto;
}

#right_side_content::-webkit-scrollbar {
  width: 5px;
}

#right_side_content::-webkit-scrollbar-track {
  box-shadow: inset 0 0 2.5px var(--bg-color); 
  border-radius: 2.5px;
}

#right_side_content::-webkit-scrollbar-thumb {
  background: var(--main-text-2); 
  border-radius: 2.5px;
  transition: 1s background;
}

#right_side_content::-webkit-scrollbar-thumb:hover {
  background: var(--main-text); 
}

#rules_right_show, #rules_right_hide {
	position: absolute;
	width: 30px;
	height: 30px;
	top: 10px;
	left: -20px;
	background-color: var(--bg-color);
	padding: 5px;
	box-shadow: inset 0px 0px 2px 0px var(--main-text);
	display: none;
	cursor: pointer;
}

#rules_right_show {
	left: -40px;
}

#rules_right_show svg, #rules_right_hide svg {
	width: 30px;
	height: 30px;
	object-fit: cover;
	fill: var(--main-text);
}

#right_side h3 {
	font-size: var(--font-size-3);
	line-height: calc(var(--font-size-3) * 1.1);
	width: 320px;
	padding: 10px 10px 25px;
	text-align: center;
	color: var(--main-text);
}

#right_side a {
	font-size: var(--font-size-5);
	line-height: calc(var(--font-size-5) * 1.3);
	width: 300px;
	padding: 5px 15px 5px 25px;
	position: relative;
	display: block;
	color: var(--main-text);
	font-weight: bold;
}

#right_side a:hover {
	padding-left: 20px;
}






#sol_kenar {
	height: 100vh;
    background-color: var(--bg-color);
}

#sag_kenar {
	height: 100vh;
    background-color: var(--bg-color);
}





@media (max-width: 1700px) {

#left_side {
	margin-top: 100px;
	width: 1000px;
}

#left_side h1 {
	padding: 30px 0px;
}

#left_side h2 {
	padding: 15px 20px;
}

#left_side h3 {
	padding: 10px 20px;
}

#left_side p {
	padding: 5px 20px;
}

#right_side {
	top: 100px;
	right: calc((100% - 1360px) / 2);;
	width: 360px;
	max-height: calc(100vh - 110px);
}

#right_side h3 {
	width: 340px;
	padding: 10px 10px 25px;
}

#right_side a {
	width: 320px;
	padding: 5px 15px 5px 25px;
}

#right_side a:hover {
	padding-left: 20px;
}

}

@media (max-width: 1440px) {

#left_side {
	margin-top: 100px;
	width: 1000px;
}

#left_side h1 {
	padding: 30px 0px;
}

#left_side h2 {
	padding: 15px 20px;
}

#left_side h3 {
	padding: 10px 20px;
}

#left_side p {
	padding: 5px 20px;
}

#right_side {
	top: 100px;
	right: calc((100% - 1280px) / 2);;
	width: 280px;
	max-height: calc(100vh - 110px);
}

#right_side h3 {
	width: 260px;
	padding: 10px 10px 25px;
}

#right_side a {
	width: 240px;
	padding: 5px 15px 5px 25px;
}

#right_side a:hover {
	padding-left: 20px;
}
}

@media (max-width: 1280px) {

#left_side {
	margin-top: 100px;
	width: 770px;
}

#left_side h1 {
	padding: 30px 0px;
}

#left_side h2 {
	padding: 15px 20px;
}

#left_side h3 {
	padding: 10px 20px;
}

#left_side p {
	padding: 5px 20px;
}

#right_side {
	top: 100px;
	right: calc((100% - 1024px) / 2);;
	width: 254px;
	max-height: calc(100vh - 110px);
}

#right_side h3 {
	width: 234px;
	padding: 10px 10px 25px;
}

#right_side a {
	width: 214px;
	padding: 5px 15px 5px 25px;
}

#right_side a:hover {
	padding-left: 20px;
}
}

@media (max-width: 1024px) {

#left_side {
	margin-top: 100px;
	width: 740px;
}

#left_side h1 {
	padding: 20px 0px;
}

#left_side h2 {
	padding: 15px 20px;
}

#left_side h3 {
	padding: 10px 20px;
}

#left_side p {
	padding: 5px 20px;
}

#right_side {
	top: 100px;
	right: calc(((100% - 760px) / 2) - 254px);
	width: 254px;
	max-height: calc(100vh - 110px);
	transition: 1s right;
}

#rules_right_show, #rules_right_hide {
	width: 30px;
	height: 30px;
	top: 10px;
	left: -20px;
	padding: 5px;
}

#rules_right_show {
	left: -40px;
	display: block;
}

#rules_right_show svg, #rules_right_hide svg {
	width: 30px;
	height: 30px;
}

#right_side_input:checked + #right_side #rules_right_show {
	display: none;
}

#right_side_input:checked + #right_side #rules_right_hide {
	display: block;
}

#right_side_input:checked + #right_side {
	right: calc((100% - 760px) / 2);
}

#right_side h3 {
	width: 234px;
	padding: 10px 10px 25px;
}

#right_side a {
	width: 214px;
	padding: 5px 15px 5px 25px;
}

#right_side a:hover {
	padding-left: 20px;
}
}

@media (max-width: 768px) {

#left_side {
	margin-top: 80px;
	width: 440px;
}

#left_side h1 {
	padding: 15px 0px;
}

#left_side h2 {
	padding: 10px 15px;
}

#left_side h3 {
	padding: 7px 15px;
}

#left_side p {
	padding: 5px 15px;
}

#right_side {
	top: 100px;
	right: calc(((100% - 460px) / 2) - 254px);
	width: 254px;
	max-height: calc(100vh - 110px);
}

#rules_right_show, #rules_right_hide {
	width: 26px;
	height: 26px;
	top: 10px;
	left: -18px;
	padding: 5px;
}

#rules_right_show {
	left: -36px;
	display: block;
}

#rules_right_show svg, #rules_right_hide svg {
	width: 26px;
	height: 26px;
}

#right_side_input:checked + #right_side {
	right: calc((100% - 460px) / 2);
}

#right_side h3 {
	width: 234px;
	padding: 10px 10px 25px;
}

#right_side a {
	width: 214px;
	padding: 5px 15px 5px 25px;
}

#right_side a:hover {
	padding-left: 20px;
}
}

@media (max-width: 480px) {

#left_side {
	margin-top: 60px;
	width: 100%;
}

#left_side h1 {
	padding: 15px 0px;
}

#left_side h2 {
	padding: 10px 15px;
}

#left_side h3 {
	padding: 7px 15px;
}

#left_side p {
	padding: 5px 15px;
}

#right_side {
	top: 100px;
	right: -254px;
	width: 254px;
	max-height: calc(100vh - 110px);
}

#rules_right_show, #rules_right_hide {
	width: 26px;
	height: 26px;
	top: 10px;
	left: -18px;
	padding: 5px;
}

#rules_right_show {
	left: -36px;
	display: block;
}

#rules_right_show svg, #rules_right_hide svg {
	width: 26px;
	height: 26px;
}

#right_side_input:checked + #right_side {
	right: 5px;
}

#right_side h3 {
	width: 234px;
	padding: 10px 10px 25px;
}

#right_side a {
	width: 214px;
	padding: 5px 15px 5px 25px;
}

#right_side a:hover {
	padding-left: 20px;
}
}