/* ppl_style.css */

/* Brand Colors */
:root {
  --primary: #373A78;   /* deep blue */
  --accent: #D52323;    /* red */
  --light: #CBCCEB;     /* soft light */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  height: 100%;
  font-family: Arial, sans-serif;
  color: var(--light);
}

/* Banner styling */
.banner {
  background: url('../images/banner.jpg') no-repeat center center;
  background-size: cover;   /* fills screen proportionally */
  height: 100vh;            /* full viewport height */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Welcome text top-left */
.banner h1 {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  background: rgba(0,0,0,0.5); /* overlay for readability */
  padding: 10px 15px;
  border-radius: 5px;
}

/* Social links bottom right */
.social-links {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
}

.social-links a {
  text-decoration: none;
  background: var(--accent);
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  font-weight: bold;
  transition: background 0.3s ease;
}

.social-links a:hover {
  background: #a31212;
}