html {
	scroll-padding-top:66px; /* 6px more */
}
body {
	font-family: sans-serif;
}

p {
	font-family: sans-serif;
	line-height: 1.6;
	padding: 0 0 1rem 0;
	text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

li {
	line-height: 1.4;
	margin-left: -0.5rem;
}

.mainpage {
	padding: 1rem 2rem;
}

.logo {
	transition: all 1s ease;
	transform: rotateZ(0deg);
}

.logo:hover {
	transform: scale(1.1);
	transition: all 1s ease;
}

.logotext {
	display: inline-block;
    vertical-align: top;
    padding: 18px 0;
}

.header .logo {
	padding: 12px 0 0 24px;
}

header.header {
	background-color:transparent;
}

.dark header.header {
	background-color:transparent;
}

.header ul {
	background-color: transparent;
}

.dark .header ul {
	background-color: transparent;
}
.container-header {
	backdrop-filter: blur(20px);
	background-color: #ffffff80;
}

.dark .container-header {
	backdrop-filter: blur(20px);
	background-color: #20202040;
}

nav.menu {
	background-color:#ffffffa0;
}

.dark nav.menu {
	background-color: #000000a0;
}

.blockempty {
	background-color: transparent;
}

.dark .blockempty {
	background-color: transparent;
}

.text-light {
	color: #c0c0c0;
}

.text-dark {
	color: #808080;	
}

.img-portrait {
	border-radius: 50%;
}

.link {
	color: #4f789b;
	opacity: 1;
	text-decoration: underline;
	transition: 0.3s linear;
}
.testnavbar {
	backdrop-filter: blur(5px);
	background-color: transparent;
}

.testnavbottom {
	background-color: transparent;
	text-align:center;
}

.link:hover {
	color: #ff8000;
	opacity: 1;
	text-decoration: underline;
	transition: 0.3s linear;
}

.dark .link {
	border: none;
}

/* adding some classes for fontawesome */
.fa-addon-top {
	position: relative;
	left: -6px;
	top: -9px;
	font-size: 80%;
	text-shadow: 1px 1px 0px rgb(255,255,255), -1px 1px 0px rgb(255,255,255), 1px -1px 0px rgb(255,255,255), -1px -1px 0px rgb(255,255,255);
}

.fa-addon-middle {
	position: relative;
	left: -1.2em;
	font-size: 70%;
}

.fa-addon-bottom {
	position: relative;
    left: -1rem;
    top: 0.5rem;
	font-size: 80%;
	text-shadow: 1px 1px 0px rgb(255,255,255), -1px 1px 0px rgb(255,255,255), 1px -1px 0px rgb(255,255,255), -1px -1px 0px rgb(255,255,255),
	1px 0px 0px rgb(255,255,255), 0px 1px 0px rgb(255,255,255), 0px -1px 0px rgb(255,255,255), -1px 0px 0px rgb(255,255,255);
}

.fa-glow {
	text-shadow: 1px 1px 0px rgb(255,255,255), -1px 1px 0px rgb(255,255,255), 1px -1px 0px rgb(255,255,255), -1px -1px 0px rgb(255,255,255),
	1px 0px 0px rgb(255,255,255), 0px 1px 0px rgb(255,255,255), 0px -1px 0px rgb(255,255,255), -1px 0px 0px rgb(255,255,255);
}

/* adaption for boostrap to the act-act-act theme */

.btn {
	border-radius:6px;
	border:none;
	/* box-shadow: 1px 1px 2px rgba(0,0,0,0.3); */
	box-shadow: 0 3px 6px rgb(0 0 0 / 23%);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	/* color:#ffffff; */
}

.btn:hover {
	/* color: #ffffff; */
	border-radius:6px;
	box-shadow: 0 14px 28px #00000040;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	margin: -3px 0 3px 0;
		background-image: linear-gradient(135deg, #f0f0ff00 50%, #f0f0ffa0 58%, #f0f0ffa0 60%, #f0f0ff00 70%);
		 background-size: 600% 400%;
		 animation: gradientAnimation 3s infinite alternate;
		animation-timing-function: ease-in-out;
}

@keyframes gradientAnimation {
	0% { background-position: 0% 0%; }
	100% { background-position: 100% 100%; }
}

.btnicon:hover {
	transform: scale(1.2);
}

/* small buttons for test navigation */
.btn-nav {
	border-radius: 3px;
	margin: 0 1px 0 1px;
	background-image: linear-gradient(115deg, #ffffff20 0%, #ffffff00 40%, #00000000 60%, #00000020 100%);
}

.btn-nav:hover {
	border-radius: 3px;
	margin: -2px 1px 2px 1px;
	background-image: linear-gradient(115deg, #ffffff20 0%, #ffffff00 40%, #00000000 60%, #00000020 100%);
}

.dark .btn {
	color: #f0f0f0;
	/* box-shadow: 0 1px 3px #ffffff20, 0 1px 2px #ffffff40; */
	box-shadow: 1px 1px 1px 1px #00000040;
}

.dark .btn:hover {
	color: #f0f0f0;
	/* box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.3), 0px 0px 12px 2px #ffffff; */
	box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
}

.btn-icon {
	background-color:#00000010;
	border-right:0px solid #00000040;
	margin:-8px 3px -8px -12px;
	padding:7px 6px 7px 10px;
	border-radius:12px 0 0 12px;
}

.btn-success {
	background-color: #70a070;
	background-image: linear-gradient(150deg, #70a070, #609060 );
}

.btn-warning {
	background-color: #e0b010;
	background-image: linear-gradient(150deg, #e0b010, #d0a000 );
}

.btn-part {
	background-color: #00000030;
	margin: -8px 3px -8px -12px;
	padding: 9px 6px 9px 10px;
	border-radius: 6px 0 0 6px;
}

.btn:disabled {
	color:#00000080;
	box-shadow:none !important;
}
.dark .btn-warning {
	background-color: #ab860c;
	background-image: linear-gradient(150deg, #ab860c, #8c6c01 );
}

.btn-danger {
	background-color: #d85050;
	background-image: linear-gradient(150deg, #d85050, #c84040 );
}

.dark .btn-danger {
    background-color: #a33d3d;
    background-image: linear-gradient(150deg, #a33d3d, #8a2e2e );
}

.btn-link {
	color: #808080;
}

.btn-link:hover {
	color: #808080;
}

.btn-style {
	border-radius: 6px;
	background-image: linear-gradient(115deg, #ffffff40 0%, #ffffff00 40%, #00000000 60%, #00000020 100%);
}

.btn-style:hover {
	border-radius: 6px;
	background-image: linear-gradient(115deg, #ffffff40 0%, #ffffff00 40%, #00000000 60%, #00000020 100%);
}

.block-init {
	border-radius:6px;
}
.block-success {
	background-color: #70a070;
	background-image: linear-gradient(150deg, #70a070, #609060 );
}

.dark .block-success {
	background-color: #70a070;
	background-image: linear-gradient(150deg, #70a070, #609060 );
}

.block-success-light {
	background-color: #e0f0e0;
	background-image: linear-gradient(150deg,#e0f0e0,#d0e0d0);
}

.dark .block-success-light {
	background-color: #406040;
	background-image: linear-gradient(150deg,#406040,#305030);
}

.block-primary-light {
	background-color: #e0e0f0;
	background-image: linear-gradient(150deg,#e0e0f0,#d0d0e0);
}

.dark .block-primary-light {
	background-color: #e0e0f0;
	background-image: linear-gradient(150deg,#636382,#424259);
}

.block-warning {
	background-color: #e0b010;
	background-image: linear-gradient(150deg, #e0b010, #d0a000 );
}

.block-warning-light {
	background-color: #f0e0d0;
	background-image: linear-gradient(150deg,#f0e0b0,#e8d0b8);
}

.dark .block-warning-light {
	background-color: #7a7157;
	background-image: linear-gradient(150deg,#7a7157,#786b10e0);
}

.block-danger {
	background-color: #d85050;
	background-image: linear-gradient(150deg, #d85050, #c84040 );
}

.block-danger-light {
	background-color: #f0e0e0;
	background-image: linear-gradient(150deg,#f0e0e0,#e0d0d0);
}

.dark .block-danger-light {
	background-color: #a37070;
    background-image: linear-gradient(150deg,#634d4d,#634848);
}

.block-light {
	background-color: #f8f8f8;
	background-image: linear-gradient(150deg,#e8e8e8,#c8c8d8);
}	
.badge {
	border-radius:2px;
}


.badge-success {
	color: #fff;
	background-color: #70a070;
	opacity: 0.75;
}

.badge-danger {
	color: #fff;
	background-color: #d85050;
	opacity: 0.75;
}

.text-light {
	color: #d0d0e0 !important;
}

.text-dark {
	color: #606060 !important;
}

.text-success {
	color: #70a070 !important;
}

.text-warning {
	color: #e0b010 !important;
}

.text-danger {
	color: #d85050 !important;
}

.testanswer {
	border-radius: 3px;
}

.blogimg {
	display:inline-block;
	border-radius: 3px;
	border:none;
	/* box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.5); */
	overflow: hidden;
}

a .blogimg {
	border-radius: 6px;
	border:none;
	box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.5);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

a .blogimg:hover {
	border-radius: 6px;
	box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.6), 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 25%);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.img-scale {
	transition: all 0.3s cubic-bezier(.49,0,.52,.93);
}

.img-scale:hover {
	transform: scale(1.2) translate(5%, 5%);
	transition: all 0.3s cubic-bezier(.49,0,.52,.93);
}

.blognoimg {
	border-radius:3px;
}

.dark a .blogimg {
	box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.5);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.dark a .blogimg:hover {
	border:none;
	box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.6), 0px 0px 12px 2px #ffffff;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}


/* forum styling */

.rrforum {
	line-height: 1.1;
	top: 0;
	left: 0;
	background: rgba(247, 146, 42, 0.8);
	border-bottom: 1px solid rgba(247, 146, 42, 1);
}
.rrforum:hover {
	top: 0;
	left: 0;
	background: rgba(247, 146, 42, 1);
	box-shadow: 0px 6px 1px rgba(0,0,0,0.2);
}

.rrforumsub {
	line-height: 1.1;
	top: 0;
	left: 0;
	background: rgba(224, 224, 224, 0.4);
	border-bottom: 1px solid rgba(224, 224, 224, 1);
}
.rrforumsub:hover {
	top: 0;
	left: 0;
	background: rgba(224, 224, 224, 1);
	box-shadow: 0px 6px 1px rgba(0,0,0,0.2);
}

article.rrforumtopic > header {
	background: rgba(247, 146, 42, 1);
}

article.rrforumtopic .caret {
    color: rgba(247, 146, 42, 1);
}

blockquote {
	position: relative;
	margin: 0.1rem 0.1rem 0.5rem 0.22rem;
	padding: 0.5rem;
	background-color: #f0f0f0;
	border-left: 6px solid #c0c0e0;
}

blockquote:before {
	content: "\f10e";
	font-family: FontAwesome;
	font-size: 0.5rem;
	position: absolute;
	color: #c0c0e0;
	padding: 0;
	margin: -0.3rem 0.5rem 0rem -0.3rem;
}

blockquote:after {
	content: "\f10e";
	font-family: FontAwesome;
	font-size: 0.5rem;
	position: absolute;
	right: 0;
	bottom: 0;
	color: #c0c0e0;
	padding: 0;
	margin: 0rem 0.5rem 0.3rem -0.3rem;
}

@media (min-width: 768px) { /* md - medium */
	.mainpage {
		padding: 2rem 3rem;
	}
}

@media (min-width: 1200px) { /* xl */
	.logotext {
		display: inline-block;
   	vertical-align: top;
   	padding: 12px 0;
	}
	.header .logo {
		padding: 3px 0 0 16px;
	}
}