/* 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." */

.side-img {
  /* 1. Rescale */
  width: 35%;      /* If the container is the full page, it becomes half-width */
  height: auto;    /* Keeps the aspect ratio perfect */
  
  /* 2. Remove "Extra Space" */
  display: block;  /* Removes the 3-5px gap below images */
  margin: 0;       /* Removes default browser spacing */
  
  /* 3. Put it on the side */
  float: right;     /* Use 'right' to flip sides; text will wrap around it */
}

.niko-dance {
  width: 50%;
  height: auto;
}


.container {
  /* 1. Intrinsic Width & Reusability */
  width: fit-content;
  max-width: 1140px;
  margin: 20px auto; /* Centers the container itself on the page */
  padding: 20px 35px;
  box-sizing: border-box;

  background-color: rgba(0, 0, 0, 0.75); /* Translucent black */

  /* 3. Vertical Centering of Items */
  display: flex;
  align-items: center;       /* Vertically centers children */
  justify-content: center;   /* Horizontally centers children */
  gap: 16px;                 /* Space between items inside */

  /* 4. Black Borders */
  border: 6px solid #FFFFFF;
  border-radius: 0px;        /* Optional: smooths the corners */
}

@font-face {
  font-family: 'PixelOperatorMono';
  src: url('PixelOperatorMono.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

* {
  font-family: 'PixelOperatorMono', monospace;
}

body {
  background-image: url("background.png");
  background-repeat: no-repeat; /* Prevents the image from tiling */
  background-size: cover;      /* Ensures the image covers the entire element */
  background-attachment: fixed; /* Keeps the background in place while scrolling */
  color: white;
}