html {
  height: 100%;
  width: 100%;
}

body {
  background-color:#111111;
  color:white;
  text-align: center;
  font-family:"Serif", Garamond, serif;
}

h1{
  font-size:59px;
}

.subtext{
  font-size:30px;
}

.navbar {
  display:inline-block;
  font:normal bold 20px/1 "Serif", Garamond, serif;
  margin-right: 10px;
}

.pg {
  font-size: 25px;
}

.pic {
  width:350px;
  height:350px;
  margin:50px;
}

.embed {
  margin:50px;
  align:center;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px; /* Adjust as needed */
  gap: 10px; /* Adds spacing between words */
}

.outline {
  font-family: Arial, sans-serif; /* Adjust font */
  font-size: 60px; /* Adjust size */
  font-weight: bold;
  color: transparent;
  -webkit-text-stroke: 2px white; /* Outline effect */
}

.solid {
  font-family: Arial, sans-serif; /* Adjust font */
  font-size: 60px; /* Adjust size */
  font-weight: bold;
  color: white; /* Solid white text */
}

.outline-text {
  font-family: Arial, sans-serif; /* Use your desired font */
  font-size: 60px; /* Adjust font size */
  font-weight: bold;
  color: transparent;
  -webkit-text-stroke: 2px white; /* Outline effect */
  text-align: center;
  padding: 20px; /* Optional: Add spacing around text */
}

.quote {
  text-align: center;
  font-size: 25px;
}
.h1 {
  text-align: center;
}

.grid-container {
  display:grid;
  grid-template-columns: repeat(3, 1fr); /* Creates three equal columns */
  grid-template-rows: repeat(3, 1fr); /* Creates three equal rows */
  gap: 20px; /* Adds space between images */
  width: 90%; /* Adjust width as needed */
  margin: auto; /* Centers the grid */
}
.grid-container img {
    width: 100%; /* Makes images responsive within the grid */
    aspect-ratio: 1 / 1; /* Ensures images are square */
    object-fit: cover; /* Prevents image distortion */
    border-radius: 10px; /* Optional: adds rounded corners */
}