@font-face {
  font-family: Roboto;
  src: url("assets/roboto-regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Roboto;
  src: url("assets/roboto-medium.ttf") format("truetype");
  font-weight: 500 900;
  font-display: swap;
}
* { box-sizing: border-box; }
body { margin: 0; background: #000; color: #fff; font-family: Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.5; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.skip-link { position: absolute; top: -100px; left: 10px; background: #fff; color: #000; z-index: 10; padding: 8px; }
.skip-link:focus { top: 10px; }
.site-header { padding-top: 25px; }
.logo-wrap { max-width: 570px; padding: 10px; margin: auto; }
.logo { width: 100%; background: #fff; border-radius: 30px; }
.memorial { max-width: 1140px; margin: auto; display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: start; }
.candle { padding: 10px; }
.candle img { width: 100%; }
.memorial-frame { margin: 0; padding: 10px; border: 3px dotted #c105f8; border-radius: 15px; }
.memorial-frame img { width: 100%; }
.contact-section { margin: 50px 0; background: linear-gradient(rgba(204, 0, 255, .67), #000); }
.contact-container { max-width: 1140px; margin: auto; }
.contact-columns { display: grid; grid-template-columns: 1fr 1fr; }
.contact-details, .contact-form { padding: 10px; }
.contact-details h2 { font-size: 52px; line-height: 1; font-weight: 500; text-decoration: underline; margin: 0 0 20px; }
.social-links { display: flex; gap: 25px; margin-bottom: 20px; }
.social { display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; border-radius: 3px; color: #fff; }
.social svg { height: 23px; max-width: 25px; }
.facebook { background: #001eff; }
.twitter { background: #1da1f2; }
.contact-line { margin: 0 0 20px; padding-bottom: 14.4px; }
.address p { margin: 0 0 16px; }
.contact-form label { display: block; color: #61ce70; line-height: 16px; }
.contact-form input, .contact-form textarea { display: block; width: 100%; border: 1px solid #69727d; border-radius: 3px; background: #fff; color: #7a7a7a; font: 15px/21px Roboto, Arial, sans-serif; margin: 0 0 10px; }
.contact-form input { height: 40px; padding: 8px 16px; }
.contact-form textarea { height: 96px; padding: 5px 14px; resize: vertical; }
.contact-form button { width: 100%; height: 40px; margin: 0; border: 0; border-radius: 3px; background: #61ce70; color: white; font: 500 15px Roboto, Arial, sans-serif; cursor: pointer; }
.contact-form button:hover { background: #4ab45a; }
.form-notice { color: #fff; font-size: 13px; }
.map { padding: 0 0 0; }
.map iframe { display: block; border: 0; width: 100%; height: 332px; }
.club-buddies { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 154px; padding: 25px; border: 20px solid #333; border-radius: 60px; background: #fff; }
.club-buddies h3 { margin: 0; padding: 10px; color: red; font-size: 45px; font-weight: 600; line-height: 1; }
.club-buddies div { text-align: center; padding: 10px; }
.club-buddies a { display: inline-block; padding: 12px 35px; border-radius: 30px; background: red; color: #fff; font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; text-transform: uppercase; }
.copyright { max-width: 1140px; min-height: 50px; margin: auto; padding: 10px 0; color: rgba(255,255,255,.37); font-size: 14px; font-weight: 300; }
.copyright a { text-decoration: none; }
@media (max-width: 1199px) {
  .memorial, .contact-container, .copyright { max-width: calc(100% - 30px); }
}
@media (max-width: 1024px) {
  .logo-wrap { width: 50%; }
  .contact-columns { grid-template-columns: 25% 50% 25%; padding: 0 15px; }
  .contact-line, .address { font-size: 13px; line-height: 1.5; }
  .contact-line { padding-bottom: 14.4px; }
  .club-buddies h3 { font-size: 30px; }
  .club-buddies { min-height: 210px; padding: 50px 20px; }
  .copyright { min-height: 100px; padding: 25px; text-align: center; }
}
@media (max-width: 767px) {
  .logo-wrap { width: 100%; max-width: none; padding: 11px 25px 10px; }
  .memorial { display: block; }
  .contact-columns { display: block; padding-top: 30px; }
  .contact-details h2, .social-links { margin-bottom: 10px; }
  .contact-line { margin-bottom: 10px; padding-bottom: 8.4px; }
  .social-links { justify-content: center; }
  .club-buddies { display: block; min-height: 248px; padding: 30px 20px; }
  .club-buddies h3 { text-align: center; }
}