body {
	background-color: var(--bs-light);
}
html {
  	scroll-behavior: smooth;
}

.fa-copy[data-clipboard] {
	cursor:pointer;
}

section.header > div {
	position: relative;
}

section.headers > div:after {
    content: '';
    position: absolute;
    inset: 10%;
    backdrop-filter: blur(20px);
    border: 1px solid white;
    -webkit-mask: linear-gradient(90deg, transparent, black 99%);
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

section {
	position:relative;
}

section.after-right:before {
	content: url('pomagajmo_si.png');
	position:absolute;
	bottom: 0px;
	right: 0px;
}
section.after-left:before{
	position:absolute;
    	background-image: url('pomagajmo_si.png');
    	background-size: 600px 600px;
    	display: inline-block;
    	width: 600px; 
    	height: 600px;
    	content:"";
	bottom: 0px;
	right:0px;
z-index:0;
}

.article-container {
	display:flex;
	justify-content: center;
	align-items: center;
	gap:20px;
}
.article-image-box {
	position:relative;
    	width: 300px;
    	border-radius: 20px;
	overflow: hidden;
}
.article-image-box .article-page {
  	width: 300px;
        transform: scale(1.1);
	transition: all 0.2s ease-in-out;
	cursor: pointer;
}
.article-image-box:hover .article-page {
	transform: scale(1);
}
.article-image-box:after {
  	content: attr(data-content);
 	color: #fff;
    	text-align: center;
    	position:absolute;
    	width:100%; 
    	height:100%;
    	top:0; left:0;
    	background:rgba(0,0,0,0.6);
    	opacity:0;
    	padding-top: calc(50% - 0px);
	font-size:1.3em;
    	transition: all 0.5s;
    	-webkit-transition: all 0.5s;
	cursor: pointer;
}
.article-image-box:hover:after {
    opacity:1;
}


.footer-logo {
    width: 80px;
    background-color: var(--bs-light);
    padding: 10px;
    border-radius: 5px;
    transition:all 0.2s ease-in-out;
}
.footer-logo:hover {
 	transform:scale(1.2);
	box-shadow:2px 2px 5px black
}

@media(max-width: 767px) {
	form.donation-form, div.qr-code-container {
		width: 100% !important;
	}
	section.after-left:before{
    		background-size: 300px 300px;
    		width: 300px;
    		height: 300px;
    		bottom: 20px;
    		right: 10px;
	}

	.bg-sabina > div > h1 {
		text-align: left;
	}
}

@media(max-width: 674px) {
	.article-container {
		flex-direction: column;
	}
}
@media(max-width: 575px) {
	.article-image-box {
		width: 100%;
	}
	.article-page {
		width: 100% !important;
	}
}