/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

body {
  background-image: url("IMG_4883.JPG");
  background-size : cover;
background-repeat: no-repeat;    /* prevents tiling */
background-attachment: fixed;    /* keeps it still when scrolling */
background-position: center;     /* centers the image */
      color: #3b3b3b;
     font-family: 'Poppins', sans-serif;
      max-width: 700px;
      margin: 60px auto;
      padding: 20px;
      line-height: 1.7;
      
}
.square {
  border: 4px solid blue;   /* the outline */
  padding: 20px;             /* space inside the square */
  width: 300px;              /* square size */
  height: 300px;             /* same as width */
  display: flex;             /* centers your text */
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 30px;       /* optional, makes corners softer */
  background-color: rgba(255, 255, 255, 0.05); /* optional light background */
}
.highlight {
  background-color: rgba(255, 255, 255, 0.15);
  padding: 6px 10px;
  border-radius: 6px;
  display: inline;
}