﻿body {color:#fff !important;}
#content { }
	#content .inner { display: flex; justify-content: space-between; margin: auto; padding: 40px 0 10px 0; position: relative; z-index: 8; }
h1, h2, h3 { font-family: 'Mona-Sans', Arial, sans-serif; }
h1, h2 {font-size: 28px; font-weight:400;}
p, li { color: #CCCCD2; font-size:16px; font-weight:400; }
div#image-right-left-column { width: 34%; }

div#image-right-right-column { width: 62%; position: relative; box-sizing: border-box; overflow:hidden; }
	div#image-right-right-column .scrollArea { overflow-y: auto; max-height: 520px; padding: 0 0 40px 0; box-sizing: border-box; width: 95%; }
#image-right-gradient { position: absolute; left: 0; right: 0; bottom: 0; height: 220px; background: linear-gradient(180deg, rgba(0, 2, 29, 0) 65%, rgb(0, 2, 29) 100%); pointer-events: none; }#image-right-right-column h1 {margin: 0 0 20px 0;}
div#image-right-left-column img    {display:block; max-width:100%; height:auto;}
div#image-right-left-column p      {font-style:italic; font-size:90%; padding:1.5% 0 1em 0;}
#image-right-right-column p a {text-decoration:underline; color:#fff;}

.scrollWrap { position: relative; width: 62%; }

/* Den faktiska scrollen */
.scrollArea { max-height: 520px; overflow-y: auto; padding: 0 20px 40px 0; box-sizing: border-box; /* göm native scrollbar men behåll scroll-funktionen */ scrollbar-width: none; /* Firefox */ }
	.scrollArea::-webkit-scrollbar { /* Chrome/Edge/Safari */ width: 0; height: 0; }

/* Din "kortare" scrollbar overlay */
.fakeScrollbar { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); bottom: auto; /* justera så den hamnar där du vill */ height: 50%; /* <-- här styr du 50% */ width: 8px; border-radius: 999px; background: rgba(255,255,255,0.15); pointer-events: auto; }

.fakeThumb { position: absolute; left: 0; top: 0; width: 100%; border-radius: 999px; background: #7b2cff; /* lila */ min-height: 22px; }

@media only screen and (max-width: 1323px) {
	#content .inner {max-width:95%;}
}

@media only screen and (max-width: 1000px) {
	h1, h2 { font-size: 22px; }
	p,li {font-size: 14px;}
}

@media only screen and (max-width: 600px) {
	#content .inner { display: block; padding: 20px 0 10px 0; }

	div#image-right-left-column { width: 100%; margin: 0 0 20px 0; }

	div#image-right-right-column { width: 100%; overflow: visible; /* viktigt */ }

		/* ingen scroll, visa allt */
		div#image-right-right-column .scrollArea { max-height: none; overflow: visible; padding: 0; /* valfritt */ width: 100%; }

	/* dölj custom scrollbar + gradient */
	.fakeScrollbar { display: none; }
	#image-right-gradient { display: none; }
}