:root { 
    color-scheme: light dark;
    /*--theme-1: #404040;     /* harmaa */
	--theme-1:#1c1c1c ;     /* harmaa */
	 --theme-2: #83cf55; /* Green */
	/* --theme-2: #d1d102; /* Yellow */
	--text-color:#c4c4c4;
}

html, body {
    height: 100%; 
    background-color: #1c1c1c;
    font-family: "Roboto", sans-serif;
	color:#c4c4c4;
}

body {
    margin: 0; 
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

main {
    height: 100%;
    color: #c4c4c4;
}

p {
	color:#c4c4c4;
}

a {
    text-decoration: none;
    color: white;
    font-family: "Roboto", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Lexend", sans-serif;
	color:var(--theme-2);
	word-break:break-word;
}
h3 {
	margin-top:2rem;
}
.open-menu, .close-menu {
  width: 40px;
  height: auto;
  fill: #83cf55;
  transition: fill 0.3s;
  cursor:pointer;
}
.close-menu {
	display:none;
}
.open-menu:hover {
  fill: #6dbd44; /* pieni hover-efekti */
}
.container, .row {
	margin-left:0rem;
	margin-right:0rem;
	padding-left:0rem;
	padding-right:0rem;
}
[class^="col-"] {
    /* kaikki luokat, jotka alkavat "col-" */
    padding:0rem;
}
.privacy-policy, .tos h3 {
	margin-top:2.5rem;
}

.top-header {
    background-color: var(--theme-1);
    max-width: 100%;
}

.top-navigation a {
    margin-left: 1rem;
	/*
    color: var(--theme-2);
    border-radius: 5rem;
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--theme-2);
	*/
}
a:not([href]):not([class]) {
    color: var(--theme-2);
	cursor:pointer;
}
a:not([href]):not([class]):hover {
	background-color: var(--theme-2);
    color: black;
}

.top-navigation a:hover {
    background-color: var(--theme-2);
    color: black;
}

.site-logo {
    color: var(--theme-2);
    font-size: 2rem;
    line-height: 2.2rem;
	font-family: "Rubik Moonrocks", sans-serif;
}

.site-logo img {
	width:60px;
	margin-left:-5px;
	object-fit:cover;
	height:50px;
}

.font-1 {
    font-family: "Lexend", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.font-2, .font-2 a {
    font-family: "Lexend", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.content-area {
    /* background-color: var(--teema-1); */
	background-color:transparent;
    min-height: 90vh;
}

.styled-button {
    background-color: yellow;
    color: black;
    border-radius: 2.5rem;
    padding: 1rem 2rem;
    border: 0px;
}

.rounded {
	border-radius:2.5rem;
}

#registerForm input {
	text-align:center;
}

/* Make the progress bar light green */
#uploadProgress {
  background-color: #90ee90; /* light green */
  color: #000; /* optional: text color inside bar */
}

/* Optional: change striped animation colors */
#uploadProgress.progress-bar-striped {
	/*
  background-image: linear-gradient(
    45deg,
    rgba(144, 238, 144, 0.5) 25%,
    transparent 25%,
    transparent 50%,
    rgba(144, 238, 144, 0.5) 50%,
    rgba(144, 238, 144, 0.5) 75%,
    transparent 75%,
    transparent
  );
  */
}

.card-title {
	font-size:0.9rem;
}

.card-text {
	font-size:0.8rem;
}

.preview-thumb {
	object-fit:cover;
	width:180px;
	height:180px;
}

.styled-button-2 {
	background-color: transparent;
    color: var(--theme-2);
    border-radius: 0.25rem;
    padding: 1rem 2rem;
    border: 1px solid var(--theme-2);
}
.styled-button-2:hover {
	background-color: var(--theme-2);
    color: var(--theme-1);
}
.gallery-page video, .media-page video {
	width:100%;
}
.card {
	background-color:black;
	border:1px solid var(--theme-1);
	color:white;
}
.post-nav a {
	width:48%;
	background-color:transparent;
	border-bottom:1px solid var(--theme-2);
	text-align:center;
	padding:0.75rem;
}
.post-nav a:hover {
	background-color:var(--theme-2);
	color:var(--theme-1);
}
#voteSection button {
	width:125px;
	height:50px;
}
.uploader-profile-pic {
	width:75px;
	height:75px;
	object-fit:contain;
	background-color:black;
	border-radius:2.5rem;
}
.comment-profile-image {
	width:35px;
	height:35px;
	object-fit:contain;
	background-color:black;
	border-radius:2.5rem;
}
.cool-button {
	width: 100%;
    background-color: transparent;
    border: 1px solid var(--theme-2);
    text-align: center;
    padding: 0.75rem;
	border-radius:0.25rem;
}
.cool-button:hover {
	background-color:var(--theme-2);
	color:var(--theme-1);
}
.preview-item img {
    background-color: black;       /* tausta mustaksi */
    object-fit: contain;           /* kuvan sovitus */
	width:100%;
	max-height:320px;
}
.preview-item img:hover {
    /*transform: scale(0.98);        /* zoom out efekti */
	object-fit: contain;   
}

.preview-item:hover {
	border: 1px solid var(--theme-2);
}
.footer a {
	color:var(--text-color);
}
.preview-item {
    display: none;
}
.preview-item:nth-child(-n+12) {
    display: block;
}
.comment {
	border-top:1px solid var(--text-color);
	padding-top:1rem;
	padding-bottom:1rem;
}
.pointer {
	cursor:pointer;
}
.btn-nav {
	font-weight:300;
	color:#c4c4c4;
	border:1px solid var(--theme-2);
	font-size:0.95rem;
}
.toggle-navigation {
	display:none;
}
#cookieConsent {
    font-family: "Roboto", sans-serif;
    font-size: 0.9rem;
}

#cookieConsent a {
    color: var(--theme-2);
}

#cookieConsent button {
    min-width: 100px;
}

@media (min-width:901px) {
	.top-navigation {
		display:block!important;
	}
}
	
@media (max-width: 900px) {
	.top-navigation {
		width:100%;
		margin-top:1rem;
		display:none;
	}
	.top-navigation a {
		border:0px;
		border-bottom:1px solid var(--theme-2);
		border-radius:0rem;
		display:block;
		padding:1rem 1rem;
		text-align:end;
		margin-left:0rem;
		font-size:1.1rem;
	}
	.toggle-navigation {
		display:block;
	}
}

@media (max-width:480px) {
	.site-logo {
		font-size:1.4rem;
		line-height:1.6rem;
	}
	.content-area {
		margin-top:0rem!important;
	}
	.styled-button-2 {
		width:100%;
	}
	.cool-button {
		width:100%;
	}
	.content-area {
		border:0px;
	}
	.breadcrumb {
		width:100%;
	}
	.post-controls {
		flex-direction: column;
	}
	.post-info {
		width:100%;
	}
	.card {
		border:none;
	}
}