/* this is also a comment */
/* comments describe code without getting in the way */

/* in CSS, one can customise the style of body tags,  */
body {
  margin: 0; /* removes margins */
  padding: 25px; /* adds padding around the body */
  font-family: 'Crimson Pro', serif; /* changes font */
  height: 100vh; /* body occupies total height of the screen (otherwise it just takes what the text covers) */
  display: flex; /* all items will fit in a flexy way */
  flex-direction: column; /* the order is left-to-right first, top-to-bottom second */
  align-items: center; /* center all items horizontally */
}
body::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 140vw;    /* oversize to cover viewport corners when rotated */
  height: 140vh;
  transform: translate(-50%, -50%) rotate(15deg); /* rotate here (15deg) */
  transform-origin: center center;
  z-index: -1;
  pointer-events: none;
  background-image: url('../images/Siddharta_landing_page.jpg');
  background-size: 10% auto; /* keep your scale */
  background-position: center;
  opacity: 0.15;
}
h1 {
  color: rgb(68, 5, 5);
  font-family: 'Crimson Pro', serif;
  text-align: center;
  font-size: 3em;
  margin: 0px 0;
}
h2 {
  font-family: 'Crimson Pro', serif;
  color: rgb(68, 5, 5);
  text-align: center;
  margin : 0px 0;
}

h3 {
  font-family: 'Crimson Pro', serif;
  color: rgb(68, 5, 5);
  text-align: center;
  margin: 4px 0;
}

/* we can also assign style to class'd objects like grid or grid-item. Just put a dot before the class name. */
.grid {
  margin : 45px 0;
  flex: 1;
  display: grid;
  grid-template-columns: repeat 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  width: 50%;
  padding: 5px;
  box-sizing: border-box;
}

.proj_img {
  width: 100%;
  height: 100%;
  object-fit: contain;    /* use 'contain' to show whole image with letterboxing instead */
  display: block;
  border-radius: 4px;   /* optional visual touch */
  /* opacity: 0.8; */


}

.grid-item {
  padding:0px;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid black;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
}
/* .grid {
  margin : 45px 0;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
}

.grid-item {
  padding:0px;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid black;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
} */
/* css allows you to do some magic, like customising your list's dots */
li::marker {
  content: "🦆 "; /* or any emoji */
}

/* you can refer to a double class tag like "grid-item buttons" by writing them together */
.grid-item.buttons {
  display: grid; /* makes the container itself a grid */
  grid-template-columns: repeat(3, 1fr); /* 3 buttons per row */
  gap: 10px; /* spacing between buttons */
  justify-items: center; /* center buttons inside their cell */
  align-items: center;
}

/* aaand <button> or other interactive elements can be styled too */
.grid-item button   {
  border: 2px solid #333;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 16px;
  color: #333;
  background-color: cornsilk;
  cursor: pointer;
  width: 100px;
  height: 100px;
}

/* and their behaviour */
.grid-item button:hover   {
  background-color: orange;
}

.code-container {
  border: 4px dotted magenta;
  padding: 1em;
  background: white;
}

/* you can even overwrite custom css for mobile browsers */
@media (max-width: 1000px) {
  .grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    grid-template-rows: repeat(3,1fr); /* rows adjust automatically */
  }

  html{font-size:16px}
  
}