html, body { float: left; width: 100%; height: 100vh; display: inline-block; margin: 0 auto; padding: 0; border: 0; outline: 0; background: #f4f4f3; color: #4f4f4f; text-align: left; font-size: 1em; font-family: 'Marcellus-Regular', 'Arial'; text-align: left; font-weight: 100; }

h1,h2,h3,h5,h6{ margin: 0; padding: 0; font-weight: 100; }
h1 { font-size: 4em; }
h2 { font-size: 3em; padding: 0 0 20px 1.5%; } 
h3 { font-size: 1.5em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }
a { color: #4f4f4f; text-decoration: none; }
a:hover { text-decoration: underline; }

.a { float: left; width: 60%; margin: 20px 20%; }
.a1 { flaot: left; display: inline-block; height: 50px; font-size: 1.7em; }
nav { float: right; display: inline-block; height: 50px; }
nav a { float: left; margin: 8px 15px 0 15px; padding: 0 0 2px 0; border-bottom: 1px solid #4f4f4f00; }
nav a:hover { border-bottom: 1px solid #4f4f4f; text-decoration: none; }
.selected { border-bottom: 1px solid #4f4f4f; text-decoration: none; }

section { float: left; width: 60%; margin: 20px 20%; }
.banner img { float: left; width: 100%; aspect-ratio: 16/9; padding: 0 0 20px 0; transition: all 2s ease-in-out; }
.container { float: left; position: relative; display: inline-block; width: 100%; height: auto; aspect-ratio: 1/0.8; margin: 0 0 20px 0; overflow: hidden; }
.container img { float: left; width: 100%; aspect-ratio: 1/0.8; transition: all 2s ease-in-out; }
article:hover .container img { transform: scale(1.13); }
article { float: left; width: 30%; margin: 0 1.5%; }
article > a:hover h3 { text-decoration: underline; }
article > a:hover { text-decoration: none; }

/* About */
.left, .right { float: left; width: 50%; }
.left img, .right img { width: 100%; }
.service { float: right; width: 45%; margin: 0 2.5%; }
.service img { float: left; width: 100%; }

/* Contact */
.contact { float: left; width: 100%; }
.firstname { display: none; }
._cw > label:after { content: ' \25be'; }
.cw, ._cw > label, ._cw > input, ._cw > textarea { clear: both; float: left; position: relative; width: 39.5%; margin: 15px 0 0 25%; z-index: 1000; text-align: left; }
._cw > label, ._cw > input, ._cw > textarea { margin: 7px 0 0 30%; z-index: 1000; text-align: left; }
._cw > input, ._cw > textarea { padding: 0 0 0 0.5%; background: #fff0; border: none; color: #4f4f4f; font-size: 1.4em; line-height: 1.5em; outline: none; border-radius: 15px; font-weight: 600; border: 2px solid #d3b8ff; }
._cw > label { font-size: 1.5em; font-weight: 600; color: #c8a7ff; }
._cw > input { height: 2em; margin-bottom: 10px; }
._cw > textarea { display: inline-block; min-width: 39.5%; max-width: 39.5%; padding: 10px; min-height: 7.5em; box-shadow: none; }
._cw > input#submit { clear: both; float: right; width: auto; height: auto; margin: 12px 29.5% 100px 0; padding: 10px 20px; color: #4f4f4f; text-shadow: none; }
._cw > ::placeholder { color: #4f4f4f; font-weight: 600; }
input, textarea { font-family: 'Marcellus-Regular'; border: 2px solid #d3b8ff; color: #4f4f4f; }

/* Donations */
.donation-form { float: left; width: 30%; margin: 0 33%; padding: 1%; border-radius: 10px; border: 2px solid #d3b8ff; box-shadow: 0 4px 10px #1A000000; text-align: center; background: white; }
.donation-form h2 { font-size: 24px; color: #333; margin: 0 0 20px 0; }
.donation-amounts { overflow: hidden; margin: 0 0 20px 0; }
.donation-amounts input[type="radio"] { display: none; }
.donation-amounts label { float: left; margin-right: 10px; padding: 10px 15px; border-radius: 5px; border: 2px solid #d3b8ff; cursor: pointer; font-size: 16px; color: #333; transition: all 0.3s ease; background: #fff; }
.donation-amounts input[type="radio"]:checked + label { background: #d3b8ff; color: white; }
.custom-amount { overflow: hidden; margin: 0 0 20px 0; }
.custom-amount input[type="number"] { float: right; width: 80%; padding: 10px; border-radius: 5px; border: 2px solid #d3b8ff; font-size: 16px; outline: none; }
.custom-amount input[type="number"]:disabled { background: #f0f0f0; }
.frequency { margin: 0 0 20px 0; }
.frequency select { width: 100%; padding: 10px; border-radius: 5px; border: 2px solid #d3b8ff; font-size: 16px; outline: none; cursor: pointer; }
.donate-btn { width: 100%; padding: 15px; border-radius: 25px; border: none; font-size: 18px; cursor: pointer; transition: background-color 0.3s ease; background: #d3b8ff; color: white; }
.donate-btn:hover { background: #c09bff; }







@font-face{font-family:'Marcellus-Regular';src:url('/sl/fonts/Marcellus-Regular.ttf');font-display:swap;}