html, body {padding:0; margin:0; background:#f6f6f6; scroll-behavior: smooth;}

#top {width:100%; min-height:600px; height:100dvh;
	background: url('../images/backing3.jpg') no-repeat bottom right;
	background-size: cover;
	}

#inner {display:block; width:50vw; min-width:600px; background:#0007; height:100%; display:flex; justify-content:center; align-items:center;
-webkit-clip-path: polygon(0 0, 97% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 97% 0, 100% 100%, 0% 100%);
}

#center {text-align:left;}
#center img {width:150px;}

#inner h1 {font:300 80px/80px 'Raleway', sans-serif; color:#fff; padding:0; margin:0;} 
#inner h3 {font:300 40px/40px 'Raleway', sans-serif; color:#fff; padding:0; margin:5vh 0 0 0;} 
#inner h4 {font:400 40px/40px 'Great Vibes', sans-serif; color:#fff; padding:0; margin:0;}

#inner .logo {display:block; width:180px; aspect-ratio:2/1; margin:0;}



@media only screen and (max-width: 600px) {
	#inner {width:100%; min-width:auto;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
	#inner h1 {font:300 13vw/13vw 'Raleway', sans-serif;} 
	#inner h3 {font:300 7vw/7vw 'Raleway', sans-serif;} 
	#inner h4 {font:400 7vw/7vw 'Great Vibes', sans-serif;}

	#inner .logo {display:block; width:30vw; aspect-ratio:2/1;}
}
#content {width:100%; position:fixed; top:0; left:0; z-index:100;}

#menuBar {width:100%; display:flex; justify-content:center; align-items:center; background:#000;}
#menuBar a {text-align:center; color:#fff; font:600 18px/28px 'Raleway', sans-serif; text-decoration:none; background:#000; transition:0.25s; padding:15px 10px;}
#menuBar a i {font:500 18px/28px; padding:5px 0;}
#menuBar a:hover {background:#5B6F3A;}

@media only screen and (max-width: 600px) {
	#menuBar {flex-wrap:wrap;}
}

.textBox {width:95%; max-width:1200px; padding:20px 0; margin:30px auto;}
.textBox  p {font:400 18px/24px 'Raleway', sans-serif; color:#141415; padding:5px 0; margin:10px 0; display:inline-block;
page-break-inside: avoid;
break-inside: avoid;}

blockquote {padding:0; margin:0; text-align:center;}
.textBox  p.cite {font:600 22px/28px 'Raleway', sans-serif; color:#141415; padding:5px 0; margin:25px 0;}
.textBox  p a {font:600 18px/24px 'Raleway', sans-serif; color:#c00; transition:0.25s;}
.textBox  h3 {font:700 30px/30px 'Raleway', sans-serif; color:#000; text-align:center; padding:0; margin: 50px 0 0 0;} 

.links {position:absolute; right:0; top:60px; width:250px; padding:0; margin:4px 0; display:flex; justify-content:center; gap:0px; flex-wrap:wrap; }

.links .ads {width:250px; margin:3px 0; background:#000; border-radius:10px 0 0 10px;}
.links .ads p.linkad {color:#ddd; font:400 14px/16px 'Raleway', sans-serif; padding:5px 10px; margin:5px 0;}
.links .ads p.linkad a {color:#fff; font:600 14px/16px 'Raleway', sans-serif; text-decoration:none;}


@media only screen and (max-width: 850px) {
.links {position:static; width:95%; max-width:1200px; padding:20px 0; margin:40px auto; display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.links .ads {width:300px; margin:3px 0; border-radius:10px; background:#fff;}
.links .ads p.linkad {font:400 16px/22px 'Raleway', sans-serif; padding:5px 10px; margin:5px 0; color:#141415;}
.links .ads p.linkad a {font:600 16px/22px 'Raleway', sans-serif; color:#c00; transition:0.25s; text-decoration:none;}
}


.columns {columns: 2; column-gap: 40px; column-rule: 2px solid #fff; text-align: justify; margin: 0 0 40px 0;}

@media only screen and (max-width: 800px) {
	.columns {columns: 1; column-gap: 0; column-rule: 0px solid #fff; text-align: justify; margin: 0 0 40px 0;}
}

.textBox dl {padding:0; margin:35px 0; border-radius:10px; background:#fff;}
.textBox dt {font:600 24px/24px 'Raleway', sans-serif; color:#141415; text-align:center; padding:30px 0; margin: 20px 0 0 0;}
.textBox dd {padding:0 0 30px 0; margin:0; display:flex; flex-wrap:wrap; justify-content:space-around; gap:5px;}
.textBox dd a {display:inline-block; font:500 16px/18px 'Raleway', sans-serif; color:#000; margin:5px 0; padding:0; border-bottom:1px solid #0000; box-sizing:border-box; text-decoration:none; transition:0.25s;}
.textBox dd p::before {display:inline-block; content: url('../images/logo-red.svg'); width:25px; margin-right:8px;}
.textBox dd a:hover {color:#c00; border-bottom:1px solid #c00;}
.textBox dd a i {color:#000;}

.latest dd {width:100%; margin:5px auto; display:grid; gap:10px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); grid-template-rows:masonry;}
.textBox dd p {width:auto; padding-left:5px; }

.latest dd p {margin:0; padding:0 0 0 5px;
  animation-timeline: view(block 50% 10%);
  animation-name: fadein;
  animation-fill-mode: both;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
  animation-timing-function: linear;
}
/*
@keyframes fadein {
  0% {opacity:0; transform:translateY(50px);}
  50% {opacity:0.5; transform:translateX(0);}
  75% {opacity:1; transform:translateX(0);}
  100% {opacity:1; transform:translateX(0);}
}
*/
#paypaldonate {text-align:center; margin-top:100px;}
#paypaldonate p {font:700 18px/24px 'Raleway', sans-serif; color:#141415; padding:5px 0; margin:0;}
#paypaldonate h1 a {font:700 50px/50px 'Raleway', sans-serif; color:#000;}

#footer {width:100%; background:#000; padding:0 20px; box-sizing:border-box;}
#footer .sub {display:flex; justify-content:center; gap:10px; flex-wrap:wrap;}
#footer .sub a {display:block; font:600 18px/24px 'Raleway', sans-serif; color:#fff; text-decoration:none; padding:5px ; margin:0;}
#footer .sub a:hover {background:#5B6F3A;}

#footer p {font:400 16px/24px 'Raleway', sans-serif; color:#fff; padding:20px 0 40px 0; margin:0; text-align:center;}