/* DEBUG MODE — shows every element box *
  outline: 2px solid red !important;
  background-clip: content-box !important;
}*//**/
body, html {
  margin: 0;
  padding: 0;
  
}
body{
  background-image: url("images/y2kbg.jpg");
  background-repeat: repeat;
}

html{
  overflow-y: scroll;
}
@font-face {
  font-family: public-sans;
  src: url(fonts/public-sans.medium.ttf);
}
@font-face {
  font-family: vipnargorgialla;
  src: url(fonts/vipnagorgialla/Vipnagorgialla\ Rg\ It.otf);
}

.container {
  display: grid;
  width: 70%;                 /* make it narrower than full screen */
  max-width: 1200px;          /* optional max width */
  height: auto;               /* let content determine height */
  margin: 50px auto;          /* centre it and add vertical spacing */
  grid-template-columns: 1fr; /* adjust columns as needed */
  grid-template-rows: 0.5fr auto 200px;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "NavigationBar"
    "AboutMe"
    "Footer";
  /* window background */
  font-family: vipnargorgialla;
}
.NavigationBar {
  position: relative;    /* or absolute/fixed if needed */
  left: 0;
  top: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background-color: #0f0b4c;
  box-sizing: border-box;
  z-index: 10;           /* stay on top if needed */
}
.NavigationBar_Logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.NavigationBar_Logo img {
  width: 50px;       /* Make image square */
  height: 50px;
  object-fit: cover; /* Ensures image fills square without stretching */
  border-radius: 8px; /* Optional: nice rounded corners */
}
.NavigationBar a {
  text-decoration: none;
  color: white;
  font-weight: 600;
  font-family: vipnargorgialla;
  padding: 10px 20px;
  transition: 0.2s;
}
.NavigationBar a:hover {
  color: white;
  background-color: #4155da;
  border-radius: 6px;
}

.AboutMe {  display: grid;
  color: white;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 550px 1fr;
  gap: 0px 0px;
  padding: 20px;
  grid-auto-flow: row;
  grid-template-areas:
    "AboutMe_Img AboutMe_Img AboutMe_Text  AboutMe_Text "
    "AboutMe_Img AboutMe_Img AboutMe_Text  AboutMe_Text ";
  grid-area: AboutMe;
  background-color: #3c2c8c;
}
.AboutMe_Text h1 { grid-area: AboutMe_Text ; 
  text-align: left;
}
.AboutMe_Text  { grid-area: AboutMe_Text ; 
  text-align: center;
}
.AboutMe_Img { grid-area: AboutMe_Img;
  display: flex;               /* make it easier to center the image */
  justify-content: center;
  align-items: center;
}

.AboutMe_Img img {
  width: 80%;                 /* fill the grid area horizontally */
  height: 80%;                /* fill the grid area vertically */
  object-fit: cover;           /* crop image proportionally to fill container */
  object-position: center;     /* keep the image centered */
}

.Footer { grid-area: Footer; 
  background-color: #b3dcff;
}

.Footer::before {
  content: attr(class);
  font-size: 30px;
  color: white;
  font-weight: bold;
  padding: 10px;
  display: block;
}
/*Gallery*/


.gallery-inner {
  max-width: 1200px;         /* optional: max width for content */
  margin: 0 auto;            /* center the gallery */
}

.gallery {
  background-image: url("images/y2krepeatbackground1.jpg");
  background-size: auto; /* gallery wall */
  padding: 70px;  
  column-count: 2;
  column-gap: 40px;          /* wider gap between columns */
}

.gallery-item {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  padding-top:30px;
}

.gallery-item img {
  display: block;
  width: 80%;        /* shrink images to 80% of column width */
  margin: 0 auto;    /* center horizontally */
  height: auto;
  background-color: white;
  border-radius: 0;
  transition: transform 0.3s, border-radius 0.3s;
}

.gallery-item:hover img {
  border-radius: 12px;
  transform: scale(1.05);   /* pop-out hover effect */
}

@media (max-width: 600px) {
  .gallery {
    column-count: 1;
  }

  .gallery-item.first-row {
    width: 100%;
    margin-right: 0;
  }
}