/* Setting Colors */
:root {
  --bg-color: #edf1f7;
  --text-dark: #1d1f26;
  --text-light: #5c6270;
  --radius: 22px;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg-color);
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  overflow-x: hidden;
}

/* Background effect */
body::before {
  content: "";
  position: fixed;
  top: -20%;
  left: -20%;
  width: 150%;
  height: 150%;
  background: radial-gradient(          /* Aurora gradient colors inspired by palettes explored using:
                                            CSSGradient.io — https://cssgradient.io/  */                                                                                       
      circle at 20% 20%,
      rgba(255, 140, 245, 0.25),
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(140, 200, 255, 0.30),        
      transparent 50%
    ),
    radial-gradient(
      circle at 50% 80%,
      rgba(255, 205, 140, 0.25),
      transparent 55%
    );
}

.container {
  max-width: 1100px;
  margin: auto;
  padding: 50px 32px;
}

h1 {
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -1px;
  margin-bottom: 5px;
  color: var(--text-dark);
}

.subtitle {
  font-size: 20px;
  color: var(--text-light);
  margin-bottom: 40px;
}


.subtitle a {             /* Had issue with clickable link for source due to 
                          iframe overlay,chatgpt suggested using position relative and z-index */
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.section {
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(18px) saturate(160%);
  border-radius: var(--radius);
  padding: 35px 40px;
  margin-bottom: 55px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 15px 45px rgba(0,0,0,0.08);
  transition: 0.3s ease;
}


.section p {
  font-size: 18px;
  line-height: 1.75;
}

/* Dashboard Frame */
iframe {
  width: 100%;
  height: 650px;
  border-radius: 18px;  /* Asked ChatGPT how to get the rounded border effect, it suggested border-radius */
  border: none;
  margin-top: 20px;
  box-shadow: 0 12px 35px rgba(0,0,0,0.15); /* ChatGPT prompt: What can I do for a modern 
                                                touch to my iframe dashboard in CSS? ChatGPT
                                                suggested box shadow */
}